/* Start:/res/indexPage/2df8f2b4ee145b28183b.css?1758806688163063*/ /*!*******************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./www/local/components/pages/index/templates/.default/style.scss ***! \*******************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /** * Размер в дизайне указан, если у страницы маленькие отступы по бокам, цель функции пересчитать размеры, в случае, если * мы увеличиваем отступы, но хотим чтобы визуально страница осталась такой же, то есть уменьшаем размер пропорционально * уменьшению ширины контентной области * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @param {number} $oldContent - Изначальная ширина контентной области в пикселях (без указания px) * @param {number} $newContent - Измененная ширина контентной области в пикселях (без указания px) * @return {number} - Измененный размер в пикселях (без указания px) */ /** * Функция возвращает адаптивные размеры в заданном диапазоне, при пороге в $widthMaxSize и больше, размер будет * $maxSize, в диапазоне между $widthMinSize и $widthMaxSize, размер будет пропорционально уменьшаться/увеличиваться, * при достижении порога в $widthMinSize и меньше размер будет $minSize * * @param {number} $widthMinSize - Минимальная ширина экрана в пикселях (без указания px) * @param {number} $widthMaxSize - Максимальная ширина экрана в пикселях (без указания px) * @param {number} $minSize - Размер, который указан для минимальной ширины экрана в пикселях (без указания px) * @param {number} $maxSize - Размер, который указан для максимальной ширины экрана в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета размеров десктопной верстки больших экранов (от 1652px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {px} - Измененный размер */ /** * Функция для пересчета размеров десктопной верстки менее больших экранов (от 1551px до 1651px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета размеров десктопной верстки средних экранов (до 1550px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {px} - Измененный размер */ /** * Функция для пересчета размеров десктопной верстки маленьких экранов (от 1025px до 1252px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета адаптивных размеров в диапазоне планшетной верстки (от 768px до 1024px) * * @param {number} $minSize - Минимальный размер в пикселях (без указания px) * @param {number} $maxSize - Максимальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета адаптивных размеров в диапазоне мобильной верстки (от 375px до 768px) * * @param {number} $minSize - Минимальный размер в пикселях (без указания px) * @param {number} $maxSize - Максимальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * MIXINS: для каждого свойства десктопной верстки * * @param {number} ...$size - Размеры в пикселях (без указания px) * @return {property: px} */ .index__sections { margin-bottom: 64.9304347826px; } @media (max-width: 1651px) { .index__sections { margin-bottom: clamp(61.6673913043px, 61.6673913043px + 3.2630434783 * (100vw - 1551px) / 100, 64.9304347826px); } } @media (max-width: 1550px) { .index__sections { margin-bottom: 49.5652173913px; } } @media (max-width: 1252px) { .index__sections { margin-bottom: clamp(40.1891304348px, 40.1891304348px + 9.3760869565 * (100vw - 1025px) / 227, 49.5652173913px); } } @media (max-width: 1024px) { .index__sections { margin-bottom: clamp(68px, 68px + 8 * (100vw - 768px) / 256, 76px); } } @media (max-width: 767px) { .index__sections { margin-bottom: clamp(60px, 60px + 8 * (100vw - 375px) / 393, 68px); } } .index__sections-element { width: min-content !important; inline-size: min-content; background: #F0F1F4; display: flex !important; align-items: center; box-sizing: border-box; } .index__sections-element { min-width: 239.2173913043px; } @media (max-width: 1651px) { .index__sections-element { min-width: clamp(227.1956521739px, 227.1956521739px + 12.0217391304 * (100vw - 1551px) / 100, 239.2173913043px); } } @media (max-width: 1550px) { .index__sections-element { min-width: 182.6086956522px; } } @media (max-width: 1252px) { .index__sections-element { min-width: clamp(148.0652173913px, 148.0652173913px + 34.5434782609 * (100vw - 1025px) / 227, 182.6086956522px); } } .index__sections-element { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .index__sections-element { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .index__sections-element { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .index__sections-element { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } .index__sections-element { padding: 11.1065217391px 10.252173913px 11.1065217391px 13.6695652174px; } @media (max-width: 1651px) { .index__sections-element { padding: clamp(10.5483695652px, 10.5483695652px + 0.5581521739 * (100vw - 1551px) / 100, 11.1065217391px) clamp(9.7369565217px, 9.7369565217px + 0.5152173913 * (100vw - 1551px) / 100, 10.252173913px) clamp(10.5483695652px, 10.5483695652px + 0.5581521739 * (100vw - 1551px) / 100, 11.1065217391px) clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .index__sections-element { padding: 8.4782608696px 7.8260869565px 8.4782608696px 10.4347826087px; } } @media (max-width: 1252px) { .index__sections-element { padding: clamp(6.8744565217px, 6.8744565217px + 1.6038043478 * (100vw - 1025px) / 227, 8.4782608696px) clamp(6.3456521739px, 6.3456521739px + 1.4804347826 * (100vw - 1025px) / 227, 7.8260869565px) clamp(6.8744565217px, 6.8744565217px + 1.6038043478 * (100vw - 1025px) / 227, 8.4782608696px) clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } .index__sections-element { height: 83.7260869565px !important; } @media (max-width: 1651px) { .index__sections-element { height: clamp(79.5184782609px, 79.5184782609px + 4.2076086957 * (100vw - 1551px) / 100, 83.7260869565px) !important; } } @media (max-width: 1550px) { .index__sections-element { height: 63.9130434783px !important; } } @media (max-width: 1252px) { .index__sections-element { height: clamp(51.822826087px, 51.822826087px + 12.0902173913 * (100vw - 1025px) / 227, 63.9130434783px) !important; } } .index__sections-element { gap: 10.252173913px; } @media (max-width: 1651px) { .index__sections-element { gap: clamp(9.7369565217px, 9.7369565217px + 0.5152173913 * (100vw - 1551px) / 100, 10.252173913px); } } @media (max-width: 1550px) { .index__sections-element { gap: 7.8260869565px; } } @media (max-width: 1252px) { .index__sections-element { gap: clamp(6.3456521739px, 6.3456521739px + 1.4804347826 * (100vw - 1025px) / 227, 7.8260869565px); } } .index__sections-element { margin-right: 10.252173913px; } @media (max-width: 1651px) { .index__sections-element { margin-right: clamp(9.7369565217px, 9.7369565217px + 0.5152173913 * (100vw - 1551px) / 100, 10.252173913px); } } @media (max-width: 1550px) { .index__sections-element { margin-right: 7.8260869565px; } } @media (max-width: 1252px) { .index__sections-element { margin-right: clamp(6.3456521739px, 6.3456521739px + 1.4804347826 * (100vw - 1025px) / 227, 7.8260869565px); } } @media (max-width: 1024px) { .index__sections-element { max-width: unset; width: max-content !important; border-radius: 8px; padding: 16px 24px; height: unset !important; margin-right: clamp(8px, 8px + 4 * (100vw - 768px) / 256, 12px); } } @media (max-width: 767px) { .index__sections-element { padding: clamp(12px, 12px + 4 * (100vw - 375px) / 393, 16px) clamp(20px, 20px + 4 * (100vw - 375px) / 393, 24px); } } .index__sections-element:hover { color: #007B82; } .index__sections-element:nth-last-child(2) { margin-right: 0; } .index__sections-element--all { justify-content: space-between; } .index__sections-text { font-weight: 500; } .index__sections-text { font-size: 13.6695652174px; } @media (max-width: 1651px) { .index__sections-text { font-size: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .index__sections-text { font-size: 10.4347826087px; } } @media (max-width: 1252px) { .index__sections-text { font-size: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } .index__sections-text { line-height: 17.0869565217px; } @media (max-width: 1651px) { .index__sections-text { line-height: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .index__sections-text { line-height: 13.0434782609px; } } @media (max-width: 1252px) { .index__sections-text { line-height: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } @media (max-width: 1024px) { .index__sections-text { font-size: clamp(14px, 14px + 2 * (100vw - 768px) / 256, 16px); line-height: 20px; } } .index__sections-arrow { width: 20.5043478261px; } @media (max-width: 1651px) { .index__sections-arrow { width: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .index__sections-arrow { width: 15.652173913px; } } @media (max-width: 1252px) { .index__sections-arrow { width: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } .index__sections-arrow { height: 20.5043478261px; } @media (max-width: 1651px) { .index__sections-arrow { height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .index__sections-arrow { height: 15.652173913px; } } @media (max-width: 1252px) { .index__sections-arrow { height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } @media (max-width: 1024px) { .index__sections-arrow { display: none; } } .index__sections-image { object-fit: contain; } .index__sections-image { width: 61.5130434783px; } @media (max-width: 1651px) { .index__sections-image { width: clamp(58.4217391304px, 58.4217391304px + 3.0913043478 * (100vw - 1551px) / 100, 61.5130434783px); } } @media (max-width: 1550px) { .index__sections-image { width: 46.9565217391px; } } @media (max-width: 1252px) { .index__sections-image { width: clamp(38.0739130435px, 38.0739130435px + 8.8826086957 * (100vw - 1025px) / 227, 46.9565217391px); } } .index__sections-image { height: 61.5130434783px; } @media (max-width: 1651px) { .index__sections-image { height: clamp(58.4217391304px, 58.4217391304px + 3.0913043478 * (100vw - 1551px) / 100, 61.5130434783px); } } @media (max-width: 1550px) { .index__sections-image { height: 46.9565217391px; } } @media (max-width: 1252px) { .index__sections-image { height: clamp(38.0739130435px, 38.0739130435px + 8.8826086957 * (100vw - 1025px) / 227, 46.9565217391px); } } @media (max-width: 1024px) { .index__sections-image { display: none; } } .index__decisions { margin-bottom: 59.8043478261px; } @media (max-width: 1651px) { .index__decisions { margin-bottom: clamp(56.7989130435px, 56.7989130435px + 3.0054347826 * (100vw - 1551px) / 100, 59.8043478261px); } } @media (max-width: 1550px) { .index__decisions { margin-bottom: 45.652173913px; } } @media (max-width: 1252px) { .index__decisions { margin-bottom: clamp(37.0163043478px, 37.0163043478px + 8.6358695652 * (100vw - 1025px) / 227, 45.652173913px); } } @media (max-width: 1024px) { .index__decisions { margin-bottom: clamp(60px, 60px + 10 * (100vw - 768px) / 256, 70px); } } @media (max-width: 767px) { .index__decisions { margin-bottom: clamp(48px, 48px + 12 * (100vw - 375px) / 393, 60px); } } .index__decisions-title { font-size: 41.0086956522px; } @media (max-width: 1651px) { .index__decisions-title { font-size: clamp(38.947826087px, 38.947826087px + 2.0608695652 * (100vw - 1551px) / 100, 41.0086956522px); } } @media (max-width: 1550px) { .index__decisions-title { font-size: 31.3043478261px; } } @media (max-width: 1252px) { .index__decisions-title { font-size: clamp(25.3826086957px, 25.3826086957px + 5.9217391304 * (100vw - 1025px) / 227, 31.3043478261px); } } .index__decisions-title { line-height: 41.0086956522px; } @media (max-width: 1651px) { .index__decisions-title { line-height: clamp(38.947826087px, 38.947826087px + 2.0608695652 * (100vw - 1551px) / 100, 41.0086956522px); } } @media (max-width: 1550px) { .index__decisions-title { line-height: 31.3043478261px; } } @media (max-width: 1252px) { .index__decisions-title { line-height: clamp(25.3826086957px, 25.3826086957px + 5.9217391304 * (100vw - 1025px) / 227, 31.3043478261px); } } .index__decisions-title { margin-bottom: 34.1739130435px; } @media (max-width: 1651px) { .index__decisions-title { margin-bottom: clamp(32.4565217391px, 32.4565217391px + 1.7173913043 * (100vw - 1551px) / 100, 34.1739130435px); } } @media (max-width: 1550px) { .index__decisions-title { margin-bottom: 26.0869565217px; } } @media (max-width: 1252px) { .index__decisions-title { margin-bottom: clamp(21.152173913px, 21.152173913px + 4.9347826087 * (100vw - 1025px) / 227, 26.0869565217px); } } @media (max-width: 1024px) { .index__decisions-title { font-size: clamp(36px, 36px + 12 * (100vw - 768px) / 256, 48px); line-height: clamp(36px, 36px + 12 * (100vw - 768px) / 256, 48px); margin-bottom: clamp(32px, 32px + 8 * (100vw - 768px) / 256, 40px); } } @media (max-width: 767px) { .index__decisions-title { font-size: clamp(32px, 32px + 4 * (100vw - 375px) / 393, 36px); line-height: clamp(32px, 32px + 4 * (100vw - 375px) / 393, 36px); margin-bottom: clamp(28px, 28px + 4 * (100vw - 375px) / 393, 32px); } } .index__decisions-wrapper { display: grid !important; grid-template-columns: repeat(4, 1fr); } .index__decisions-wrapper { column-gap: 17.0869565217px; } @media (max-width: 1651px) { .index__decisions-wrapper { column-gap: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .index__decisions-wrapper { column-gap: 13.0434782609px; } } @media (max-width: 1252px) { .index__decisions-wrapper { column-gap: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } .index__decisions-wrapper { height: 427.1739130435px !important; } @media (max-width: 1651px) { .index__decisions-wrapper { height: clamp(405.7065217391px, 405.7065217391px + 21.4673913043 * (100vw - 1551px) / 100, 427.1739130435px) !important; } } @media (max-width: 1550px) { .index__decisions-wrapper { height: 326.0869565217px !important; } } @media (max-width: 1252px) { .index__decisions-wrapper { height: clamp(264.402173913px, 264.402173913px + 61.6847826087 * (100vw - 1025px) / 227, 326.0869565217px) !important; } } @media (max-width: 1024px) { .index__decisions-wrapper { display: flex !important; column-gap: unset; height: clamp(422px, 422px + 78 * (100vw - 768px) / 256, 500px) !important; } } @media (max-width: 767px) { .index__decisions-wrapper { height: clamp(400px, 400px + 22 * (100vw - 375px) / 393, 422px) !important; } } .index__decisions-block { position: relative; } .index__decisions-block { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .index__decisions-block { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .index__decisions-block { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .index__decisions-block { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } @media (max-width: 1024px) { .index__decisions-block { max-width: 424px; border-radius: 8px; margin-right: clamp(16px, 16px + 4 * (100vw - 768px) / 256, 20px); } } @media (max-width: 767px) { .index__decisions-block { max-width: clamp(320px, 320px + 104 * (100vw - 375px) / 393, 424px); margin-right: clamp(8px, 8px + 8 * (100vw - 375px) / 393, 16px); } } .index__decisions-block:hover .index__decisions-button { display: block; } @media (max-width: 1024px) { .index__decisions-block:hover .index__decisions-button { display: none; } } .index__decisions-block:nth-last-child(2) { margin-right: 0; } .index__decisions-block-title { font-size: 23.9217391304px; } @media (max-width: 1651px) { .index__decisions-block-title { font-size: clamp(22.7195652174px, 22.7195652174px + 1.202173913 * (100vw - 1551px) / 100, 23.9217391304px); } } @media (max-width: 1550px) { .index__decisions-block-title { font-size: 18.2608695652px; } } @media (max-width: 1252px) { .index__decisions-block-title { font-size: clamp(14.8065217391px, 14.8065217391px + 3.4543478261 * (100vw - 1025px) / 227, 18.2608695652px); } } .index__decisions-block-title { line-height: 27.3391304348px; } @media (max-width: 1651px) { .index__decisions-block-title { line-height: clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px); } } @media (max-width: 1550px) { .index__decisions-block-title { line-height: 20.8695652174px; } } @media (max-width: 1252px) { .index__decisions-block-title { line-height: clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px); } } @media (max-width: 1024px) { .index__decisions-block-title { font-size: clamp(24px, 24px + 4 * (100vw - 768px) / 256, 28px); line-height: clamp(28px, 28px + 4 * (100vw - 768px) / 256, 32px); } } @media (max-width: 767px) { .index__decisions-block-title { font-size: clamp(20px, 20px + 4 * (100vw - 375px) / 393, 24px); line-height: clamp(24px, 24px + 4 * (100vw - 375px) / 393, 28px); } } .index__decisions-text { font-size: 15.3782608696px; } @media (max-width: 1651px) { .index__decisions-text { font-size: clamp(14.6054347826px, 14.6054347826px + 0.772826087 * (100vw - 1551px) / 100, 15.3782608696px); } } @media (max-width: 1550px) { .index__decisions-text { font-size: 11.7391304348px; } } @media (max-width: 1252px) { .index__decisions-text { font-size: clamp(9.5184782609px, 9.5184782609px + 2.2206521739 * (100vw - 1025px) / 227, 11.7391304348px); } } .index__decisions-text { line-height: 20.5043478261px; } @media (max-width: 1651px) { .index__decisions-text { line-height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .index__decisions-text { line-height: 15.652173913px; } } @media (max-width: 1252px) { .index__decisions-text { line-height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } @media (max-width: 1024px) { .index__decisions-text { font-size: clamp(14px, 14px + 4 * (100vw - 768px) / 256, 18px); line-height: clamp(20px, 20px + 4 * (100vw - 768px) / 256, 24px); } } .index__decisions-blackout { height: inherit; width: 100%; position: absolute; background: linear-gradient(180deg, rgba(36, 40, 43, 0) 0%, rgba(36, 40, 43, 0.95) 100%); border-radius: inherit; } .index__decisions-image { height: inherit; width: 100%; object-fit: cover; border-radius: inherit; } .index__decisions-image-block { bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: -1; border-radius: inherit; } .index__decisions-content { height: 100%; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; } .index__decisions-content { padding: 27.3391304348px; } @media (max-width: 1651px) { .index__decisions-content { padding: clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px); } } @media (max-width: 1550px) { .index__decisions-content { padding: 20.8695652174px; } } @media (max-width: 1252px) { .index__decisions-content { padding: clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px); } } @media (max-width: 1024px) { .index__decisions-content { padding: clamp(24px, 24px + 8 * (100vw - 768px) / 256, 32px); } } @media (max-width: 767px) { .index__decisions-content { padding: clamp(20px, 20px + 4 * (100vw - 375px) / 393, 24px); } } .index__decisions-top { display: flex; justify-content: end; } .index__decisions-button { display: none; background: #FFFFFF; color: #24282B; width: max-content; font-size: 0; line-height: 0; } .index__decisions-button { padding: 15.3782608696px 28.1934782609px; } @media (max-width: 1651px) { .index__decisions-button { padding: clamp(14.6054347826px, 14.6054347826px + 0.772826087 * (100vw - 1551px) / 100, 15.3782608696px) clamp(26.7766304348px, 26.7766304348px + 1.4168478261 * (100vw - 1551px) / 100, 28.1934782609px); } } @media (max-width: 1550px) { .index__decisions-button { padding: 11.7391304348px 21.5217391304px; } } @media (max-width: 1252px) { .index__decisions-button { padding: clamp(9.5184782609px, 9.5184782609px + 2.2206521739 * (100vw - 1025px) / 227, 11.7391304348px) clamp(17.4505434783px, 17.4505434783px + 4.0711956522 * (100vw - 1025px) / 227, 21.5217391304px); } } .index__decisions-button { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .index__decisions-button { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .index__decisions-button { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .index__decisions-button { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } .index__decisions-arrow { width: 20.5043478261px; } @media (max-width: 1651px) { .index__decisions-arrow { width: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .index__decisions-arrow { width: 15.652173913px; } } @media (max-width: 1252px) { .index__decisions-arrow { width: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } .index__decisions-arrow { height: 20.5043478261px; } @media (max-width: 1651px) { .index__decisions-arrow { height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .index__decisions-arrow { height: 15.652173913px; } } @media (max-width: 1252px) { .index__decisions-arrow { height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } .index__decisions-bottom { color: #FFFFFF; display: flex; flex-direction: column; } .index__decisions-bottom { gap: 10.252173913px; } @media (max-width: 1651px) { .index__decisions-bottom { gap: clamp(9.7369565217px, 9.7369565217px + 0.5152173913 * (100vw - 1551px) / 100, 10.252173913px); } } @media (max-width: 1550px) { .index__decisions-bottom { gap: 7.8260869565px; } } @media (max-width: 1252px) { .index__decisions-bottom { gap: clamp(6.3456521739px, 6.3456521739px + 1.4804347826 * (100vw - 1025px) / 227, 7.8260869565px); } } @media (max-width: 1024px) { .index__decisions-bottom { gap: clamp(8px, 8px + 4 * (100vw - 768px) / 256, 12px); } } .index__about { background: #F0F1F4; } .index__about { padding: 64.9304347826px 0px 68.347826087px; } @media (max-width: 1651px) { .index__about { padding: clamp(61.6673913043px, 61.6673913043px + 3.2630434783 * (100vw - 1551px) / 100, 64.9304347826px) clamp(0px, 0px + 0 * (100vw - 1551px) / 100, 0px) clamp(64.9130434783px, 64.9130434783px + 3.4347826087 * (100vw - 1551px) / 100, 68.347826087px); } } @media (max-width: 1550px) { .index__about { padding: 49.5652173913px 0px 52.1739130435px; } } @media (max-width: 1252px) { .index__about { padding: clamp(40.1891304348px, 40.1891304348px + 9.3760869565 * (100vw - 1025px) / 227, 49.5652173913px) clamp(0px, 0px + 0 * (100vw - 1025px) / 227, 0px) clamp(42.3043478261px, 42.3043478261px + 9.8695652174 * (100vw - 1025px) / 227, 52.1739130435px); } } @media (max-width: 1024px) { .index__about { padding: clamp(68px, 68px + 8 * (100vw - 768px) / 256, 76px) 0 80px; } } @media (max-width: 767px) { .index__about { padding: clamp(60px, 60px + 8 * (100vw - 375px) / 393, 68px) 0 clamp(60px, 60px + 20 * (100vw - 375px) / 393, 80px); } } .index__about-text { font-weight: 500; } .index__about-text { font-size: 15.3782608696px; } @media (max-width: 1651px) { .index__about-text { font-size: clamp(14.6054347826px, 14.6054347826px + 0.772826087 * (100vw - 1551px) / 100, 15.3782608696px); } } @media (max-width: 1550px) { .index__about-text { font-size: 11.7391304348px; } } @media (max-width: 1252px) { .index__about-text { font-size: clamp(9.5184782609px, 9.5184782609px + 2.2206521739 * (100vw - 1025px) / 227, 11.7391304348px); } } .index__about-text { line-height: 20.5043478261px; } @media (max-width: 1651px) { .index__about-text { line-height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .index__about-text { line-height: 15.652173913px; } } @media (max-width: 1252px) { .index__about-text { line-height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } @media (max-width: 1024px) { .index__about-text { font-size: clamp(14px, 14px + 4 * (100vw - 768px) / 256, 18px); line-height: clamp(20px, 20px + 4 * (100vw - 768px) / 256, 24px); } } .index__about-link { background: #007B82; color: #FFFFFF; width: max-content; font-weight: 500; } .index__about-link { padding: 13.6695652174px 20.5043478261px; } @media (max-width: 1651px) { .index__about-link { padding: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px) clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .index__about-link { padding: 10.4347826087px 15.652173913px; } } @media (max-width: 1252px) { .index__about-link { padding: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px) clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } .index__about-link { font-size: 13.6695652174px; } @media (max-width: 1651px) { .index__about-link { font-size: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .index__about-link { font-size: 10.4347826087px; } } @media (max-width: 1252px) { .index__about-link { font-size: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } .index__about-link { line-height: 20.5043478261px; } @media (max-width: 1651px) { .index__about-link { line-height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .index__about-link { line-height: 15.652173913px; } } @media (max-width: 1252px) { .index__about-link { line-height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } .index__about-link { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .index__about-link { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .index__about-link { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .index__about-link { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } @media (max-width: 1024px) { .index__about-link { padding: clamp(12px, 12px + 4 * (100vw - 768px) / 256, 16px) clamp(20px, 20px + 4 * (100vw - 768px) / 256, 24px); font-size: clamp(14px, 14px + 2 * (100vw - 768px) / 256, 16px); line-height: clamp(20px, 20px + 4 * (100vw - 768px) / 256, 24px); border-radius: 8px; } } @media (max-width: 767px) { .index__about-link { width: 100%; } } .index__about-link:hover { background: #33959B; } .index__about-banner { background: url(/res/images/aeed65a4a97c02754e4b.png) no-repeat bottom; background-size: cover; } .index__about-banner { margin-top: 59.8043478261px; } @media (max-width: 1651px) { .index__about-banner { margin-top: clamp(56.7989130435px, 56.7989130435px + 3.0054347826 * (100vw - 1551px) / 100, 59.8043478261px); } } @media (max-width: 1550px) { .index__about-banner { margin-top: 45.652173913px; } } @media (max-width: 1252px) { .index__about-banner { margin-top: clamp(37.0163043478px, 37.0163043478px + 8.6358695652 * (100vw - 1025px) / 227, 45.652173913px); } } .index__about-banner { padding-top: 59.8043478261px; } @media (max-width: 1651px) { .index__about-banner { padding-top: clamp(56.7989130435px, 56.7989130435px + 3.0054347826 * (100vw - 1551px) / 100, 59.8043478261px); } } @media (max-width: 1550px) { .index__about-banner { padding-top: 45.652173913px; } } @media (max-width: 1252px) { .index__about-banner { padding-top: clamp(37.0163043478px, 37.0163043478px + 8.6358695652 * (100vw - 1025px) / 227, 45.652173913px); } } .index__about-banner { padding-bottom: 59.8043478261px; } @media (max-width: 1651px) { .index__about-banner { padding-bottom: clamp(56.7989130435px, 56.7989130435px + 3.0054347826 * (100vw - 1551px) / 100, 59.8043478261px); } } @media (max-width: 1550px) { .index__about-banner { padding-bottom: 45.652173913px; } } @media (max-width: 1252px) { .index__about-banner { padding-bottom: clamp(37.0163043478px, 37.0163043478px + 8.6358695652 * (100vw - 1025px) / 227, 45.652173913px); } } .index__about-banner { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .index__about-banner { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .index__about-banner { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .index__about-banner { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } @media (max-width: 1024px) { .index__about-banner { background: url(/res/images/2a577910de2a80aadab8.png) no-repeat bottom; background-size: cover; margin-top: clamp(68px, 68px + 2 * (100vw - 768px) / 256, 70px); padding-top: clamp(60px, 60px + 10 * (100vw - 768px) / 256, 70px); padding-bottom: clamp(60px, 60px + 10 * (100vw - 768px) / 256, 70px); border-radius: 8px; } } @media (max-width: 767px) { .index__about-banner { background: url(/res/images/e750770b4c0f5ca56f56.png) no-repeat bottom; background-size: cover; margin-top: clamp(60px, 60px + 8 * (100vw - 375px) / 393, 68px); padding-top: clamp(48px, 48px + 12 * (100vw - 375px) / 393, 60px); padding-bottom: clamp(48px, 48px + 12 * (100vw - 375px) / 393, 60px); } } .index__about-banner-container { display: flex; justify-content: center; } .index__about-banner-container { margin-bottom: 51.2608695652px; } @media (max-width: 1651px) { .index__about-banner-container { margin-bottom: clamp(48.6847826087px, 48.6847826087px + 2.5760869565 * (100vw - 1551px) / 100, 51.2608695652px); } } @media (max-width: 1550px) { .index__about-banner-container { margin-bottom: 39.1304347826px; } } @media (max-width: 1252px) { .index__about-banner-container { margin-bottom: clamp(31.7282608696px, 31.7282608696px + 7.402173913 * (100vw - 1025px) / 227, 39.1304347826px); } } @media (max-width: 1024px) { .index__about-banner-container { margin-bottom: clamp(40px, 40px + 20 * (100vw - 768px) / 256, 60px); } } .index__about-banner-content { display: flex; flex-direction: column; align-items: center; color: #FFFFFF; text-align: center; } .index__about-banner-content { gap: 27.3391304348px; } @media (max-width: 1651px) { .index__about-banner-content { gap: clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px); } } @media (max-width: 1550px) { .index__about-banner-content { gap: 20.8695652174px; } } @media (max-width: 1252px) { .index__about-banner-content { gap: clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px); } } .index__about-banner-content { max-width: 451.0956521739px; } @media (max-width: 1651px) { .index__about-banner-content { max-width: clamp(428.4260869565px, 428.4260869565px + 22.6695652174 * (100vw - 1551px) / 100, 451.0956521739px); } } @media (max-width: 1550px) { .index__about-banner-content { max-width: 344.347826087px; } } @media (max-width: 1252px) { .index__about-banner-content { max-width: clamp(279.2086956522px, 279.2086956522px + 65.1391304348 * (100vw - 1025px) / 227, 344.347826087px); } } @media (max-width: 1024px) { .index__about-banner-content { gap: clamp(24px, 24px + 8 * (100vw - 768px) / 256, 32px); max-width: clamp(363px, 363px + 165 * (100vw - 768px) / 256, 528px); } } @media (max-width: 767px) { .index__about-banner-content { gap: clamp(20px, 20px + 4 * (100vw - 375px) / 393, 24px); max-width: clamp(286px, 286px + 77 * (100vw - 375px) / 393, 363px); } } .index__about-banner-top { display: flex; flex-direction: column; align-items: center; } .index__about-banner-top { gap: 13.6695652174px; } @media (max-width: 1651px) { .index__about-banner-top { gap: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .index__about-banner-top { gap: 10.4347826087px; } } @media (max-width: 1252px) { .index__about-banner-top { gap: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } @media (max-width: 1024px) { .index__about-banner-top { gap: 16px; } } @media (max-width: 767px) { .index__about-banner-top { gap: clamp(12px, 12px + 4 * (100vw - 375px) / 393, 16px); } } .index__about-banner-title { font-size: 41.0086956522px; } @media (max-width: 1651px) { .index__about-banner-title { font-size: clamp(38.947826087px, 38.947826087px + 2.0608695652 * (100vw - 1551px) / 100, 41.0086956522px); } } @media (max-width: 1550px) { .index__about-banner-title { font-size: 31.3043478261px; } } @media (max-width: 1252px) { .index__about-banner-title { font-size: clamp(25.3826086957px, 25.3826086957px + 5.9217391304 * (100vw - 1025px) / 227, 31.3043478261px); } } .index__about-banner-title { line-height: 41.0086956522px; } @media (max-width: 1651px) { .index__about-banner-title { line-height: clamp(38.947826087px, 38.947826087px + 2.0608695652 * (100vw - 1551px) / 100, 41.0086956522px); } } @media (max-width: 1550px) { .index__about-banner-title { line-height: 31.3043478261px; } } @media (max-width: 1252px) { .index__about-banner-title { line-height: clamp(25.3826086957px, 25.3826086957px + 5.9217391304 * (100vw - 1025px) / 227, 31.3043478261px); } } @media (max-width: 1024px) { .index__about-banner-title { font-size: clamp(36px, 36px + 12 * (100vw - 768px) / 256, 48px); line-height: clamp(36px, 36px + 12 * (100vw - 768px) / 256, 48px); } } @media (max-width: 767px) { .index__about-banner-title { font-size: clamp(32px, 32px + 4 * (100vw - 375px) / 393, 36px); line-height: clamp(32px, 32px + 4 * (100vw - 375px) / 393, 36px); } } /*!************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./node_modules/swiper/swiper.scss ***! \************************************************************************************************************************************************************************************************/ /** * Swiper 11.2.4 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2025 Vladimir Kharlampidi * * Released under the MIT License * * Released on: February 14, 2025 */ @font-face { font-family: "swiper-icons"; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #007aff; /* --swiper-preloader-color: var(--swiper-theme-color); --swiper-wrapper-transition-timing-function: initial; */ } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden; } /* 3D Effects */ .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d; } /* CSS Mode */ .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } .swiper-css-mode.swiper-centered > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } /* Slide styles start */ /* 3D Shadows */ .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Slide styles end */ /*!********************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./www/local/components/blocks/banners/templates/slider/style.scss ***! \********************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /** * Размер в дизайне указан, если у страницы маленькие отступы по бокам, цель функции пересчитать размеры, в случае, если * мы увеличиваем отступы, но хотим чтобы визуально страница осталась такой же, то есть уменьшаем размер пропорционально * уменьшению ширины контентной области * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @param {number} $oldContent - Изначальная ширина контентной области в пикселях (без указания px) * @param {number} $newContent - Измененная ширина контентной области в пикселях (без указания px) * @return {number} - Измененный размер в пикселях (без указания px) */ /** * Функция возвращает адаптивные размеры в заданном диапазоне, при пороге в $widthMaxSize и больше, размер будет * $maxSize, в диапазоне между $widthMinSize и $widthMaxSize, размер будет пропорционально уменьшаться/увеличиваться, * при достижении порога в $widthMinSize и меньше размер будет $minSize * * @param {number} $widthMinSize - Минимальная ширина экрана в пикселях (без указания px) * @param {number} $widthMaxSize - Максимальная ширина экрана в пикселях (без указания px) * @param {number} $minSize - Размер, который указан для минимальной ширины экрана в пикселях (без указания px) * @param {number} $maxSize - Размер, который указан для максимальной ширины экрана в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета размеров десктопной верстки больших экранов (от 1652px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {px} - Измененный размер */ /** * Функция для пересчета размеров десктопной верстки менее больших экранов (от 1551px до 1651px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета размеров десктопной верстки средних экранов (до 1550px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {px} - Измененный размер */ /** * Функция для пересчета размеров десктопной верстки маленьких экранов (от 1025px до 1252px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета адаптивных размеров в диапазоне планшетной верстки (от 768px до 1024px) * * @param {number} $minSize - Минимальный размер в пикселях (без указания px) * @param {number} $maxSize - Максимальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета адаптивных размеров в диапазоне мобильной верстки (от 375px до 768px) * * @param {number} $minSize - Минимальный размер в пикселях (без указания px) * @param {number} $maxSize - Максимальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * MIXINS: для каждого свойства десктопной верстки * * @param {number} ...$size - Размеры в пикселях (без указания px) * @return {property: px} */ .banner-slider { position: relative; } .banner-slider { height: 512.6086956522px; } @media (max-width: 1651px) { .banner-slider { height: clamp(486.847826087px, 486.847826087px + 25.7608695652 * (100vw - 1551px) / 100, 512.6086956522px); } } @media (max-width: 1550px) { .banner-slider { height: 391.3043478261px; } } @media (max-width: 1252px) { .banner-slider { height: clamp(317.2826086957px, 317.2826086957px + 74.0217391304 * (100vw - 1025px) / 227, 391.3043478261px); } } .banner-slider { padding-top: 20.5043478261px !important; } @media (max-width: 1651px) { .banner-slider { padding-top: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px) !important; } } @media (max-width: 1550px) { .banner-slider { padding-top: 15.652173913px !important; } } @media (max-width: 1252px) { .banner-slider { padding-top: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px) !important; } } .banner-slider { margin-bottom: 17.0869565217px; } @media (max-width: 1651px) { .banner-slider { margin-bottom: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .banner-slider { margin-bottom: 13.0434782609px; } } @media (max-width: 1252px) { .banner-slider { margin-bottom: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } @media (max-width: 1024px) { .banner-slider { aspect-ratio: 768/560; padding-top: 0 !important; height: unset; margin-bottom: clamp(16px, 16px + 4 * (100vw - 768px) / 256, 20px); } } @media (max-width: 767px) { .banner-slider { aspect-ratio: 375/565; margin-bottom: clamp(12px, 12px + 4 * (100vw - 375px) / 393, 16px); } } .banner-slider__slide { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .banner-slider__slide { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .banner-slider__slide { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .banner-slider__slide { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } @media (max-width: 1024px) { .banner-slider__slide { border-radius: 0; } } .banner-slider__content { height: inherit; border-radius: inherit; } .banner-slider__content { padding-left: 68.347826087px; } @media (max-width: 1651px) { .banner-slider__content { padding-left: clamp(64.9130434783px, 64.9130434783px + 3.4347826087 * (100vw - 1551px) / 100, 68.347826087px); } } @media (max-width: 1550px) { .banner-slider__content { padding-left: 52.1739130435px; } } @media (max-width: 1252px) { .banner-slider__content { padding-left: clamp(42.3043478261px, 42.3043478261px + 9.8695652174 * (100vw - 1025px) / 227, 52.1739130435px); } } @media (max-width: 1024px) { .banner-slider__content { padding-left: clamp(40px, 40px + 40 * (100vw - 768px) / 256, 80px); } } @media (max-width: 767px) { .banner-slider__content { padding-left: clamp(12px, 12px + 28 * (100vw - 375px) / 393, 40px); } } .banner-slider__picture { height: inherit; border-radius: inherit; } .banner-slider__image { height: inherit; border-radius: inherit; width: 100%; object-fit: cover; object-position: right bottom; } .banner-slider__image-block { bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: -1; border-radius: inherit; } .banner-slider__data { height: inherit; color: #FFFFFF; display: flex; flex-direction: column; justify-content: center; } .banner-slider__data { gap: 27.3391304348px; } @media (max-width: 1651px) { .banner-slider__data { gap: clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px); } } @media (max-width: 1550px) { .banner-slider__data { gap: 20.8695652174px; } } @media (max-width: 1252px) { .banner-slider__data { gap: clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px); } } .banner-slider__data { max-width: 510.9px; } @media (max-width: 1651px) { .banner-slider__data { max-width: clamp(485.225px, 485.225px + 25.675 * (100vw - 1551px) / 100, 510.9px); } } @media (max-width: 1550px) { .banner-slider__data { max-width: 390px; } } @media (max-width: 1252px) { .banner-slider__data { max-width: clamp(316.225px, 316.225px + 73.775 * (100vw - 1025px) / 227, 390px); } } @media (max-width: 1024px) { .banner-slider__data { gap: clamp(16px, 16px + 16 * (100vw - 768px) / 256, 32px); max-width: clamp(387px, 387px + 211 * (100vw - 768px) / 256, 598px); } } @media (max-width: 767px) { .banner-slider__data { gap: clamp(20px, 20px + -4 * (100vw - 375px) / 393, 16px); max-width: clamp(288px, 288px + 99 * (100vw - 375px) / 393, 387px); } } .banner-slider__top { display: flex; flex-direction: column; } .banner-slider__top { gap: 17.0869565217px; } @media (max-width: 1651px) { .banner-slider__top { gap: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .banner-slider__top { gap: 13.0434782609px; } } @media (max-width: 1252px) { .banner-slider__top { gap: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } @media (max-width: 1024px) { .banner-slider__top { gap: clamp(16px, 16px + 4 * (100vw - 768px) / 256, 20px); } } @media (max-width: 767px) { .banner-slider__top { gap: clamp(12px, 12px + 4 * (100vw - 375px) / 393, 16px); } } .banner-slider__logo { width: 510.9px; } @media (max-width: 1651px) { .banner-slider__logo { width: clamp(485.225px, 485.225px + 25.675 * (100vw - 1551px) / 100, 510.9px); } } @media (max-width: 1550px) { .banner-slider__logo { width: 390px; } } @media (max-width: 1252px) { .banner-slider__logo { width: clamp(316.225px, 316.225px + 73.775 * (100vw - 1025px) / 227, 390px); } } .banner-slider__logo { height: 51.2608695652px; } @media (max-width: 1651px) { .banner-slider__logo { height: clamp(48.6847826087px, 48.6847826087px + 2.5760869565 * (100vw - 1551px) / 100, 51.2608695652px); } } @media (max-width: 1550px) { .banner-slider__logo { height: 39.1304347826px; } } @media (max-width: 1252px) { .banner-slider__logo { height: clamp(31.7282608696px, 31.7282608696px + 7.402173913 * (100vw - 1025px) / 227, 39.1304347826px); } } @media (max-width: 1024px) { .banner-slider__logo { width: clamp(308px, 308px + 290 * (100vw - 768px) / 256, 598px); height: clamp(31px, 31px + 29 * (100vw - 768px) / 256, 60px); } } @media (max-width: 767px) { .banner-slider__logo { width: clamp(222px, 222px + 86 * (100vw - 375px) / 393, 308px); height: clamp(22px, 22px + 9 * (100vw - 375px) / 393, 31px); } } .banner-slider__text { font-size: 23.9217391304px; } @media (max-width: 1651px) { .banner-slider__text { font-size: clamp(22.7195652174px, 22.7195652174px + 1.202173913 * (100vw - 1551px) / 100, 23.9217391304px); } } @media (max-width: 1550px) { .banner-slider__text { font-size: 18.2608695652px; } } @media (max-width: 1252px) { .banner-slider__text { font-size: clamp(14.8065217391px, 14.8065217391px + 3.4543478261 * (100vw - 1025px) / 227, 18.2608695652px); } } .banner-slider__text { line-height: 27.3391304348px; } @media (max-width: 1651px) { .banner-slider__text { line-height: clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px); } } @media (max-width: 1550px) { .banner-slider__text { line-height: 20.8695652174px; } } @media (max-width: 1252px) { .banner-slider__text { line-height: clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px); } } @media (max-width: 1024px) { .banner-slider__text { max-width: 272px; font-size: clamp(18px, 18px + 10 * (100vw - 768px) / 256, 28px); line-height: clamp(24px, 24px + 8 * (100vw - 768px) / 256, 32px); } } @media (max-width: 767px) { .banner-slider__text { max-width: unset; line-height: clamp(22px, 22px + 2 * (100vw - 375px) / 393, 24px); } } .banner-slider__buttons { display: flex; align-items: center; } .banner-slider__buttons { gap: 13.6695652174px; } @media (max-width: 1651px) { .banner-slider__buttons { gap: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .banner-slider__buttons { gap: 10.4347826087px; } } @media (max-width: 1252px) { .banner-slider__buttons { gap: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } @media (max-width: 1024px) { .banner-slider__buttons { gap: clamp(8px, 8px + 8 * (100vw - 768px) / 256, 16px); } } @media (max-width: 767px) { .banner-slider__buttons { align-items: unset; flex-direction: column; } } .banner-slider__link { width: max-content; font-weight: 500; text-align: center; box-sizing: border-box; } .banner-slider__link { padding: 13.6695652174px 20.5043478261px; } @media (max-width: 1651px) { .banner-slider__link { padding: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px) clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .banner-slider__link { padding: 10.4347826087px 15.652173913px; } } @media (max-width: 1252px) { .banner-slider__link { padding: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px) clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } .banner-slider__link { border: 1.7086956522px solid #FFFFFF; } @media (max-width: 1651px) { .banner-slider__link { border: clamp(1.622826087px, 1.622826087px + 0.0858695652 * (100vw - 1551px) / 100, 1.7086956522px) solid #FFFFFF; } } @media (max-width: 1550px) { .banner-slider__link { border: 1.3043478261px solid #FFFFFF; } } @media (max-width: 1252px) { .banner-slider__link { border: clamp(1.0576086957px, 1.0576086957px + 0.2467391304 * (100vw - 1025px) / 227, 1.3043478261px) solid #FFFFFF; } } .banner-slider__link { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .banner-slider__link { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .banner-slider__link { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .banner-slider__link { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } .banner-slider__link { font-size: 13.6695652174px; } @media (max-width: 1651px) { .banner-slider__link { font-size: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .banner-slider__link { font-size: 10.4347826087px; } } @media (max-width: 1252px) { .banner-slider__link { font-size: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } .banner-slider__link { line-height: 20.5043478261px; } @media (max-width: 1651px) { .banner-slider__link { line-height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .banner-slider__link { line-height: 15.652173913px; } } @media (max-width: 1252px) { .banner-slider__link { line-height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } .banner-slider__link { min-width: 187.9565217391px; } @media (max-width: 1651px) { .banner-slider__link { min-width: clamp(178.5108695652px, 178.5108695652px + 9.4456521739 * (100vw - 1551px) / 100, 187.9565217391px); } } @media (max-width: 1550px) { .banner-slider__link { min-width: 143.4782608696px; } } @media (max-width: 1252px) { .banner-slider__link { min-width: clamp(116.3369565217px, 116.3369565217px + 27.1413043478 * (100vw - 1025px) / 227, 143.4782608696px); } } @media (max-width: 1024px) { .banner-slider__link { font-size: clamp(14px, 14px + 2 * (100vw - 768px) / 256, 16px); line-height: clamp(20px, 20px + 4 * (100vw - 768px) / 256, 24px); border: 2px solid #FFFFFF; border-radius: 8px; padding: 16px 24px; min-width: clamp(200px, 200px + 20 * (100vw - 768px) / 256, 220px); } } @media (max-width: 767px) { .banner-slider__link { font-size: clamp(12px, 12px + 2 * (100vw - 375px) / 393, 14px); line-height: clamp(18px, 18px + 2 * (100vw - 375px) / 393, 20px); padding: clamp(15px, 15px + 1 * (100vw - 375px) / 393, 16px) clamp(16px, 16px + 8 * (100vw - 375px) / 393, 24px); min-width: clamp(163px, 163px + 37 * (100vw - 375px) / 393, 200px); } } .banner-slider__link:hover { background: #FFFFFF; color: #007B82; } .banner-slider__link--lagoon { background: #007B82; color: #FFFFFF; border-color: #007B82; } .banner-slider__link--lagoon:hover { background: #33959B; border-color: #33959B; color: #FFFFFF; } .banner-slider__switches { display: flex; align-items: center; position: absolute; bottom: 0; right: 0; } .banner-slider__switches { gap: 6.8347826087px; } @media (max-width: 1651px) { .banner-slider__switches { gap: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .banner-slider__switches { gap: 5.2173913043px; } } @media (max-width: 1252px) { .banner-slider__switches { gap: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } .banner-slider__switches { margin-right: 27.3391304348px; } @media (max-width: 1651px) { .banner-slider__switches { margin-right: clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px); } } @media (max-width: 1550px) { .banner-slider__switches { margin-right: 20.8695652174px; } } @media (max-width: 1252px) { .banner-slider__switches { margin-right: clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px); } } .banner-slider__switches { margin-bottom: 27.3391304348px; } @media (max-width: 1651px) { .banner-slider__switches { margin-bottom: clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px); } } @media (max-width: 1550px) { .banner-slider__switches { margin-bottom: 20.8695652174px; } } @media (max-width: 1252px) { .banner-slider__switches { margin-bottom: clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px); } } @media (max-width: 1024px) { .banner-slider__switches { gap: 8px; margin-right: clamp(20px, 20px + 12 * (100vw - 768px) / 256, 32px); margin-bottom: clamp(20px, 20px + 12 * (100vw - 768px) / 256, 32px); } } @media (max-width: 767px) { .banner-slider__switches { display: none; } } .banner-slider__arrow { position: unset !important; background: #FFFFFF; width: max-content !important; height: max-content !important; } .banner-slider__arrow { padding: 13.6695652174px 26.4847826087px; } @media (max-width: 1651px) { .banner-slider__arrow { padding: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px) clamp(25.1538043478px, 25.1538043478px + 1.3309782609 * (100vw - 1551px) / 100, 26.4847826087px); } } @media (max-width: 1550px) { .banner-slider__arrow { padding: 10.4347826087px 20.2173913043px; } } @media (max-width: 1252px) { .banner-slider__arrow { padding: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px) clamp(16.3929347826px, 16.3929347826px + 3.8244565217 * (100vw - 1025px) / 227, 20.2173913043px); } } .banner-slider__arrow { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .banner-slider__arrow { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .banner-slider__arrow { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .banner-slider__arrow { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } @media (max-width: 1024px) { .banner-slider__arrow { padding: clamp(10px, 10px + 6 * (100vw - 768px) / 256, 16px) clamp(18px, 18px + 13 * (100vw - 768px) / 256, 31px); border-radius: 8px; } } .banner-slider__arrow:hover .banner-slider__arrow-icon { color: #007B82; } .banner-slider__arrow-icon { color: #24282B; } .banner-slider__arrow-icon { width: 23.9217391304px !important; } @media (max-width: 1651px) { .banner-slider__arrow-icon { width: clamp(22.7195652174px, 22.7195652174px + 1.202173913 * (100vw - 1551px) / 100, 23.9217391304px) !important; } } @media (max-width: 1550px) { .banner-slider__arrow-icon { width: 18.2608695652px !important; } } @media (max-width: 1252px) { .banner-slider__arrow-icon { width: clamp(14.8065217391px, 14.8065217391px + 3.4543478261 * (100vw - 1025px) / 227, 18.2608695652px) !important; } } .banner-slider__arrow-icon { height: 23.9217391304px !important; } @media (max-width: 1651px) { .banner-slider__arrow-icon { height: clamp(22.7195652174px, 22.7195652174px + 1.202173913 * (100vw - 1551px) / 100, 23.9217391304px) !important; } } @media (max-width: 1550px) { .banner-slider__arrow-icon { height: 18.2608695652px !important; } } @media (max-width: 1252px) { .banner-slider__arrow-icon { height: clamp(14.8065217391px, 14.8065217391px + 3.4543478261 * (100vw - 1025px) / 227, 18.2608695652px) !important; } } @media (max-width: 1024px) { .banner-slider__arrow-icon { width: clamp(20px, 20px + 8 * (100vw - 768px) / 256, 28px) !important; height: clamp(20px, 20px + 8 * (100vw - 768px) / 256, 28px) !important; } } .banner-slider__arrow-icon--left { rotate: 90deg; } .banner-slider__arrow-icon--right { rotate: -90deg; } .banner-slider .swiper-button-prev:after, .banner-slider .swiper-button-next:after { content: none; } .banner-slider .swiper-pagination { bottom: 0 !important; } .banner-slider .swiper-pagination { margin-bottom: 27.3391304348px; } @media (max-width: 1651px) { .banner-slider .swiper-pagination { margin-bottom: clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px); } } @media (max-width: 1550px) { .banner-slider .swiper-pagination { margin-bottom: 20.8695652174px; } } @media (max-width: 1252px) { .banner-slider .swiper-pagination { margin-bottom: clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px); } } @media (max-width: 1024px) { .banner-slider .swiper-pagination { margin-bottom: clamp(20px, 20px + 12 * (100vw - 768px) / 256, 32px); } } @media (max-width: 767px) { .banner-slider .swiper-pagination { bottom: unset !important; top: 0 !important; margin-top: 12px; margin-left: 12px; text-align: start !important; } } .banner-slider .swiper-pagination-bullet { background: #FFFFFF !important; opacity: 60% !important; } .banner-slider .swiper-pagination-bullet { width: 6.8347826087px !important; } @media (max-width: 1651px) { .banner-slider .swiper-pagination-bullet { width: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px) !important; } } @media (max-width: 1550px) { .banner-slider .swiper-pagination-bullet { width: 5.2173913043px !important; } } @media (max-width: 1252px) { .banner-slider .swiper-pagination-bullet { width: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px) !important; } } .banner-slider .swiper-pagination-bullet { height: 6.8347826087px !important; } @media (max-width: 1651px) { .banner-slider .swiper-pagination-bullet { height: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px) !important; } } @media (max-width: 1550px) { .banner-slider .swiper-pagination-bullet { height: 5.2173913043px !important; } } @media (max-width: 1252px) { .banner-slider .swiper-pagination-bullet { height: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px) !important; } } @media (max-width: 1024px) { .banner-slider .swiper-pagination-bullet { width: 8px !important; height: 8px !important; } } .banner-slider .swiper-pagination-bullet-active { opacity: 100% !important; } .banner-slider__title { font-weight: 500; } .banner-slider__title { font-size: 41.0086956522px; } @media (max-width: 1651px) { .banner-slider__title { font-size: clamp(38.947826087px, 38.947826087px + 2.0608695652 * (100vw - 1551px) / 100, 41.0086956522px); } } @media (max-width: 1550px) { .banner-slider__title { font-size: 31.3043478261px; } } @media (max-width: 1252px) { .banner-slider__title { font-size: clamp(25.3826086957px, 25.3826086957px + 5.9217391304 * (100vw - 1025px) / 227, 31.3043478261px); } } @media (max-width: 1024px) { .banner-slider__title { font-size: clamp(36px, 36px + 12 * (100vw - 768px) / 256, 48px); } } @media (max-width: 767px) { .banner-slider__title { font-size: clamp(32px, 32px + 4 * (100vw - 375px) / 393, 36px); } } /*!************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./node_modules/swiper/modules/navigation.scss ***! \************************************************************************************************************************************************************************************************************/ :root { --swiper-navigation-size: 44px; /* --swiper-navigation-top-offset: 50%; --swiper-navigation-sides-offset: 10px; --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: var(--swiper-navigation-top-offset, 50%); width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev.swiper-button-hidden, .swiper-button-next.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-next { display: none !important; } .swiper-button-prev svg, .swiper-button-next svg { width: 100%; height: 100%; object-fit: contain; transform-origin: center; } .swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg { transform: rotate(180deg); } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: var(--swiper-navigation-sides-offset, 10px); right: auto; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-lock { display: none; } /* Navigation font start */ .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-feature-settings: ; font-variant: initial; line-height: 1; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "next"; } /* Navigation font end */ /*!************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./node_modules/swiper/modules/pagination.scss ***! \************************************************************************************************************************************************************************************************************/ :root { /* --swiper-pagination-color: var(--swiper-theme-color); --swiper-pagination-left: auto; --swiper-pagination-right: 8px; --swiper-pagination-bottom: 8px; --swiper-pagination-top: auto; --swiper-pagination-fraction-color: inherit; --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25); --swiper-pagination-progressbar-size: 4px; --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-width: 8px; --swiper-pagination-bullet-height: 8px; --swiper-pagination-bullet-border-radius: 50%; --swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-opacity: 0.2; --swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-horizontal-gap: 4px; --swiper-pagination-bullet-vertical-gap: 6px; */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-vertical > .swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Fraction */ .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit); } /* Progress */ .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0; } .swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } /*!********************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./www/local/components/blocks/brand/templates/.default/style.scss ***! \********************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /** * Размер в дизайне указан, если у страницы маленькие отступы по бокам, цель функции пересчитать размеры, в случае, если * мы увеличиваем отступы, но хотим чтобы визуально страница осталась такой же, то есть уменьшаем размер пропорционально * уменьшению ширины контентной области * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @param {number} $oldContent - Изначальная ширина контентной области в пикселях (без указания px) * @param {number} $newContent - Измененная ширина контентной области в пикселях (без указания px) * @return {number} - Измененный размер в пикселях (без указания px) */ /** * Функция возвращает адаптивные размеры в заданном диапазоне, при пороге в $widthMaxSize и больше, размер будет * $maxSize, в диапазоне между $widthMinSize и $widthMaxSize, размер будет пропорционально уменьшаться/увеличиваться, * при достижении порога в $widthMinSize и меньше размер будет $minSize * * @param {number} $widthMinSize - Минимальная ширина экрана в пикселях (без указания px) * @param {number} $widthMaxSize - Максимальная ширина экрана в пикселях (без указания px) * @param {number} $minSize - Размер, который указан для минимальной ширины экрана в пикселях (без указания px) * @param {number} $maxSize - Размер, который указан для максимальной ширины экрана в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета размеров десктопной верстки больших экранов (от 1652px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {px} - Измененный размер */ /** * Функция для пересчета размеров десктопной верстки менее больших экранов (от 1551px до 1651px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета размеров десктопной верстки средних экранов (до 1550px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {px} - Измененный размер */ /** * Функция для пересчета размеров десктопной верстки маленьких экранов (от 1025px до 1252px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета адаптивных размеров в диапазоне планшетной верстки (от 768px до 1024px) * * @param {number} $minSize - Минимальный размер в пикселях (без указания px) * @param {number} $maxSize - Максимальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета адаптивных размеров в диапазоне мобильной верстки (от 375px до 768px) * * @param {number} $minSize - Минимальный размер в пикселях (без указания px) * @param {number} $maxSize - Максимальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * MIXINS: для каждого свойства десктопной верстки * * @param {number} ...$size - Размеры в пикселях (без указания px) * @return {property: px} */ .brand-information { display: flex; justify-content: space-between; align-items: center; } .brand-information { gap: 149.5108695652px; } @media (max-width: 1651px) { .brand-information { gap: clamp(141.9972826087px, 141.9972826087px + 7.5135869565 * (100vw - 1551px) / 100, 149.5108695652px); } } @media (max-width: 1550px) { .brand-information { gap: 114.1304347826px; } } @media (max-width: 1252px) { .brand-information { gap: clamp(92.5407608696px, 92.5407608696px + 21.589673913 * (100vw - 1025px) / 227, 114.1304347826px); } } @media (max-width: 1024px) { .brand-information { display: block; } } .brand-information__left { display: flex; flex-direction: column; } .brand-information__left { gap: 13.6695652174px; } @media (max-width: 1651px) { .brand-information__left { gap: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .brand-information__left { gap: 10.4347826087px; } } @media (max-width: 1252px) { .brand-information__left { gap: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } .brand-information__left { max-width: 512.6086956522px; } @media (max-width: 1651px) { .brand-information__left { max-width: clamp(486.847826087px, 486.847826087px + 25.7608695652 * (100vw - 1551px) / 100, 512.6086956522px); } } @media (max-width: 1550px) { .brand-information__left { max-width: 391.3043478261px; } } @media (max-width: 1252px) { .brand-information__left { max-width: clamp(317.2826086957px, 317.2826086957px + 74.0217391304 * (100vw - 1025px) / 227, 391.3043478261px); } } @media (max-width: 1024px) { .brand-information__left { margin-bottom: 32px; gap: 16px; max-width: unset; } } @media (max-width: 767px) { .brand-information__left { margin-bottom: clamp(28px, 28px + 4 * (100vw - 375px) / 393, 32px); gap: clamp(12px, 12px + 4 * (100vw - 375px) / 393, 16px); } } .brand-information__title { display: flex; flex-wrap: wrap; } .brand-information__title { font-size: 39.3px; } @media (max-width: 1651px) { .brand-information__title { font-size: clamp(37.325px, 37.325px + 1.975 * (100vw - 1551px) / 100, 39.3px); } } @media (max-width: 1550px) { .brand-information__title { font-size: 30px; } } @media (max-width: 1252px) { .brand-information__title { font-size: clamp(24.325px, 24.325px + 5.675 * (100vw - 1025px) / 227, 30px); } } .brand-information__title { gap: 8.5434782609px; } @media (max-width: 1651px) { .brand-information__title { gap: clamp(8.1141304348px, 8.1141304348px + 0.4293478261 * (100vw - 1551px) / 100, 8.5434782609px); } } @media (max-width: 1550px) { .brand-information__title { gap: 6.5217391304px; } } @media (max-width: 1252px) { .brand-information__title { gap: clamp(5.2880434783px, 5.2880434783px + 1.2336956522 * (100vw - 1025px) / 227, 6.5217391304px); } } @media (max-width: 1024px) { .brand-information__title { font-size: clamp(36px, 36px + 10 * (100vw - 768px) / 256, 46px); gap: 10px; } } @media (max-width: 767px) { .brand-information__title { font-size: clamp(32px, 32px + 4 * (100vw - 375px) / 393, 36px); } } .brand-information__title h1, .brand-information__title h2 { font-size: inherit; } .brand-information__block { display: flex; flex-direction: column; } .brand-information__block { gap: 27.3391304348px; } @media (max-width: 1651px) { .brand-information__block { gap: clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px); } } @media (max-width: 1550px) { .brand-information__block { gap: 20.8695652174px; } } @media (max-width: 1252px) { .brand-information__block { gap: clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px); } } @media (max-width: 1024px) { .brand-information__block { gap: clamp(24px, 24px + 8 * (100vw - 768px) / 256, 32px); } } @media (max-width: 767px) { .brand-information__block { gap: clamp(20px, 20px + 4 * (100vw - 375px) / 393, 24px); } } .brand-information__block-text { display: flex; flex-direction: column; } .brand-information__block-text { gap: 10.252173913px; } @media (max-width: 1651px) { .brand-information__block-text { gap: clamp(9.7369565217px, 9.7369565217px + 0.5152173913 * (100vw - 1551px) / 100, 10.252173913px); } } @media (max-width: 1550px) { .brand-information__block-text { gap: 7.8260869565px; } } @media (max-width: 1252px) { .brand-information__block-text { gap: clamp(6.3456521739px, 6.3456521739px + 1.4804347826 * (100vw - 1025px) / 227, 7.8260869565px); } } .brand-information__block-text { font-size: 15.3782608696px; } @media (max-width: 1651px) { .brand-information__block-text { font-size: clamp(14.6054347826px, 14.6054347826px + 0.772826087 * (100vw - 1551px) / 100, 15.3782608696px); } } @media (max-width: 1550px) { .brand-information__block-text { font-size: 11.7391304348px; } } @media (max-width: 1252px) { .brand-information__block-text { font-size: clamp(9.5184782609px, 9.5184782609px + 2.2206521739 * (100vw - 1025px) / 227, 11.7391304348px); } } .brand-information__block-text { line-height: 20.5043478261px; } @media (max-width: 1651px) { .brand-information__block-text { line-height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .brand-information__block-text { line-height: 15.652173913px; } } @media (max-width: 1252px) { .brand-information__block-text { line-height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } @media (max-width: 1024px) { .brand-information__block-text { gap: 12px; font-size: clamp(14px, 14px + 4 * (100vw - 768px) / 256, 18px); line-height: clamp(20px, 20px + 4 * (100vw - 768px) / 256, 24px); } } .brand-information__link { font-weight: 500; background: #007B82; color: #FFFFFF; display: flex; width: max-content; } .brand-information__link { font-size: 13.6695652174px; } @media (max-width: 1651px) { .brand-information__link { font-size: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .brand-information__link { font-size: 10.4347826087px; } } @media (max-width: 1252px) { .brand-information__link { font-size: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } .brand-information__link { line-height: 20.5043478261px; } @media (max-width: 1651px) { .brand-information__link { line-height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .brand-information__link { line-height: 15.652173913px; } } @media (max-width: 1252px) { .brand-information__link { line-height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } .brand-information__link { padding: 13.6695652174px 20.5043478261px; } @media (max-width: 1651px) { .brand-information__link { padding: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px) clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .brand-information__link { padding: 10.4347826087px 15.652173913px; } } @media (max-width: 1252px) { .brand-information__link { padding: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px) clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } .brand-information__link { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .brand-information__link { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .brand-information__link { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .brand-information__link { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } @media (max-width: 1024px) { .brand-information__link { font-size: clamp(14px, 14px + 2 * (100vw - 768px) / 256, 16px); line-height: clamp(20px, 20px + 4 * (100vw - 768px) / 256, 24px); padding: clamp(12px, 12px + 4 * (100vw - 768px) / 256, 16px) clamp(20px, 20px + 4 * (100vw - 768px) / 256, 24px); border-radius: 8px; } } .brand-information__link:hover { background: #33959B; } .brand-information__wrapper { display: grid !important; grid-template-columns: 1fr 1fr 1fr; } .brand-information__wrapper { column-gap: 17.0869565217px; } @media (max-width: 1651px) { .brand-information__wrapper { column-gap: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .brand-information__wrapper { column-gap: 13.0434782609px; } } @media (max-width: 1252px) { .brand-information__wrapper { column-gap: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } @media (max-width: 1024px) { .brand-information__wrapper { display: flex !important; gap: unset; } } .brand-information__slide { display: flex !important; width: unset !important; height: unset !important; box-sizing: border-box; } @media (max-width: 1024px) { .brand-information__slide { margin-right: 16px; max-width: 336px; } } @media (max-width: 767px) { .brand-information__slide { margin-right: clamp(8px, 8px + 8 * (100vw - 375px) / 393, 16px); } } .brand-information__slide:nth-last-child(2) { margin-right: 0; } /*!****************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./www/local/templates/main/ui/components/advantage/style.scss ***! \****************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /** * Размер в дизайне указан, если у страницы маленькие отступы по бокам, цель функции пересчитать размеры, в случае, если * мы увеличиваем отступы, но хотим чтобы визуально страница осталась такой же, то есть уменьшаем размер пропорционально * уменьшению ширины контентной области * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @param {number} $oldContent - Изначальная ширина контентной области в пикселях (без указания px) * @param {number} $newContent - Измененная ширина контентной области в пикселях (без указания px) * @return {number} - Измененный размер в пикселях (без указания px) */ /** * Функция возвращает адаптивные размеры в заданном диапазоне, при пороге в $widthMaxSize и больше, размер будет * $maxSize, в диапазоне между $widthMinSize и $widthMaxSize, размер будет пропорционально уменьшаться/увеличиваться, * при достижении порога в $widthMinSize и меньше размер будет $minSize * * @param {number} $widthMinSize - Минимальная ширина экрана в пикселях (без указания px) * @param {number} $widthMaxSize - Максимальная ширина экрана в пикселях (без указания px) * @param {number} $minSize - Размер, который указан для минимальной ширины экрана в пикселях (без указания px) * @param {number} $maxSize - Размер, который указан для максимальной ширины экрана в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета размеров десктопной верстки больших экранов (от 1652px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {px} - Измененный размер */ /** * Функция для пересчета размеров десктопной верстки менее больших экранов (от 1551px до 1651px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета размеров десктопной верстки средних экранов (до 1550px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {px} - Измененный размер */ /** * Функция для пересчета размеров десктопной верстки маленьких экранов (от 1025px до 1252px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета адаптивных размеров в диапазоне планшетной верстки (от 768px до 1024px) * * @param {number} $minSize - Минимальный размер в пикселях (без указания px) * @param {number} $maxSize - Максимальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета адаптивных размеров в диапазоне мобильной верстки (от 375px до 768px) * * @param {number} $minSize - Минимальный размер в пикселях (без указания px) * @param {number} $maxSize - Максимальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * MIXINS: для каждого свойства десктопной верстки * * @param {number} ...$size - Размеры в пикселях (без указания px) * @return {property: px} */ .advantage { display: flex; flex-direction: column; align-items: center; background: #FFFFFF; } .advantage { gap: 17.0869565217px; } @media (max-width: 1651px) { .advantage { gap: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .advantage { gap: 13.0434782609px; } } @media (max-width: 1252px) { .advantage { gap: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } .advantage { padding: 27.3391304348px; } @media (max-width: 1651px) { .advantage { padding: clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px); } } @media (max-width: 1550px) { .advantage { padding: 20.8695652174px; } } @media (max-width: 1252px) { .advantage { padding: clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px); } } .advantage { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .advantage { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .advantage { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .advantage { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } @media (max-width: 1024px) { .advantage { gap: clamp(16px, 16px + 4 * (100vw - 768px) / 256, 20px); padding: clamp(24px, 24px + 8 * (100vw - 768px) / 256, 32px); border-radius: 8px; } } @media (max-width: 767px) { .advantage { gap: clamp(12px, 12px + 4 * (100vw - 375px) / 393, 16px); padding: clamp(20px, 20px + 4 * (100vw - 375px) / 393, 24px); } } .advantage--color-gray { background: #F6F7F9; } .advantage--mint-mist { background: #CCE5E6; } .advantage--mint-mist .advantage__text { color: #24282B; } .advantage--mint-mist-light { background: #99CACD; } .advantage--mint-mist-light .advantage__text { color: #24282B; } .advantage--mint-mist-dark { background: #66B0B4; } .advantage--mint-mist-dark .advantage__text { color: #24282B; } .advantage--align-left { align-items: start; } .advantage--align-left .advantage__title { text-align: start; } .advantage--align-left .advantage__text { text-align: start; } .advantage--low-font .advantage__text { font-size: 13.6695652174px; } @media (max-width: 1651px) { .advantage--low-font .advantage__text { font-size: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .advantage--low-font .advantage__text { font-size: 10.4347826087px; } } @media (max-width: 1252px) { .advantage--low-font .advantage__text { font-size: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } .advantage--low-font .advantage__text { line-height: 20.5043478261px; } @media (max-width: 1651px) { .advantage--low-font .advantage__text { line-height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .advantage--low-font .advantage__text { line-height: 15.652173913px; } } @media (max-width: 1252px) { .advantage--low-font .advantage__text { line-height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } @media (max-width: 1024px) { .advantage--low-font .advantage__text { font-size: clamp(14px, 14px + 2 * (100vw - 768px) / 256, 16px); line-height: clamp(18px, 18px + 6 * (100vw - 768px) / 256, 24px); } } @media (max-width: 767px) { .advantage--low-font .advantage__text { font-size: clamp(12px, 12px + 2 * (100vw - 375px) / 393, 14px); line-height: clamp(16px, 16px + 2 * (100vw - 375px) / 393, 18px); } } .advantage--big-font .advantage__text { font-size: 15.3782608696px; } @media (max-width: 1651px) { .advantage--big-font .advantage__text { font-size: clamp(14.6054347826px, 14.6054347826px + 0.772826087 * (100vw - 1551px) / 100, 15.3782608696px); } } @media (max-width: 1550px) { .advantage--big-font .advantage__text { font-size: 11.7391304348px; } } @media (max-width: 1252px) { .advantage--big-font .advantage__text { font-size: clamp(9.5184782609px, 9.5184782609px + 2.2206521739 * (100vw - 1025px) / 227, 11.7391304348px); } } .advantage--big-font .advantage__text { line-height: 20.5043478261px; } @media (max-width: 1651px) { .advantage--big-font .advantage__text { line-height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .advantage--big-font .advantage__text { line-height: 15.652173913px; } } @media (max-width: 1252px) { .advantage--big-font .advantage__text { line-height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } @media (max-width: 1024px) { .advantage--big-font .advantage__text { font-size: clamp(14px, 14px + 2 * (100vw - 768px) / 256, 16px); line-height: clamp(20px, 20px + 4 * (100vw - 768px) / 256, 24px); } } .advantage--low-gap { gap: 10.252173913px; } @media (max-width: 1651px) { .advantage--low-gap { gap: clamp(9.7369565217px, 9.7369565217px + 0.5152173913 * (100vw - 1551px) / 100, 10.252173913px); } } @media (max-width: 1550px) { .advantage--low-gap { gap: 7.8260869565px; } } @media (max-width: 1252px) { .advantage--low-gap { gap: clamp(6.3456521739px, 6.3456521739px + 1.4804347826 * (100vw - 1025px) / 227, 7.8260869565px); } } @media (max-width: 1024px) { .advantage--low-gap { gap: clamp(8px, 8px + 4 * (100vw - 768px) / 256, 12px); } } @media (max-width: 767px) { .advantage--low-gap { gap: clamp(12px, 12px + -4 * (100vw - 375px) / 393, 8px); padding: 24px; } } .advantage__icon { width: 34.1739130435px; } @media (max-width: 1651px) { .advantage__icon { width: clamp(32.4565217391px, 32.4565217391px + 1.7173913043 * (100vw - 1551px) / 100, 34.1739130435px); } } @media (max-width: 1550px) { .advantage__icon { width: 26.0869565217px; } } @media (max-width: 1252px) { .advantage__icon { width: clamp(21.152173913px, 21.152173913px + 4.9347826087 * (100vw - 1025px) / 227, 26.0869565217px); } } .advantage__icon { height: 34.1739130435px; } @media (max-width: 1651px) { .advantage__icon { height: clamp(32.4565217391px, 32.4565217391px + 1.7173913043 * (100vw - 1551px) / 100, 34.1739130435px); } } @media (max-width: 1550px) { .advantage__icon { height: 26.0869565217px; } } @media (max-width: 1252px) { .advantage__icon { height: clamp(21.152173913px, 21.152173913px + 4.9347826087 * (100vw - 1025px) / 227, 26.0869565217px); } } @media (max-width: 1024px) { .advantage__icon { width: clamp(32px, 32px + 8 * (100vw - 768px) / 256, 40px); height: clamp(32px, 32px + 8 * (100vw - 768px) / 256, 40px); } } @media (max-width: 767px) { .advantage__icon { width: clamp(28px, 28px + 4 * (100vw - 375px) / 393, 32px); height: clamp(28px, 28px + 4 * (100vw - 375px) / 393, 32px); } } @media (min-width: 1025px) { .advantage__icon--margin-top--10 { margin-top: 8.5434782609px; } } @media (min-width: 1025px) and (max-width: 1651px) { .advantage__icon--margin-top--10 { margin-top: clamp(8.1141304348px, 8.1141304348px + 0.4293478261 * (100vw - 1551px) / 100, 8.5434782609px); } } @media (min-width: 1025px) and (max-width: 1550px) { .advantage__icon--margin-top--10 { margin-top: 6.5217391304px; } } @media (min-width: 1025px) and (max-width: 1252px) { .advantage__icon--margin-top--10 { margin-top: clamp(5.2880434783px, 5.2880434783px + 1.2336956522 * (100vw - 1025px) / 227, 6.5217391304px); } } .advantage__number { color: #007B82; font-weight: 500; } .advantage__number { font-size: 20.5043478261px; } @media (max-width: 1651px) { .advantage__number { font-size: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .advantage__number { font-size: 15.652173913px; } } @media (max-width: 1252px) { .advantage__number { font-size: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } @media (max-width: 1024px) { .advantage__number { font-size: clamp(20px, 20px + 4 * (100vw - 768px) / 256, 24px); } } @media (max-width: 767px) { .advantage__number { font-size: clamp(18px, 18px + 2 * (100vw - 375px) / 393, 20px); } } .advantage__stars { display: flex; flex-direction: column; } .advantage__stars { gap: 17.0869565217px; } @media (max-width: 1651px) { .advantage__stars { gap: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .advantage__stars { gap: 13.0434782609px; } } @media (max-width: 1252px) { .advantage__stars { gap: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } @media (max-width: 1024px) { .advantage__stars { flex-direction: row-reverse; width: 100%; justify-content: space-between; align-items: center; } } .advantage__stars-container { display: flex; align-items: center; } .advantage__star { width: 39.3px; } @media (max-width: 1651px) { .advantage__star { width: clamp(37.325px, 37.325px + 1.975 * (100vw - 1551px) / 100, 39.3px); } } @media (max-width: 1550px) { .advantage__star { width: 30px; } } @media (max-width: 1252px) { .advantage__star { width: clamp(24.325px, 24.325px + 5.675 * (100vw - 1025px) / 227, 30px); } } .advantage__star { height: 39.3px; } @media (max-width: 1651px) { .advantage__star { height: clamp(37.325px, 37.325px + 1.975 * (100vw - 1551px) / 100, 39.3px); } } @media (max-width: 1550px) { .advantage__star { height: 30px; } } @media (max-width: 1252px) { .advantage__star { height: clamp(24.325px, 24.325px + 5.675 * (100vw - 1025px) / 227, 30px); } } @media (max-width: 1024px) { .advantage__star { width: 24px; height: 24px; } } @media (max-width: 767px) { .advantage__star { width: clamp(22px, 22px + 2 * (100vw - 375px) / 393, 24px); height: clamp(22px, 22px + 2 * (100vw - 375px) / 393, 24px); } } .advantage__block { display: flex; flex-direction: column; align-items: center; } .advantage__block { gap: 10.252173913px; } @media (max-width: 1651px) { .advantage__block { gap: clamp(9.7369565217px, 9.7369565217px + 0.5152173913 * (100vw - 1551px) / 100, 10.252173913px); } } @media (max-width: 1550px) { .advantage__block { gap: 7.8260869565px; } } @media (max-width: 1252px) { .advantage__block { gap: clamp(6.3456521739px, 6.3456521739px + 1.4804347826 * (100vw - 1025px) / 227, 7.8260869565px); } } @media (max-width: 1024px) { .advantage__block { gap: clamp(8px, 8px + 4 * (100vw - 768px) / 256, 12px); } } .advantage__title { font-weight: 500; width: 100%; text-align: center; letter-spacing: -0.5px; } .advantage__title { font-size: 20.5043478261px; } @media (max-width: 1651px) { .advantage__title { font-size: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .advantage__title { font-size: 15.652173913px; } } @media (max-width: 1252px) { .advantage__title { font-size: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } .advantage__title { line-height: 23.9217391304px; } @media (max-width: 1651px) { .advantage__title { line-height: clamp(22.7195652174px, 22.7195652174px + 1.202173913 * (100vw - 1551px) / 100, 23.9217391304px); } } @media (max-width: 1550px) { .advantage__title { line-height: 18.2608695652px; } } @media (max-width: 1252px) { .advantage__title { line-height: clamp(14.8065217391px, 14.8065217391px + 3.4543478261 * (100vw - 1025px) / 227, 18.2608695652px); } } @media (max-width: 1024px) { .advantage__title { font-size: clamp(20px, 20px + 4 * (100vw - 768px) / 256, 24px); line-height: clamp(24px, 24px + 4 * (100vw - 768px) / 256, 28px); } } @media (max-width: 767px) { .advantage__title { font-size: clamp(18px, 18px + 2 * (100vw - 375px) / 393, 20px); line-height: clamp(22px, 22px + 2 * (100vw - 375px) / 393, 24px); } } .advantage__text { color: #7C7E80; text-align: center; letter-spacing: -0.4px; /* Для защиты от ошибок контент менеджера, если он введет более 3-х строк текста. Есть сомнения в надежности данного решения (несмотря на то, что баги в процессе тестирования не выявлены) т.к. используются вендорные теги и deprecated-теги. */ } .advantage__text { font-size: 13.6695652174px; } @media (max-width: 1651px) { .advantage__text { font-size: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .advantage__text { font-size: 10.4347826087px; } } @media (max-width: 1252px) { .advantage__text { font-size: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } .advantage__text { line-height: 17.0869565217px; } @media (max-width: 1651px) { .advantage__text { line-height: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .advantage__text { line-height: 13.0434782609px; } } @media (max-width: 1252px) { .advantage__text { line-height: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } @media (max-width: 1024px) { .advantage__text { font-size: clamp(14px, 14px + 2 * (100vw - 768px) / 256, 16px); line-height: 20px; } } .advantage__text--shortened { overflow: hidden; text-overflow: ellipsis; white-space: initial; display: -webkit-box; -webkit-box-orient: vertical; } .advantage__text--shortened--to-3-lines { -webkit-line-clamp: 3; } @media (min-width: 1025px) { .advantage__text--shortened--to-3-lines { height: 49.552173913px; } } @media (min-width: 1025px) and (max-width: 1651px) { .advantage__text--shortened--to-3-lines { height: clamp(47.0619565217px, 47.0619565217px + 2.4902173913 * (100vw - 1551px) / 100, 49.552173913px); } } @media (min-width: 1025px) and (max-width: 1550px) { .advantage__text--shortened--to-3-lines { height: 37.8260869565px; } } @media (min-width: 1025px) and (max-width: 1252px) { .advantage__text--shortened--to-3-lines { height: clamp(30.6706521739px, 30.6706521739px + 7.1554347826 * (100vw - 1025px) / 227, 37.8260869565px); } } @media (max-width: 1024px) { .advantage__text--shortened--to-3-lines { height: clamp(58px, 58px + 0 * (100vw - 768px) / 256, 58px); } } /*!****************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./www/local/components/blocks/product-types/templates/.default/style.scss ***! \****************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /** * Размер в дизайне указан, если у страницы маленькие отступы по бокам, цель функции пересчитать размеры, в случае, если * мы увеличиваем отступы, но хотим чтобы визуально страница осталась такой же, то есть уменьшаем размер пропорционально * уменьшению ширины контентной области * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @param {number} $oldContent - Изначальная ширина контентной области в пикселях (без указания px) * @param {number} $newContent - Измененная ширина контентной области в пикселях (без указания px) * @return {number} - Измененный размер в пикселях (без указания px) */ /** * Функция возвращает адаптивные размеры в заданном диапазоне, при пороге в $widthMaxSize и больше, размер будет * $maxSize, в диапазоне между $widthMinSize и $widthMaxSize, размер будет пропорционально уменьшаться/увеличиваться, * при достижении порога в $widthMinSize и меньше размер будет $minSize * * @param {number} $widthMinSize - Минимальная ширина экрана в пикселях (без указания px) * @param {number} $widthMaxSize - Максимальная ширина экрана в пикселях (без указания px) * @param {number} $minSize - Размер, который указан для минимальной ширины экрана в пикселях (без указания px) * @param {number} $maxSize - Размер, который указан для максимальной ширины экрана в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета размеров десктопной верстки больших экранов (от 1652px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {px} - Измененный размер */ /** * Функция для пересчета размеров десктопной верстки менее больших экранов (от 1551px до 1651px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета размеров десктопной верстки средних экранов (до 1550px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {px} - Измененный размер */ /** * Функция для пересчета размеров десктопной верстки маленьких экранов (от 1025px до 1252px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета адаптивных размеров в диапазоне планшетной верстки (от 768px до 1024px) * * @param {number} $minSize - Минимальный размер в пикселях (без указания px) * @param {number} $maxSize - Максимальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета адаптивных размеров в диапазоне мобильной верстки (от 375px до 768px) * * @param {number} $minSize - Минимальный размер в пикселях (без указания px) * @param {number} $maxSize - Максимальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * MIXINS: для каждого свойства десктопной верстки * * @param {number} ...$size - Размеры в пикселях (без указания px) * @return {property: px} */ .products { background: #24282B; } .products { padding: 76.8913043478px 34.1739130435px; } @media (max-width: 1651px) { .products { padding: clamp(73.027173913px, 73.027173913px + 3.8641304348 * (100vw - 1551px) / 100, 76.8913043478px) clamp(32.4565217391px, 32.4565217391px + 1.7173913043 * (100vw - 1551px) / 100, 34.1739130435px); } } @media (max-width: 1550px) { .products { padding: 58.6956521739px 26.0869565217px; } } @media (max-width: 1252px) { .products { padding: clamp(47.5923913043px, 47.5923913043px + 11.1032608696 * (100vw - 1025px) / 227, 58.6956521739px) clamp(21.152173913px, 21.152173913px + 4.9347826087 * (100vw - 1025px) / 227, 26.0869565217px); } } @media (max-width: 1024px) { .products { padding: clamp(60px, 60px + 30 * (100vw - 768px) / 256, 90px) 40px; } } @media (max-width: 767px) { .products { padding: clamp(48px, 48px + 12 * (100vw - 375px) / 393, 60px) clamp(12px, 12px + 28 * (100vw - 375px) / 393, 40px); } } @media (max-width: 1024px) { .products .max-width { padding: 0 !important; } } .products__top { display: flex; justify-content: space-between; align-items: center; } .products__top { margin-bottom: 34.1739130435px; } @media (max-width: 1651px) { .products__top { margin-bottom: clamp(32.4565217391px, 32.4565217391px + 1.7173913043 * (100vw - 1551px) / 100, 34.1739130435px); } } @media (max-width: 1550px) { .products__top { margin-bottom: 26.0869565217px; } } @media (max-width: 1252px) { .products__top { margin-bottom: clamp(21.152173913px, 21.152173913px + 4.9347826087 * (100vw - 1025px) / 227, 26.0869565217px); } } @media (max-width: 1024px) { .products__top { flex-direction: column; align-items: unset; gap: 32px; margin-bottom: clamp(24px, 24px + 16 * (100vw - 768px) / 256, 40px); } } @media (max-width: 767px) { .products__top { gap: clamp(28px, 28px + 4 * (100vw - 375px) / 393, 32px); margin-bottom: clamp(20px, 20px + 4 * (100vw - 375px) / 393, 24px); } } .products__top-left { display: flex; align-items: center; } .products__top-left { gap: 17.0869565217px; } @media (max-width: 1651px) { .products__top-left { gap: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .products__top-left { gap: 13.0434782609px; } } @media (max-width: 1252px) { .products__top-left { gap: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } @media (max-width: 1024px) { .products__top-left { justify-content: space-between; } } @media (max-width: 767px) { .products__top-left { gap: 8px; justify-content: unset; flex-direction: column; align-items: unset; } } .products__title { color: white; } .products__title { font-size: 41.0086956522px; } @media (max-width: 1651px) { .products__title { font-size: clamp(38.947826087px, 38.947826087px + 2.0608695652 * (100vw - 1551px) / 100, 41.0086956522px); } } @media (max-width: 1550px) { .products__title { font-size: 31.3043478261px; } } @media (max-width: 1252px) { .products__title { font-size: clamp(25.3826086957px, 25.3826086957px + 5.9217391304 * (100vw - 1025px) / 227, 31.3043478261px); } } @media (max-width: 1024px) { .products__title { font-size: clamp(36px, 36px + 12 * (100vw - 768px) / 256, 48px); } } @media (max-width: 767px) { .products__title { font-size: clamp(32px, 32px + 4 * (100vw - 375px) / 393, 36px); } } .products__link { display: flex; align-items: center; } .products__link { gap: 6.8347826087px; } @media (max-width: 1651px) { .products__link { gap: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .products__link { gap: 5.2173913043px; } } @media (max-width: 1252px) { .products__link { gap: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } .products__link { border: 1.7086956522px solid #FFFFFF; } @media (max-width: 1651px) { .products__link { border: clamp(1.622826087px, 1.622826087px + 0.0858695652 * (100vw - 1551px) / 100, 1.7086956522px) solid #FFFFFF; } } @media (max-width: 1550px) { .products__link { border: 1.3043478261px solid #FFFFFF; } } @media (max-width: 1252px) { .products__link { border: clamp(1.0576086957px, 1.0576086957px + 0.2467391304 * (100vw - 1025px) / 227, 1.3043478261px) solid #FFFFFF; } } .products__link { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .products__link { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .products__link { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .products__link { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } .products__link { padding: 13.6695652174px 20.5043478261px; } @media (max-width: 1651px) { .products__link { padding: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px) clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .products__link { padding: 10.4347826087px 15.652173913px; } } @media (max-width: 1252px) { .products__link { padding: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px) clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } @media (max-width: 1024px) { .products__link { gap: 8px; border: 2px solid #FFFFFF; border-radius: 8px; padding: 16px 24px; } } @media (max-width: 767px) { .products__link { padding: clamp(13px, 13px + 3 * (100vw - 375px) / 393, 16px) clamp(20px, 20px + 4 * (100vw - 375px) / 393, 24px); justify-content: space-between; } } .products__link:hover { opacity: 60%; } .products__link-text { font-weight: 500; color: #FFFFFF; } .products__link-text { font-size: 13.6695652174px; } @media (max-width: 1651px) { .products__link-text { font-size: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .products__link-text { font-size: 10.4347826087px; } } @media (max-width: 1252px) { .products__link-text { font-size: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } .products__link-text { line-height: 20.5043478261px; } @media (max-width: 1651px) { .products__link-text { line-height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .products__link-text { line-height: 15.652173913px; } } @media (max-width: 1252px) { .products__link-text { line-height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } @media (max-width: 1024px) { .products__link-text { font-size: 16px; line-height: 24px; } } @media (max-width: 767px) { .products__link-text { font-size: clamp(14px, 14px + 2 * (100vw - 375px) / 393, 16px); line-height: clamp(18px, 18px + 6 * (100vw - 375px) / 393, 24px); } } .products__link-arrow { color: #FFFFFF; rotate: -90deg; } .products__link-arrow { width: 17.0869565217px; } @media (max-width: 1651px) { .products__link-arrow { width: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .products__link-arrow { width: 13.0434782609px; } } @media (max-width: 1252px) { .products__link-arrow { width: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } .products__link-arrow { height: 17.0869565217px; } @media (max-width: 1651px) { .products__link-arrow { height: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .products__link-arrow { height: 13.0434782609px; } } @media (max-width: 1252px) { .products__link-arrow { height: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } @media (max-width: 1024px) { .products__link-arrow { width: 20px; height: 20px; } } .products__buttons { display: flex; align-items: center; } .products__buttons { gap: 34.1739130435px; } @media (max-width: 1651px) { .products__buttons { gap: clamp(32.4565217391px, 32.4565217391px + 1.7173913043 * (100vw - 1551px) / 100, 34.1739130435px); } } @media (max-width: 1550px) { .products__buttons { gap: 26.0869565217px; } } @media (max-width: 1252px) { .products__buttons { gap: clamp(21.152173913px, 21.152173913px + 4.9347826087 * (100vw - 1025px) / 227, 26.0869565217px); } } @media (max-width: 1024px) { .products__buttons { gap: unset; justify-content: space-between; } } .products__counter { font-weight: 500; } .products__counter { font-size: 23.9217391304px; } @media (max-width: 1651px) { .products__counter { font-size: clamp(22.7195652174px, 22.7195652174px + 1.202173913 * (100vw - 1551px) / 100, 23.9217391304px); } } @media (max-width: 1550px) { .products__counter { font-size: 18.2608695652px; } } @media (max-width: 1252px) { .products__counter { font-size: clamp(14.8065217391px, 14.8065217391px + 3.4543478261 * (100vw - 1025px) / 227, 18.2608695652px); } } @media (max-width: 1024px) { .products__counter { font-size: clamp(24px, 24px + 4 * (100vw - 768px) / 256, 28px); } } @media (max-width: 767px) { .products__counter { font-size: clamp(20px, 20px + 4 * (100vw - 375px) / 393, 24px); } } .products__counter-active { color: #FFFFFF; } .products__counter-separator { color: #7C7E80; } .products__counter-all { color: #7C7E80; } .products__switches { display: flex; align-items: center; } .products__switches { gap: 6.8347826087px; } @media (max-width: 1651px) { .products__switches { gap: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .products__switches { gap: 5.2173913043px; } } @media (max-width: 1252px) { .products__switches { gap: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } @media (max-width: 1024px) { .products__switches { gap: 8px; } } .products__switcher { background: #FFFFFF; border: none; cursor: pointer; display: flex; position: static !important; opacity: 1 !important; width: unset !important; height: unset !important; color: #24282B !important; margin-top: 0 !important; } .products__switcher { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .products__switcher { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .products__switcher { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .products__switcher { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } .products__switcher { padding: 13.6695652174px 26.4847826087px; } @media (max-width: 1651px) { .products__switcher { padding: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px) clamp(25.1538043478px, 25.1538043478px + 1.3309782609 * (100vw - 1551px) / 100, 26.4847826087px); } } @media (max-width: 1550px) { .products__switcher { padding: 10.4347826087px 20.2173913043px; } } @media (max-width: 1252px) { .products__switcher { padding: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px) clamp(16.3929347826px, 16.3929347826px + 3.8244565217 * (100vw - 1025px) / 227, 20.2173913043px); } } @media (max-width: 1024px) { .products__switcher { border-radius: 8px; padding: clamp(10px, 10px + 6 * (100vw - 768px) / 256, 16px) clamp(18px, 18px + 13 * (100vw - 768px) / 256, 31px); } } @media (max-width: 767px) { .products__switcher { padding: clamp(12px, 12px + -2 * (100vw - 375px) / 393, 10px) clamp(22px, 22px + -4 * (100vw - 375px) / 393, 18px); } } .products__switcher::after { content: ""; } .products__switcher--left .products__arrow { rotate: 90deg; } .products__switcher--right .products__arrow { rotate: -90deg; } .products__arrow { width: 23.9217391304px !important; } @media (max-width: 1651px) { .products__arrow { width: clamp(22.7195652174px, 22.7195652174px + 1.202173913 * (100vw - 1551px) / 100, 23.9217391304px) !important; } } @media (max-width: 1550px) { .products__arrow { width: 18.2608695652px !important; } } @media (max-width: 1252px) { .products__arrow { width: clamp(14.8065217391px, 14.8065217391px + 3.4543478261 * (100vw - 1025px) / 227, 18.2608695652px) !important; } } .products__arrow { height: 23.9217391304px !important; } @media (max-width: 1651px) { .products__arrow { height: clamp(22.7195652174px, 22.7195652174px + 1.202173913 * (100vw - 1551px) / 100, 23.9217391304px) !important; } } @media (max-width: 1550px) { .products__arrow { height: 18.2608695652px !important; } } @media (max-width: 1252px) { .products__arrow { height: clamp(14.8065217391px, 14.8065217391px + 3.4543478261 * (100vw - 1025px) / 227, 18.2608695652px) !important; } } @media (max-width: 1024px) { .products__arrow { width: 20px !important; height: 20px !important; } } .products__element { background: white; display: grid !important; grid-template-columns: 1fr 1fr; } .products__element { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .products__element { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .products__element { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .products__element { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } .products__element { height: 380.1847826087px !important; } @media (max-width: 1651px) { .products__element { height: clamp(361.0788043478px, 361.0788043478px + 19.1059782609 * (100vw - 1551px) / 100, 380.1847826087px) !important; } } @media (max-width: 1550px) { .products__element { height: 290.2173913043px !important; } } @media (max-width: 1252px) { .products__element { height: clamp(235.3179347826px, 235.3179347826px + 54.8994565217 * (100vw - 1025px) / 227, 290.2173913043px) !important; } } @media (max-width: 1024px) { .products__element { max-width: clamp(688px, 688px + 223 * (100vw - 768px) / 256, 911px); border-radius: 8px; margin-right: clamp(16px, 16px + 4 * (100vw - 768px) / 256, 20px); height: clamp(356px, 356px + 89 * (100vw - 768px) / 256, 445px) !important; } } @media (max-width: 767px) { .products__element { max-width: 320px; display: flex !important; flex-direction: column; margin-right: clamp(8px, 8px + 8 * (100vw - 375px) / 393, 16px); height: 502px !important; } } .products__element:nth-last-child(2) { margin-right: 0; } .products__content { display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; height: inherit; } .products__content { padding: 27.3391304348px 17.9413043478px 27.3391304348px 27.3391304348px; } @media (max-width: 1651px) { .products__content { padding: clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px) clamp(17.039673913px, 17.039673913px + 0.9016304348 * (100vw - 1551px) / 100, 17.9413043478px) clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px) clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px); } } @media (max-width: 1550px) { .products__content { padding: 20.8695652174px 13.6956521739px 20.8695652174px 20.8695652174px; } } @media (max-width: 1252px) { .products__content { padding: clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px) clamp(11.1048913043px, 11.1048913043px + 2.5907608696 * (100vw - 1025px) / 227, 13.6956521739px) clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px) clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px); } } @media (max-width: 1024px) { .products__content { padding: clamp(24px, 24px + 8 * (100vw - 768px) / 256, 32px); } } .products__content-text { display: flex; flex-direction: column; } .products__content-text { gap: 10.252173913px; } @media (max-width: 1651px) { .products__content-text { gap: clamp(9.7369565217px, 9.7369565217px + 0.5152173913 * (100vw - 1551px) / 100, 10.252173913px); } } @media (max-width: 1550px) { .products__content-text { gap: 7.8260869565px; } } @media (max-width: 1252px) { .products__content-text { gap: clamp(6.3456521739px, 6.3456521739px + 1.4804347826 * (100vw - 1025px) / 227, 7.8260869565px); } } @media (max-width: 1024px) { .products__content-text { gap: 12px; } } @media (max-width: 767px) { .products__content-text { gap: clamp(8px, 8px + 4 * (100vw - 375px) / 393, 12px); } } .products__content-title { letter-spacing: -0.2px; } .products__content-title { font-size: 23.9217391304px; } @media (max-width: 1651px) { .products__content-title { font-size: clamp(22.7195652174px, 22.7195652174px + 1.202173913 * (100vw - 1551px) / 100, 23.9217391304px); } } @media (max-width: 1550px) { .products__content-title { font-size: 18.2608695652px; } } @media (max-width: 1252px) { .products__content-title { font-size: clamp(14.8065217391px, 14.8065217391px + 3.4543478261 * (100vw - 1025px) / 227, 18.2608695652px); } } .products__content-title { line-height: 27.3391304348px; } @media (max-width: 1651px) { .products__content-title { line-height: clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px); } } @media (max-width: 1550px) { .products__content-title { line-height: 20.8695652174px; } } @media (max-width: 1252px) { .products__content-title { line-height: clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px); } } @media (max-width: 1024px) { .products__content-title { font-size: clamp(20px, 20px + 8 * (100vw - 768px) / 256, 28px); line-height: clamp(24px, 24px + 8 * (100vw - 768px) / 256, 32px); } } .products__text { font-size: 15.3782608696px; } @media (max-width: 1651px) { .products__text { font-size: clamp(14.6054347826px, 14.6054347826px + 0.772826087 * (100vw - 1551px) / 100, 15.3782608696px); } } @media (max-width: 1550px) { .products__text { font-size: 11.7391304348px; } } @media (max-width: 1252px) { .products__text { font-size: clamp(9.5184782609px, 9.5184782609px + 2.2206521739 * (100vw - 1025px) / 227, 11.7391304348px); } } .products__text { line-height: 20.5043478261px; } @media (max-width: 1651px) { .products__text { line-height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .products__text { line-height: 15.652173913px; } } @media (max-width: 1252px) { .products__text { line-height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } @media (max-width: 1024px) { .products__text { font-size: clamp(14px, 14px + 4 * (100vw - 768px) / 256, 18px); line-height: clamp(20px, 20px + 4 * (100vw - 768px) / 256, 24px); } } .products__tags { display: flex; flex-wrap: wrap; } .products__tags { gap: 6.8347826087px; } @media (max-width: 1651px) { .products__tags { gap: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .products__tags { gap: 5.2173913043px; } } @media (max-width: 1252px) { .products__tags { gap: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } @media (max-width: 1024px) { .products__tags { gap: 8px; } } @media (max-width: 767px) { .products__tags { display: none; } } .products__tag { background: #F0F1F4; } .products__tag { padding: 10.252173913px 13.6695652174px; } @media (max-width: 1651px) { .products__tag { padding: clamp(9.7369565217px, 9.7369565217px + 0.5152173913 * (100vw - 1551px) / 100, 10.252173913px) clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .products__tag { padding: 7.8260869565px 10.4347826087px; } } @media (max-width: 1252px) { .products__tag { padding: clamp(6.3456521739px, 6.3456521739px + 1.4804347826 * (100vw - 1025px) / 227, 7.8260869565px) clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } .products__tag { font-size: 13.6695652174px; } @media (max-width: 1651px) { .products__tag { font-size: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .products__tag { font-size: 10.4347826087px; } } @media (max-width: 1252px) { .products__tag { font-size: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } .products__tag { line-height: 17.0869565217px; } @media (max-width: 1651px) { .products__tag { line-height: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .products__tag { line-height: 13.0434782609px; } } @media (max-width: 1252px) { .products__tag { line-height: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } .products__tag { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .products__tag { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .products__tag { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .products__tag { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } @media (max-width: 1024px) { .products__tag { padding: 12px clamp(12px, 12px + 4 * (100vw - 768px) / 256, 16px); font-size: clamp(12px, 12px + 4 * (100vw - 768px) / 256, 16px); line-height: clamp(16px, 16px + 4 * (100vw - 768px) / 256, 20px); border-radius: 8px; } } .products__picture { position: absolute; } .products__picture .products__image { object-fit: cover; } .products__image { z-index: 1; position: relative; } .products__picture, .products__image { border-radius: inherit; width: 100%; object-fit: contain; height: inherit; } .products__picture-block, .products__image-block { height: inherit; position: relative; } .products__picture-block, .products__image-block { border-radius: 0px 6.8347826087px 6.8347826087px 0px; } @media (max-width: 1651px) { .products__picture-block, .products__image-block { border-radius: clamp(0px, 0px + 0 * (100vw - 1551px) / 100, 0px) clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px) clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px) clamp(0px, 0px + 0 * (100vw - 1551px) / 100, 0px); } } @media (max-width: 1550px) { .products__picture-block, .products__image-block { border-radius: 0px 5.2173913043px 5.2173913043px 0px; } } @media (max-width: 1252px) { .products__picture-block, .products__image-block { border-radius: clamp(0px, 0px + 0 * (100vw - 1025px) / 227, 0px) clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px) clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px) clamp(0px, 0px + 0 * (100vw - 1025px) / 227, 0px); } } @media (max-width: 1024px) { .products__picture-block, .products__image-block { border-radius: 0 8px 8px 0; } } @media (max-width: 767px) { .products__picture-block, .products__image-block { border-radius: 0 0 8px 8px; height: 270px; } } .products .swiper-button-prev:after, .products .swiper-button-next:after { content: ""; } .swiper-button-lock { display: none !important; } /*!***********************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./www/local/components/blocks/partners/templates/.default/style.scss ***! \***********************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /** * Размер в дизайне указан, если у страницы маленькие отступы по бокам, цель функции пересчитать размеры, в случае, если * мы увеличиваем отступы, но хотим чтобы визуально страница осталась такой же, то есть уменьшаем размер пропорционально * уменьшению ширины контентной области * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @param {number} $oldContent - Изначальная ширина контентной области в пикселях (без указания px) * @param {number} $newContent - Измененная ширина контентной области в пикселях (без указания px) * @return {number} - Измененный размер в пикселях (без указания px) */ /** * Функция возвращает адаптивные размеры в заданном диапазоне, при пороге в $widthMaxSize и больше, размер будет * $maxSize, в диапазоне между $widthMinSize и $widthMaxSize, размер будет пропорционально уменьшаться/увеличиваться, * при достижении порога в $widthMinSize и меньше размер будет $minSize * * @param {number} $widthMinSize - Минимальная ширина экрана в пикселях (без указания px) * @param {number} $widthMaxSize - Максимальная ширина экрана в пикселях (без указания px) * @param {number} $minSize - Размер, который указан для минимальной ширины экрана в пикселях (без указания px) * @param {number} $maxSize - Размер, который указан для максимальной ширины экрана в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета размеров десктопной верстки больших экранов (от 1652px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {px} - Измененный размер */ /** * Функция для пересчета размеров десктопной верстки менее больших экранов (от 1551px до 1651px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета размеров десктопной верстки средних экранов (до 1550px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {px} - Измененный размер */ /** * Функция для пересчета размеров десктопной верстки маленьких экранов (от 1025px до 1252px) * * @param {number} $size - Изначальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета адаптивных размеров в диапазоне планшетной верстки (от 768px до 1024px) * * @param {number} $minSize - Минимальный размер в пикселях (без указания px) * @param {number} $maxSize - Максимальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * Функция для пересчета адаптивных размеров в диапазоне мобильной верстки (от 375px до 768px) * * @param {number} $minSize - Минимальный размер в пикселях (без указания px) * @param {number} $maxSize - Максимальный размер в пикселях (без указания px) * @return {clamp(px, vw, px)} - Адаптивный размер */ /** * MIXINS: для каждого свойства десктопной верстки * * @param {number} ...$size - Размеры в пикселях (без указания px) * @return {property: px} */ .partners-block { display: flex; flex-direction: column; } .partners-block { gap: 27.3391304348px; } @media (max-width: 1651px) { .partners-block { gap: clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px); } } @media (max-width: 1550px) { .partners-block { gap: 20.8695652174px; } } @media (max-width: 1252px) { .partners-block { gap: clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px); } } @media (max-width: 1024px) { .partners-block { gap: 32px; } } @media (max-width: 767px) { .partners-block { gap: clamp(28px, 28px + 4 * (100vw - 375px) / 393, 32px); } } .partners-block--margin { margin: 76.8913043478px 0px; } @media (max-width: 1651px) { .partners-block--margin { margin: clamp(73.027173913px, 73.027173913px + 3.8641304348 * (100vw - 1551px) / 100, 76.8913043478px) clamp(0px, 0px + 0 * (100vw - 1551px) / 100, 0px); } } @media (max-width: 1550px) { .partners-block--margin { margin: 58.6956521739px 0px; } } @media (max-width: 1252px) { .partners-block--margin { margin: clamp(47.5923913043px, 47.5923913043px + 11.1032608696 * (100vw - 1025px) / 227, 58.6956521739px) clamp(0px, 0px + 0 * (100vw - 1025px) / 227, 0px); } } @media (max-width: 1024px) { .partners-block--margin { margin: clamp(60px, 60px + 30 * (100vw - 768px) / 256, 90px) 0; } } @media (max-width: 767px) { .partners-block--margin { margin: clamp(48px, 48px + 12 * (100vw - 375px) / 393, 60px) 0; } } .partners-block__header { display: flex; justify-content: center; } .partners-block__title { font-size: 41.0086956522px; } @media (max-width: 1651px) { .partners-block__title { font-size: clamp(38.947826087px, 38.947826087px + 2.0608695652 * (100vw - 1551px) / 100, 41.0086956522px); } } @media (max-width: 1550px) { .partners-block__title { font-size: 31.3043478261px; } } @media (max-width: 1252px) { .partners-block__title { font-size: clamp(25.3826086957px, 25.3826086957px + 5.9217391304 * (100vw - 1025px) / 227, 31.3043478261px); } } @media (max-width: 1024px) { .partners-block__title { font-size: clamp(36px, 36px + 12 * (100vw - 768px) / 256, 48px); } } @media (max-width: 767px) { .partners-block__title { font-size: clamp(32px, 32px + 4 * (100vw - 375px) / 393, 36px); } } .partners-block__content { position: relative; } .partners-block__slide { width: max-content !important; object-fit: contain; } .partners-block__slide { max-height: 34.1739130435px; } @media (max-width: 1651px) { .partners-block__slide { max-height: clamp(32.4565217391px, 32.4565217391px + 1.7173913043 * (100vw - 1551px) / 100, 34.1739130435px); } } @media (max-width: 1550px) { .partners-block__slide { max-height: 26.0869565217px; } } @media (max-width: 1252px) { .partners-block__slide { max-height: clamp(21.152173913px, 21.152173913px + 4.9347826087 * (100vw - 1025px) / 227, 26.0869565217px); } } .partners-block__slide { margin-right: 64.0760869565px; } @media (max-width: 1651px) { .partners-block__slide { margin-right: clamp(60.8559782609px, 60.8559782609px + 3.2201086957 * (100vw - 1551px) / 100, 64.0760869565px); } } @media (max-width: 1550px) { .partners-block__slide { margin-right: 48.9130434783px; } } @media (max-width: 1252px) { .partners-block__slide { margin-right: clamp(39.660326087px, 39.660326087px + 9.2527173913 * (100vw - 1025px) / 227, 48.9130434783px); } } .partners-block__slide { padding: 25.6304347826px 0px; } @media (max-width: 1651px) { .partners-block__slide { padding: clamp(24.3423913043px, 24.3423913043px + 1.2880434783 * (100vw - 1551px) / 100, 25.6304347826px) clamp(0px, 0px + 0 * (100vw - 1551px) / 100, 0px); } } @media (max-width: 1550px) { .partners-block__slide { padding: 19.5652173913px 0px; } } @media (max-width: 1252px) { .partners-block__slide { padding: clamp(15.8641304348px, 15.8641304348px + 3.7010869565 * (100vw - 1025px) / 227, 19.5652173913px) clamp(0px, 0px + 0 * (100vw - 1025px) / 227, 0px); } } @media (max-width: 1024px) { .partners-block__slide { max-height: clamp(30px, 30px + 10 * (100vw - 768px) / 256, 40px); margin-right: 75px; } } @media (max-width: 767px) { .partners-block__slide { max-height: clamp(20px, 20px + 10 * (100vw - 375px) / 393, 30px); margin-right: clamp(50px, 50px + 25 * (100vw - 375px) / 393, 75px); } } .partners-block__slide-img { max-height: 34.1739130435px; } @media (max-width: 1651px) { .partners-block__slide-img { max-height: clamp(32.4565217391px, 32.4565217391px + 1.7173913043 * (100vw - 1551px) / 100, 34.1739130435px); } } @media (max-width: 1550px) { .partners-block__slide-img { max-height: 26.0869565217px; } } @media (max-width: 1252px) { .partners-block__slide-img { max-height: clamp(21.152173913px, 21.152173913px + 4.9347826087 * (100vw - 1025px) / 227, 26.0869565217px); } } @media (max-width: 1024px) { .partners-block__slide-img { max-height: clamp(30px, 30px + 10 * (100vw - 768px) / 256, 40px); } } @media (max-width: 767px) { .partners-block__slide-img { max-height: clamp(20px, 20px + 10 * (100vw - 375px) / 393, 30px); } } .partners-block__slide:nth-last-child(2) { margin-right: 0; } .partners-block__slide--black { opacity: 44%; } /* End */ /* /res/indexPage/2df8f2b4ee145b28183b.css?1758806688163063 */