/* Start:/res/brandPage/45ba26caa4702ab9d9ca.css?1756987864159691*/ /*!*******************************************************************************************************************************************************************************************************************************!*\ !*** 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/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 { background: #F0F1F4; } .brand__information { padding-top: 76.8913043478px; } @media (max-width: 1651px) { .brand__information { padding-top: clamp(73.027173913px, 73.027173913px + 3.8641304348 * (100vw - 1551px) / 100, 76.8913043478px); } } @media (max-width: 1550px) { .brand__information { padding-top: 58.6956521739px; } } @media (max-width: 1252px) { .brand__information { padding-top: clamp(47.5923913043px, 47.5923913043px + 11.1032608696 * (100vw - 1025px) / 227, 58.6956521739px); } } .brand__information { padding-bottom: 76.8913043478px; } @media (max-width: 1651px) { .brand__information { padding-bottom: clamp(73.027173913px, 73.027173913px + 3.8641304348 * (100vw - 1551px) / 100, 76.8913043478px); } } @media (max-width: 1550px) { .brand__information { padding-bottom: 58.6956521739px; } } @media (max-width: 1252px) { .brand__information { padding-bottom: clamp(47.5923913043px, 47.5923913043px + 11.1032608696 * (100vw - 1025px) / 227, 58.6956521739px); } } @media (max-width: 1024px) { .brand__information { padding-top: clamp(60px, 60px + 30 * (100vw - 768px) / 256, 90px); padding-bottom: clamp(88px, 88px + 2 * (100vw - 768px) / 256, 90px); } } @media (max-width: 767px) { .brand__information { padding-top: clamp(48px, 48px + 12 * (100vw - 375px) / 393, 60px); padding-bottom: clamp(68px, 68px + 20 * (100vw - 375px) / 393, 88px); } } .brand__mission { display: flex; flex-direction: column; } .brand__mission { margin-top: 76.8913043478px; } @media (max-width: 1651px) { .brand__mission { margin-top: clamp(73.027173913px, 73.027173913px + 3.8641304348 * (100vw - 1551px) / 100, 76.8913043478px); } } @media (max-width: 1550px) { .brand__mission { margin-top: 58.6956521739px; } } @media (max-width: 1252px) { .brand__mission { margin-top: clamp(47.5923913043px, 47.5923913043px + 11.1032608696 * (100vw - 1025px) / 227, 58.6956521739px); } } .brand__mission { gap: 27.3391304348px; } @media (max-width: 1651px) { .brand__mission { gap: clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px); } } @media (max-width: 1550px) { .brand__mission { gap: 20.8695652174px; } } @media (max-width: 1252px) { .brand__mission { gap: clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px); } } @media (max-width: 1024px) { .brand__mission { margin-top: clamp(60px, 60px + 30 * (100vw - 768px) / 256, 90px); gap: 32px; } } @media (max-width: 767px) { .brand__mission { margin-top: clamp(48px, 48px + 12 * (100vw - 375px) / 393, 60px); gap: clamp(28px, 28px + 4 * (100vw - 375px) / 393, 32px); } } .brand__mission-title { font-size: 41.0086956522px; } @media (max-width: 1651px) { .brand__mission-title { font-size: clamp(38.947826087px, 38.947826087px + 2.0608695652 * (100vw - 1551px) / 100, 41.0086956522px); } } @media (max-width: 1550px) { .brand__mission-title { font-size: 31.3043478261px; } } @media (max-width: 1252px) { .brand__mission-title { font-size: clamp(25.3826086957px, 25.3826086957px + 5.9217391304 * (100vw - 1025px) / 227, 31.3043478261px); } } @media (max-width: 1024px) { .brand__mission-title { font-size: clamp(36px, 36px + 12 * (100vw - 768px) / 256, 48px); } } @media (max-width: 767px) { .brand__mission-title { font-size: clamp(32px, 32px + 4 * (100vw - 375px) / 393, 36px); } } .brand__mission-body { display: grid; grid-template-columns: 1.4fr 1fr; } .brand__mission-body { gap: 17.0869565217px; } @media (max-width: 1651px) { .brand__mission-body { gap: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .brand__mission-body { gap: 13.0434782609px; } } @media (max-width: 1252px) { .brand__mission-body { gap: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } @media (max-width: 1024px) { .brand__mission-body { display: block; } } .brand__mission-left { display: flex; justify-content: center; align-items: center; flex-direction: column; background: url(/res/images/be59d5891e2767a6b881.png) no-repeat; background-size: cover; } .brand__mission-left { height: 659.5565217391px; } @media (max-width: 1651px) { .brand__mission-left { height: clamp(626.4108695652px, 626.4108695652px + 33.1456521739 * (100vw - 1551px) / 100, 659.5565217391px); } } @media (max-width: 1550px) { .brand__mission-left { height: 503.4782608696px; } } @media (max-width: 1252px) { .brand__mission-left { height: clamp(408.2369565217px, 408.2369565217px + 95.2413043478 * (100vw - 1025px) / 227, 503.4782608696px); } } @media (max-width: 1024px) { .brand__mission-left { height: 470px; margin-bottom: 20px; } } @media (max-width: 767px) { .brand__mission-left { height: clamp(240px, 240px + 230 * (100vw - 375px) / 393, 470px); margin-bottom: clamp(8px, 8px + 12 * (100vw - 375px) / 393, 20px); } } .brand__mission-block { display: flex; flex-direction: column; align-items: center; } .brand__mission-block { width: 614.2760869565px; } @media (max-width: 1651px) { .brand__mission-block { width: clamp(583.4059782609px, 583.4059782609px + 30.8701086957 * (100vw - 1551px) / 100, 614.2760869565px); } } @media (max-width: 1550px) { .brand__mission-block { width: 468.9130434783px; } } @media (max-width: 1252px) { .brand__mission-block { width: clamp(380.210326087px, 380.210326087px + 88.7027173913 * (100vw - 1025px) / 227, 468.9130434783px); } } @media (max-width: 1024px) { .brand__mission-block { width: clamp(567px, 567px + 152 * (100vw - 768px) / 256, 719px); } } @media (max-width: 767px) { .brand__mission-block { width: unset; padding: 26px 20px; } } .brand__mission-logo { width: 358.8260869565px; } @media (max-width: 1651px) { .brand__mission-logo { width: clamp(340.7934782609px, 340.7934782609px + 18.0326086957 * (100vw - 1551px) / 100, 358.8260869565px); } } @media (max-width: 1550px) { .brand__mission-logo { width: 273.9130434783px; } } @media (max-width: 1252px) { .brand__mission-logo { width: clamp(222.097826087px, 222.097826087px + 51.8152173913 * (100vw - 1025px) / 227, 273.9130434783px); } } .brand__mission-logo { height: 92.2695652174px; } @media (max-width: 1651px) { .brand__mission-logo { height: clamp(87.6326086957px, 87.6326086957px + 4.6369565217 * (100vw - 1551px) / 100, 92.2695652174px); } } @media (max-width: 1550px) { .brand__mission-logo { height: 70.4347826087px; } } @media (max-width: 1252px) { .brand__mission-logo { height: clamp(57.1108695652px, 57.1108695652px + 13.3239130435 * (100vw - 1025px) / 227, 70.4347826087px); } } @media (max-width: 1024px) { .brand__mission-logo { width: 420px; height: 108px; } } @media (max-width: 767px) { .brand__mission-logo { width: clamp(263px, 263px + 157 * (100vw - 375px) / 393, 420px); height: clamp(68px, 68px + 40 * (100vw - 375px) / 393, 108px); } } .brand__mission-text { font-weight: 500; text-align: center; } .brand__mission-text { font-size: 15.3782608696px; } @media (max-width: 1651px) { .brand__mission-text { font-size: clamp(14.6054347826px, 14.6054347826px + 0.772826087 * (100vw - 1551px) / 100, 15.3782608696px); } } @media (max-width: 1550px) { .brand__mission-text { font-size: 11.7391304348px; } } @media (max-width: 1252px) { .brand__mission-text { font-size: clamp(9.5184782609px, 9.5184782609px + 2.2206521739 * (100vw - 1025px) / 227, 11.7391304348px); } } .brand__mission-text { line-height: 20.5043478261px; } @media (max-width: 1651px) { .brand__mission-text { line-height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .brand__mission-text { line-height: 15.652173913px; } } @media (max-width: 1252px) { .brand__mission-text { line-height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } @media (max-width: 1024px) { .brand__mission-text { font-size: clamp(14px, 14px + 4 * (100vw - 768px) / 256, 18px); line-height: clamp(20px, 20px + 4 * (100vw - 768px) / 256, 24px); } } .brand__mission-wrapper { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } .brand__mission-wrapper { gap: 17.0869565217px; } @media (max-width: 1651px) { .brand__mission-wrapper { gap: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .brand__mission-wrapper { gap: 13.0434782609px; } } @media (max-width: 1252px) { .brand__mission-wrapper { gap: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } @media (max-width: 1024px) { .brand__mission-wrapper { gap: unset; display: flex !important; } } .brand__mission-slide { display: flex !important; width: unset !important; height: unset !important; box-sizing: border-box; } @media (max-width: 1024px) { .brand__mission-slide { max-width: 336px; margin-right: 16px; } } @media (max-width: 767px) { .brand__mission-slide { margin-right: clamp(8px, 8px + 8 * (100vw - 375px) / 393, 16px); } } .brand__mission-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/banner/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} */ body:has(.breadcrumbs) .banner { margin-top: -59.8043478261px; } @media (max-width: 1651px) { body:has(.breadcrumbs) .banner { margin-top: clamp(-56.7989130435px, -56.7989130435px + -3.0054347826 * (100vw - 1551px) / 100, -59.8043478261px); } } @media (max-width: 1550px) { body:has(.breadcrumbs) .banner { margin-top: -45.652173913px; } } @media (max-width: 1252px) { body:has(.breadcrumbs) .banner { margin-top: clamp(-37.0163043478px, -37.0163043478px + -8.6358695652 * (100vw - 1025px) / 227, -45.652173913px); } } @media (max-width: 1024px) { body:has(.breadcrumbs) .banner { margin-top: -81px; } } @media (max-width: 767px) { body:has(.breadcrumbs) .banner { margin-top: clamp(-81px, -81px + 20 * (100vw - 375px) / 393, -61px); } } .banner { aspect-ratio: 1840/600; display: flex; align-items: center; position: relative; } .banner { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .banner { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .banner { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .banner { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } @media (max-width: 1024px) { .banner { aspect-ratio: 768/560; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); border-radius: 0; } } @media (max-width: 767px) { .banner { aspect-ratio: 375/565; } } .banner__content { height: inherit; width: 100%; display: flex; justify-content: center; align-items: center; border-radius: inherit; } .banner__title { font-size: 41.0086956522px; } @media (max-width: 1651px) { .banner__title { font-size: clamp(38.947826087px, 38.947826087px + 2.0608695652 * (100vw - 1551px) / 100, 41.0086956522px); } } @media (max-width: 1550px) { .banner__title { font-size: 31.3043478261px; } } @media (max-width: 1252px) { .banner__title { font-size: clamp(25.3826086957px, 25.3826086957px + 5.9217391304 * (100vw - 1025px) / 227, 31.3043478261px); } } .banner__title { line-height: 41.0086956522px; } @media (max-width: 1651px) { .banner__title { line-height: clamp(38.947826087px, 38.947826087px + 2.0608695652 * (100vw - 1551px) / 100, 41.0086956522px); } } @media (max-width: 1550px) { .banner__title { line-height: 31.3043478261px; } } @media (max-width: 1252px) { .banner__title { line-height: clamp(25.3826086957px, 25.3826086957px + 5.9217391304 * (100vw - 1025px) / 227, 31.3043478261px); } } @media (max-width: 1024px) { .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) { .banner__title { font-size: clamp(32px, 32px + 4 * (100vw - 375px) / 393, 36px); line-height: clamp(32px, 32px + 4 * (100vw - 375px) / 393, 36px); } } .banner__image { height: inherit; width: 100%; object-fit: cover; object-position: center; border-radius: inherit; } @media (max-width: 1024px) { .banner__image { height: 100%; width: auto; position: absolute; top: 0; right: -2000px; left: -2000px; margin: auto; } .banner__image--vertical { height: auto; width: 100%; top: unset; bottom: 0; } } .banner__image-block { bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: -1; border-radius: inherit; } @media (max-width: 1024px) { .banner__image-block { overflow: hidden; } } .banner__image-block picture { border-radius: inherit; } .banner__picture { border-radius: inherit; height: inherit; } .banner__gradient { background: linear-gradient(270deg, rgba(14, 14, 16, 0) 0%, rgba(14, 14, 16, 0.8) 81%, #0E0E10 100%), radial-gradient(114.55% 87.7% at 589.31% -62.79%, rgba(0, 123, 130, 0.27) 31%, rgba(14, 14, 16, 0) 100%); position: absolute; width: 100%; height: 100%; } .banner__block { width: 100%; max-width: 1572px; } .banner__block { padding: 0px 34.1739130435px; } @media (max-width: 1651px) { .banner__block { padding: clamp(0px, 0px + 0 * (100vw - 1551px) / 100, 0px) clamp(32.4565217391px, 32.4565217391px + 1.7173913043 * (100vw - 1551px) / 100, 34.1739130435px); } } @media (max-width: 1550px) { .banner__block { padding: 0px 26.0869565217px; } } @media (max-width: 1252px) { .banner__block { padding: clamp(0px, 0px + 0 * (100vw - 1025px) / 227, 0px) clamp(21.152173913px, 21.152173913px + 4.9347826087 * (100vw - 1025px) / 227, 26.0869565217px); } } @media (max-width: 1024px) { .banner__block { padding: 0 40px; } } @media (max-width: 767px) { .banner__block { padding: 0 clamp(12px, 12px + 28 * (100vw - 375px) / 393, 40px); } } .banner__data { height: inherit; color: white; display: flex; flex-direction: column; justify-content: center; } .banner__data { gap: 23.9217391304px; } @media (max-width: 1651px) { .banner__data { gap: clamp(22.7195652174px, 22.7195652174px + 1.202173913 * (100vw - 1551px) / 100, 23.9217391304px); } } @media (max-width: 1550px) { .banner__data { gap: 18.2608695652px; } } @media (max-width: 1252px) { .banner__data { gap: clamp(14.8065217391px, 14.8065217391px + 3.4543478261 * (100vw - 1025px) / 227, 18.2608695652px); } } .banner__data { width: 610.8586956522px; } @media (max-width: 1651px) { .banner__data { width: clamp(580.160326087px, 580.160326087px + 30.6983695652 * (100vw - 1551px) / 100, 610.8586956522px); } } @media (max-width: 1550px) { .banner__data { width: 466.3043478261px; } } @media (max-width: 1252px) { .banner__data { width: clamp(378.0951086957px, 378.0951086957px + 88.2092391304 * (100vw - 1025px) / 227, 466.3043478261px); } } @media (max-width: 1024px) { .banner__data { max-width: 508px; width: 100%; gap: 24px; } } @media (max-width: 767px) { .banner__data { gap: 12px; } } .banner__top { display: flex; flex-direction: column; } .banner__top { gap: 10.252173913px; } @media (max-width: 1651px) { .banner__top { gap: clamp(9.7369565217px, 9.7369565217px + 0.5152173913 * (100vw - 1551px) / 100, 10.252173913px); } } @media (max-width: 1550px) { .banner__top { gap: 7.8260869565px; } } @media (max-width: 1252px) { .banner__top { gap: clamp(6.3456521739px, 6.3456521739px + 1.4804347826 * (100vw - 1025px) / 227, 7.8260869565px); } } @media (max-width: 1024px) { .banner__top { gap: 12px; } } .banner__logo { width: 510.9px; } @media (max-width: 1651px) { .banner__logo { width: clamp(485.225px, 485.225px + 25.675 * (100vw - 1551px) / 100, 510.9px); } } @media (max-width: 1550px) { .banner__logo { width: 390px; } } @media (max-width: 1252px) { .banner__logo { width: clamp(316.225px, 316.225px + 73.775 * (100vw - 1025px) / 227, 390px); } } .banner__logo { height: 51.2608695652px; } @media (max-width: 1651px) { .banner__logo { height: clamp(48.6847826087px, 48.6847826087px + 2.5760869565 * (100vw - 1551px) / 100, 51.2608695652px); } } @media (max-width: 1550px) { .banner__logo { height: 39.1304347826px; } } @media (max-width: 1252px) { .banner__logo { height: clamp(31.7282608696px, 31.7282608696px + 7.402173913 * (100vw - 1025px) / 227, 39.1304347826px); } } @media (max-width: 1024px) { .banner__logo { width: clamp(308px, 308px + 290 * (100vw - 768px) / 256, 598px); height: clamp(31px, 31px + 29 * (100vw - 768px) / 256, 60px); } } @media (max-width: 767px) { .banner__logo { width: clamp(222px, 222px + 86 * (100vw - 375px) / 393, 308px); height: clamp(22px, 22px + 9 * (100vw - 375px) / 393, 31px); } } .banner__text { font-weight: 350; } .banner__text { line-height: 20.5043478261px; } @media (max-width: 1651px) { .banner__text { line-height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .banner__text { line-height: 15.652173913px; } } @media (max-width: 1252px) { .banner__text { line-height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } .banner__text { font-size: 17.0869565217px; } @media (max-width: 1651px) { .banner__text { font-size: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .banner__text { font-size: 13.0434782609px; } } @media (max-width: 1252px) { .banner__text { font-size: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } @media (max-width: 1024px) { .banner__text { font-weight: 400; font-size: clamp(14px, 14px + 6 * (100vw - 768px) / 256, 20px); line-height: clamp(20px, 20px + 4 * (100vw - 768px) / 256, 24px); } } @media (max-width: 767px) { .banner__text { display: none; } } .banner__buttons { display: flex; width: max-content; } .banner__buttons { gap: 13.6695652174px; } @media (max-width: 1651px) { .banner__buttons { gap: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .banner__buttons { gap: 10.4347826087px; } } @media (max-width: 1252px) { .banner__buttons { gap: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } @media (max-width: 1024px) { .banner__buttons { gap: 16px; } } @media (max-width: 767px) { .banner__buttons { gap: 8px; } } .banner__link { background: #007B82; border-radius: 8px; color: white; display: flex; align-items: center; font-weight: 500; } .banner__link { padding: 13.6695652174px 20.5043478261px; } @media (max-width: 1651px) { .banner__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__link { padding: 10.4347826087px 15.652173913px; } } @media (max-width: 1252px) { .banner__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__link { line-height: 20.5043478261px; } @media (max-width: 1651px) { .banner__link { line-height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .banner__link { line-height: 15.652173913px; } } @media (max-width: 1252px) { .banner__link { line-height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } @media (max-width: 1024px) { .banner__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); } } @media (max-width: 767px) { .banner__link { padding: clamp(16px, 16px + -4 * (100vw - 375px) / 393, 12px) clamp(16px, 16px + 4 * (100vw - 375px) / 393, 20px); font-size: clamp(12px, 12px + 2 * (100vw - 375px) / 393, 14px); line-height: clamp(16px, 16px + 2 * (100vw - 375px) / 393, 18px); } } .banner__link:hover { background: #33959B; } .banner__download { border: 2px solid #FFFFFF; border-radius: 8px; background: none; color: white; cursor: pointer; display: flex; align-items: center; font-weight: 500; } .banner__download { padding: 13.6695652174px 20.5043478261px; } @media (max-width: 1651px) { .banner__download { 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__download { padding: 10.4347826087px 15.652173913px; } } @media (max-width: 1252px) { .banner__download { 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__download { gap: 6.8347826087px; } @media (max-width: 1651px) { .banner__download { gap: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .banner__download { gap: 5.2173913043px; } } @media (max-width: 1252px) { .banner__download { gap: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } .banner__download { height: 47.8434782609px; } @media (max-width: 1651px) { .banner__download { height: clamp(45.4391304348px, 45.4391304348px + 2.4043478261 * (100vw - 1551px) / 100, 47.8434782609px); } } @media (max-width: 1550px) { .banner__download { height: 36.5217391304px; } } @media (max-width: 1252px) { .banner__download { height: clamp(29.6130434783px, 29.6130434783px + 6.9086956522 * (100vw - 1025px) / 227, 36.5217391304px); } } .banner__download { line-height: 20.5043478261px; } @media (max-width: 1651px) { .banner__download { line-height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .banner__download { line-height: 15.652173913px; } } @media (max-width: 1252px) { .banner__download { line-height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } @media (max-width: 1024px) { .banner__download { padding: 12px 20px; gap: 8px; height: 52px; font-size: clamp(14px, 14px + 2 * (100vw - 768px) / 256, 16px); line-height: clamp(18px, 18px + 6 * (100vw - 768px) / 256, 24px); } } @media (max-width: 767px) { .banner__download { padding: clamp(16px, 16px + -4 * (100vw - 375px) / 393, 12px) clamp(16px, 16px + 4 * (100vw - 375px) / 393, 20px); font-size: clamp(12px, 12px + 2 * (100vw - 375px) / 393, 14px); line-height: clamp(16px, 16px + 2 * (100vw - 375px) / 393, 18px); } } .banner__download:hover { background: white; color: #007B82; } .banner__download:hover .catalog__download-icon { color: #007B82; } .banner__download--link { height: unset; } .banner__download-text { font-size: 13.6695652174px; } @media (max-width: 1651px) { .banner__download-text { font-size: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .banner__download-text { font-size: 10.4347826087px; } } @media (max-width: 1252px) { .banner__download-text { font-size: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } @media (max-width: 1024px) { .banner__download-text { font-size: clamp(14px, 14px + 2 * (100vw - 768px) / 256, 16px); } } @media (max-width: 767px) { .banner__download-text { font-size: clamp(12px, 12px + 2 * (100vw - 375px) / 393, 14px); } } .banner__download-icon { width: 17.0869565217px; } @media (max-width: 1651px) { .banner__download-icon { width: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .banner__download-icon { width: 13.0434782609px; } } @media (max-width: 1252px) { .banner__download-icon { width: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } .banner__download-icon { height: 17.0869565217px; } @media (max-width: 1651px) { .banner__download-icon { height: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .banner__download-icon { height: 13.0434782609px; } } @media (max-width: 1252px) { .banner__download-icon { height: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } @media (max-width: 1024px) { .banner__download-icon { width: 20px; height: 20px; } } @media (max-width: 767px) { .banner__download-icon { width: clamp(7.81px, 7.81px + 12.19 * (100vw - 375px) / 393, 20px); height: clamp(7.81px, 7.81px + 12.19 * (100vw - 375px) / 393, 20px); } } /*!********************************************************************************************************************************************************************************************************************************!*\ !*** 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!./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/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!./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/form/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} */ .form { background: #24282B; box-sizing: border-box; } .form { padding: 59.8043478261px 34.1739130435px; } @media (max-width: 1651px) { .form { padding: clamp(56.7989130435px, 56.7989130435px + 3.0054347826 * (100vw - 1551px) / 100, 59.8043478261px) clamp(32.4565217391px, 32.4565217391px + 1.7173913043 * (100vw - 1551px) / 100, 34.1739130435px); } } @media (max-width: 1550px) { .form { padding: 45.652173913px 26.0869565217px; } } @media (max-width: 1252px) { .form { padding: clamp(37.0163043478px, 37.0163043478px + 8.6358695652 * (100vw - 1025px) / 227, 45.652173913px) clamp(21.152173913px, 21.152173913px + 4.9347826087 * (100vw - 1025px) / 227, 26.0869565217px); } } @media (max-width: 1024px) { .form { padding: clamp(60px, 60px + 10 * (100vw - 768px) / 256, 70px) 40px; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } } @media (max-width: 767px) { .form { padding: clamp(48px, 48px + 12 * (100vw - 375px) / 393, 60px) clamp(12px, 12px + 28 * (100vw - 375px) / 393, 40px); } } .form__body { display: grid; grid-template-columns: 1fr 1fr; } .form__body { column-gap: 17.0869565217px; } @media (max-width: 1651px) { .form__body { column-gap: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .form__body { column-gap: 13.0434782609px; } } @media (max-width: 1252px) { .form__body { column-gap: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } @media (max-width: 1024px) { .form__body { display: block; } } @media (max-width: 1024px) { .form__banner { display: none; } } .form__image { max-width: 100%; object-fit: cover; border-radius: 8px; } .form__image { width: 777.4565217391px; } @media (max-width: 1651px) { .form__image { width: clamp(738.3858695652px, 738.3858695652px + 39.0706521739 * (100vw - 1551px) / 100, 777.4565217391px); } } @media (max-width: 1550px) { .form__image { width: 593.4782608696px; } } @media (max-width: 1252px) { .form__image { width: clamp(481.2119565217px, 481.2119565217px + 112.2663043478 * (100vw - 1025px) / 227, 593.4782608696px); } } .form__image { height: 411.7956521739px; } @media (max-width: 1651px) { .form__image { height: clamp(391.1010869565px, 391.1010869565px + 20.6945652174 * (100vw - 1551px) / 100, 411.7956521739px); } } @media (max-width: 1550px) { .form__image { height: 314.347826087px; } } @media (max-width: 1252px) { .form__image { height: clamp(254.8836956522px, 254.8836956522px + 59.4641304348 * (100vw - 1025px) / 227, 314.347826087px); } } .form__widget { padding-bottom: 4.2717391304px; } @media (max-width: 1651px) { .form__widget { padding-bottom: clamp(4.0570652174px, 4.0570652174px + 0.214673913 * (100vw - 1551px) / 100, 4.2717391304px); } } @media (max-width: 1550px) { .form__widget { padding-bottom: 3.2608695652px; } } @media (max-width: 1252px) { .form__widget { padding-bottom: clamp(2.6440217391px, 2.6440217391px + 0.6168478261 * (100vw - 1025px) / 227, 3.2608695652px); } } .form__title { color: #FFFFFF; } .form__title { font-size: 41.0086956522px; } @media (max-width: 1651px) { .form__title { font-size: clamp(38.947826087px, 38.947826087px + 2.0608695652 * (100vw - 1551px) / 100, 41.0086956522px); } } @media (max-width: 1550px) { .form__title { font-size: 31.3043478261px; } } @media (max-width: 1252px) { .form__title { font-size: clamp(25.3826086957px, 25.3826086957px + 5.9217391304 * (100vw - 1025px) / 227, 31.3043478261px); } } .form__title { line-height: 41.0086956522px; } @media (max-width: 1651px) { .form__title { line-height: clamp(38.947826087px, 38.947826087px + 2.0608695652 * (100vw - 1551px) / 100, 41.0086956522px); } } @media (max-width: 1550px) { .form__title { line-height: 31.3043478261px; } } @media (max-width: 1252px) { .form__title { line-height: clamp(25.3826086957px, 25.3826086957px + 5.9217391304 * (100vw - 1025px) / 227, 31.3043478261px); } } .form__title { margin-bottom: 20.5043478261px; } @media (max-width: 1651px) { .form__title { margin-bottom: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .form__title { margin-bottom: 15.652173913px; } } @media (max-width: 1252px) { .form__title { margin-bottom: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } @media (max-width: 1024px) { .form__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, 24px); } } @media (max-width: 767px) { .form__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); } } .form__inputs { display: grid; grid-template-columns: 1fr 1fr; } .form__inputs { column-gap: 17.0869565217px; } @media (max-width: 1651px) { .form__inputs { column-gap: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .form__inputs { column-gap: 13.0434782609px; } } @media (max-width: 1252px) { .form__inputs { column-gap: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } .form__inputs { row-gap: 13.6695652174px; } @media (max-width: 1651px) { .form__inputs { row-gap: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .form__inputs { row-gap: 10.4347826087px; } } @media (max-width: 1252px) { .form__inputs { row-gap: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } .form__inputs { margin-bottom: 13.6695652174px; } @media (max-width: 1651px) { .form__inputs { margin-bottom: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .form__inputs { margin-bottom: 10.4347826087px; } } @media (max-width: 1252px) { .form__inputs { margin-bottom: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } @media (max-width: 1024px) { .form__inputs { column-gap: clamp(16px, 16px + 4 * (100vw - 768px) / 256, 20px); row-gap: 16px; margin-bottom: 16px; } } @media (max-width: 767px) { .form__inputs { grid-template-columns: 1fr; row-gap: clamp(12px, 12px + 4 * (100vw - 375px) / 393, 16px); margin-bottom: clamp(12px, 12px + 4 * (100vw - 375px) / 393, 16px); } } .form__inputs input { width: 100%; background: #505355; color: #A7A9AA; border: none; border-radius: 8px; box-sizing: border-box; } .form__inputs input { padding: 13.6695652174px; } @media (max-width: 1651px) { .form__inputs input { padding: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .form__inputs input { padding: 10.4347826087px; } } @media (max-width: 1252px) { .form__inputs input { padding: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } @media (max-width: 1024px) { .form__inputs input { padding: 16px; } } .form__inputs input::placeholder { color: #A7A9AA; } .form__inputs input:focus-visible { outline: none; } .form__area { width: 100%; box-sizing: border-box; background: #505355; border: none; border-radius: 8px; color: #A7A9AA; resize: none; } .form__area { padding: 13.6695652174px; } @media (max-width: 1651px) { .form__area { padding: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .form__area { padding: 10.4347826087px; } } @media (max-width: 1252px) { .form__area { padding: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } .form__area { min-height: 173.4326086957px; } @media (max-width: 1651px) { .form__area { min-height: clamp(164.7168478261px, 164.7168478261px + 8.7157608696 * (100vw - 1551px) / 100, 173.4326086957px); } } @media (max-width: 1550px) { .form__area { min-height: 132.3913043478px; } } @media (max-width: 1252px) { .form__area { min-height: clamp(107.3472826087px, 107.3472826087px + 25.0440217391 * (100vw - 1025px) / 227, 132.3913043478px); } } .form__area { margin-bottom: 13.6695652174px; } @media (max-width: 1651px) { .form__area { margin-bottom: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .form__area { margin-bottom: 10.4347826087px; } } @media (max-width: 1252px) { .form__area { margin-bottom: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } @media (max-width: 1024px) { .form__area { min-height: 203px; padding: 16px; margin-bottom: 16px; } } @media (max-width: 767px) { .form__area { min-height: clamp(160px, 160px + 43 * (100vw - 375px) / 393, 203px); margin-bottom: clamp(12px, 12px + 4 * (100vw - 375px) / 393, 16px); } } .form__area::placeholder { color: #A7A9AA; } .form__area:focus-visible { outline: none; } .form__bottom { display: flex; align-items: center; } .form__bottom { gap: 20.5043478261px; } @media (max-width: 1651px) { .form__bottom { gap: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .form__bottom { gap: 15.652173913px; } } @media (max-width: 1252px) { .form__bottom { gap: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } @media (max-width: 1024px) { .form__bottom { gap: 24px; } } @media (max-width: 767px) { .form__bottom { flex-direction: column; gap: 8px; } } .form__submit { color: #FFFFFF; border: none; border-radius: 8px; background: #007B82; width: max-content; cursor: pointer; } .form__submit { padding: 10.252173913px 17.0869565217px; } @media (max-width: 1651px) { .form__submit { padding: clamp(9.7369565217px, 9.7369565217px + 0.5152173913 * (100vw - 1551px) / 100, 10.252173913px) clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .form__submit { padding: 7.8260869565px 13.0434782609px; } } @media (max-width: 1252px) { .form__submit { padding: clamp(6.3456521739px, 6.3456521739px + 1.4804347826 * (100vw - 1025px) / 227, 7.8260869565px) clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } @media (max-width: 1024px) { .form__submit { padding: 12px 20px; } } @media (max-width: 767px) { .form__submit { width: 100%; padding: clamp(16px, 16px + -4 * (100vw - 375px) / 393, 12px) clamp(16px, 16px + 4 * (100vw - 375px) / 393, 20px); } } .form__text { color: #7C7E80; } .form__text { font-size: 11.9608695652px; } @media (max-width: 1651px) { .form__text { font-size: clamp(11.3597826087px, 11.3597826087px + 0.6010869565 * (100vw - 1551px) / 100, 11.9608695652px); } } @media (max-width: 1550px) { .form__text { font-size: 9.1304347826px; } } @media (max-width: 1252px) { .form__text { font-size: clamp(7.4032608696px, 7.4032608696px + 1.727173913 * (100vw - 1025px) / 227, 9.1304347826px); } } .form__text { line-height: 17.0869565217px; } @media (max-width: 1651px) { .form__text { line-height: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px); } } @media (max-width: 1550px) { .form__text { line-height: 13.0434782609px; } } @media (max-width: 1252px) { .form__text { line-height: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px); } } .form__text { max-width: 316.1086956522px; } @media (max-width: 1651px) { .form__text { max-width: clamp(300.222826087px, 300.222826087px + 15.8858695652 * (100vw - 1551px) / 100, 316.1086956522px); } } @media (max-width: 1550px) { .form__text { max-width: 241.3043478261px; } } @media (max-width: 1252px) { .form__text { max-width: clamp(195.6576086957px, 195.6576086957px + 45.6467391304 * (100vw - 1025px) / 227, 241.3043478261px); } } @media (max-width: 1024px) { .form__text { font-size: clamp(12px, 12px + 2 * (100vw - 768px) / 256, 14px); line-height: clamp(16px, 16px + 4 * (100vw - 768px) / 256, 20px); max-width: 100%; } } .contacts__about { width: 100%; background: no-repeat left, bottom; background-size: cover; box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: #FFFFFF; } .contacts__about { height: 427.1739130435px; } @media (max-width: 1651px) { .contacts__about { height: clamp(405.7065217391px, 405.7065217391px + 21.4673913043 * (100vw - 1551px) / 100, 427.1739130435px); } } @media (max-width: 1550px) { .contacts__about { height: 326.0869565217px; } } @media (max-width: 1252px) { .contacts__about { height: clamp(264.402173913px, 264.402173913px + 61.6847826087 * (100vw - 1025px) / 227, 326.0869565217px); } } @media (min-width: 1025px) { .contacts__about { background-image: url(/res/images/4dfcb36e95be2c0d9487.png); } .contacts__about { border-radius: 6.8347826087px; } } @media (min-width: 1025px) and (max-width: 1651px) { .contacts__about { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (min-width: 1025px) and (max-width: 1550px) { .contacts__about { border-radius: 5.2173913043px; } } @media (min-width: 1025px) and (max-width: 1252px) { .contacts__about { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } @media (max-width: 1024px) { .contacts__about { background-image: url(/res/images/f6f07d611848199ba435.png); border-radius: 8px; } } @media (max-width: 767px) { .contacts__about { padding: 0 12px; } } @media (max-width: 600px) { .contacts__about { background-image: url(/res/images/15c87de2361e99475cbd.png); } } @media (min-width: 1025px) { .contacts__about--margin-bottom { margin-bottom: 68.347826087px; } } @media (min-width: 1025px) and (max-width: 1651px) { .contacts__about--margin-bottom { margin-bottom: clamp(64.9130434783px, 64.9130434783px + 3.4347826087 * (100vw - 1551px) / 100, 68.347826087px); } } @media (min-width: 1025px) and (max-width: 1550px) { .contacts__about--margin-bottom { margin-bottom: 52.1739130435px; } } @media (min-width: 1025px) and (max-width: 1252px) { .contacts__about--margin-bottom { margin-bottom: clamp(42.3043478261px, 42.3043478261px + 9.8695652174 * (100vw - 1025px) / 227, 52.1739130435px); } } @media (max-width: 1024px) { .contacts__about--margin-bottom { margin-bottom: 80px; } } @media (max-width: 767px) { .contacts__about--margin-bottom { margin-bottom: clamp(60px, 60px + 20 * (100vw - 375px) / 393, 80px); } } .contacts__about-banner { display: flex; flex-direction: column; align-items: center; } .contacts__about-banner { gap: 25.6304347826px; } @media (max-width: 1651px) { .contacts__about-banner { gap: clamp(24.3423913043px, 24.3423913043px + 1.2880434783 * (100vw - 1551px) / 100, 25.6304347826px); } } @media (max-width: 1550px) { .contacts__about-banner { gap: 19.5652173913px; } } @media (max-width: 1252px) { .contacts__about-banner { gap: clamp(15.8641304348px, 15.8641304348px + 3.7010869565 * (100vw - 1025px) / 227, 19.5652173913px); } } .contacts__about-banner-title { font-weight: 500; } .contacts__about-banner-title { font-size: 41.0086956522px; } @media (max-width: 1651px) { .contacts__about-banner-title { font-size: clamp(38.947826087px, 38.947826087px + 2.0608695652 * (100vw - 1551px) / 100, 41.0086956522px); } } @media (max-width: 1550px) { .contacts__about-banner-title { font-size: 31.3043478261px; } } @media (max-width: 1252px) { .contacts__about-banner-title { font-size: clamp(25.3826086957px, 25.3826086957px + 5.9217391304 * (100vw - 1025px) / 227, 31.3043478261px); } } .contacts__about-banner-title { line-height: 41.0086956522px; } @media (max-width: 1651px) { .contacts__about-banner-title { line-height: clamp(38.947826087px, 38.947826087px + 2.0608695652 * (100vw - 1551px) / 100, 41.0086956522px); } } @media (max-width: 1550px) { .contacts__about-banner-title { line-height: 31.3043478261px; } } @media (max-width: 1252px) { .contacts__about-banner-title { line-height: clamp(25.3826086957px, 25.3826086957px + 5.9217391304 * (100vw - 1025px) / 227, 31.3043478261px); } } @media (max-width: 1024px) { .contacts__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) { .contacts__about-banner-title { font-size: clamp(28px, 28px + 8 * (100vw - 375px) / 393, 36px); line-height: clamp(28px, 28px + 8 * (100vw - 375px) / 393, 36px); } } .contacts__about-banner-link { background: #007B82; color: #FFFFFF; width: max-content; border: none; font-weight: 500; cursor: pointer; } .contacts__about-banner-link { padding: 17.0869565217px 20.5043478261px; } @media (max-width: 1651px) { .contacts__about-banner-link { padding: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px) clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px); } } @media (max-width: 1550px) { .contacts__about-banner-link { padding: 13.0434782609px 15.652173913px; } } @media (max-width: 1252px) { .contacts__about-banner-link { padding: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px) clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px); } } .contacts__about-banner-link { font-size: 13.6695652174px; } @media (max-width: 1651px) { .contacts__about-banner-link { font-size: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .contacts__about-banner-link { font-size: 10.4347826087px; } } @media (max-width: 1252px) { .contacts__about-banner-link { font-size: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } .contacts__about-banner-link { line-height: 13.6695652174px; } @media (max-width: 1651px) { .contacts__about-banner-link { line-height: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px); } } @media (max-width: 1550px) { .contacts__about-banner-link { line-height: 10.4347826087px; } } @media (max-width: 1252px) { .contacts__about-banner-link { line-height: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px); } } .contacts__about-banner-link { border-radius: 6.8347826087px; } @media (max-width: 1651px) { .contacts__about-banner-link { border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px); } } @media (max-width: 1550px) { .contacts__about-banner-link { border-radius: 5.2173913043px; } } @media (max-width: 1252px) { .contacts__about-banner-link { border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px); } } @media (max-width: 1024px) { .contacts__about-banner-link { padding: clamp(14px, 14px + 2 * (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(14px, 14px + 2 * (100vw - 768px) / 256, 16px); border-radius: 8px; } } @media (max-width: 767px) { .contacts__about-banner-link { width: 100%; } } .contacts__about-banner-link:hover { background: #33959B; } /*!***********************************************************************************************************************************************************************************************************************************!*\ !*** 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/brandPage/45ba26caa4702ab9d9ca.css?1756987864159691 */