/* Start:/res/sectionsPage/836dbb5d730c196b624c.css?176423870716399*/
/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** 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/sections/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}
 */
.sections {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.sections {
  margin-bottom: 76.8913043478px;
}
@media (max-width: 1651px) {
  .sections {
    margin-bottom: clamp(73.027173913px, 73.027173913px + 3.8641304348 * (100vw - 1551px) / 100, 76.8913043478px);
  }
}
@media (max-width: 1550px) {
  .sections {
    margin-bottom: 58.6956521739px;
  }
}
@media (max-width: 1252px) {
  .sections {
    margin-bottom: clamp(47.5923913043px, 47.5923913043px + 11.1032608696 * (100vw - 1025px) / 227, 58.6956521739px);
  }
}
.sections {
  gap: 17.0869565217px;
}
@media (max-width: 1651px) {
  .sections {
    gap: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px);
  }
}
@media (max-width: 1550px) {
  .sections {
    gap: 13.0434782609px;
  }
}
@media (max-width: 1252px) {
  .sections {
    gap: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px);
  }
}
@media (max-width: 1024px) {
  .sections {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: clamp(60px, 60px + 30 * (100vw - 768px) / 256, 90px);
    gap: clamp(16px, 16px + 4 * (100vw - 768px) / 256, 20px);
  }
}
@media (max-width: 767px) {
  .sections {
    margin-bottom: clamp(48px, 48px + 12 * (100vw - 375px) / 393, 60px);
    gap: unset;
    column-gap: clamp(10px, 10px + 6 * (100vw - 375px) / 393, 16px);
    row-gap: clamp(8px, 8px + 8 * (100vw - 375px) / 393, 16px);
  }
}
.sections__item {
  background: #F5F6F8;
}
.sections__item {
  border-radius: 6.8347826087px;
}
@media (max-width: 1651px) {
  .sections__item {
    border-radius: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px);
  }
}
@media (max-width: 1550px) {
  .sections__item {
    border-radius: 5.2173913043px;
  }
}
@media (max-width: 1252px) {
  .sections__item {
    border-radius: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px);
  }
}
.sections__item {
  padding-top: 20.5043478261px;
}
@media (max-width: 1651px) {
  .sections__item {
    padding-top: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px);
  }
}
@media (max-width: 1550px) {
  .sections__item {
    padding-top: 15.652173913px;
  }
}
@media (max-width: 1252px) {
  .sections__item {
    padding-top: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px);
  }
}
@media (max-width: 1024px) {
  .sections__item {
    border-radius: 8px;
    padding-top: 24px;
  }
}
@media (max-width: 767px) {
  .sections__item {
    padding-top: clamp(20px, 20px + 4 * (100vw - 375px) / 393, 24px);
  }
}
.sections__header {
  display: flex;
  flex-direction: column;
}
.sections__header {
  gap: 6.8347826087px;
}
@media (max-width: 1651px) {
  .sections__header {
    gap: clamp(6.4913043478px, 6.4913043478px + 0.3434782609 * (100vw - 1551px) / 100, 6.8347826087px);
  }
}
@media (max-width: 1550px) {
  .sections__header {
    gap: 5.2173913043px;
  }
}
@media (max-width: 1252px) {
  .sections__header {
    gap: clamp(4.2304347826px, 4.2304347826px + 0.9869565217 * (100vw - 1025px) / 227, 5.2173913043px);
  }
}
.sections__header {
  height: 64.9304347826px;
}
@media (max-width: 1651px) {
  .sections__header {
    height: clamp(61.6673913043px, 61.6673913043px + 3.2630434783 * (100vw - 1551px) / 100, 64.9304347826px);
  }
}
@media (max-width: 1550px) {
  .sections__header {
    height: 49.5652173913px;
  }
}
@media (max-width: 1252px) {
  .sections__header {
    height: clamp(40.1891304348px, 40.1891304348px + 9.3760869565 * (100vw - 1025px) / 227, 49.5652173913px);
  }
}
.sections__header {
  padding: 0px 27.3391304348px;
}
@media (max-width: 1651px) {
  .sections__header {
    padding: clamp(0px, 0px + 0 * (100vw - 1551px) / 100, 0px) clamp(25.9652173913px, 25.9652173913px + 1.3739130435 * (100vw - 1551px) / 100, 27.3391304348px);
  }
}
@media (max-width: 1550px) {
  .sections__header {
    padding: 0px 20.8695652174px;
  }
}
@media (max-width: 1252px) {
  .sections__header {
    padding: clamp(0px, 0px + 0 * (100vw - 1025px) / 227, 0px) clamp(16.9217391304px, 16.9217391304px + 3.947826087 * (100vw - 1025px) / 227, 20.8695652174px);
  }
}
@media (max-width: 1024px) {
  .sections__header {
    gap: 8px;
    height: clamp(68px, 68px + 8 * (100vw - 768px) / 256, 76px);
    padding: 0 clamp(24px, 24px + 8 * (100vw - 768px) / 256, 32px);
  }
}
@media (max-width: 767px) {
  .sections__header {
    gap: clamp(4px, 4px + 4 * (100vw - 375px) / 393, 8px);
    height: clamp(60px, 60px + 8 * (100vw - 375px) / 393, 68px);
    padding: 0 clamp(16px, 16px + 8 * (100vw - 375px) / 393, 24px);
  }
}
.sections__title {
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  hyphens: auto;
}
.sections__title {
  font-size: 17.0869565217px;
}
@media (max-width: 1651px) {
  .sections__title {
    font-size: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px);
  }
}
@media (max-width: 1550px) {
  .sections__title {
    font-size: 13.0434782609px;
  }
}
@media (max-width: 1252px) {
  .sections__title {
    font-size: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px);
  }
}
.sections__title {
  line-height: 20.5043478261px;
}
@media (max-width: 1651px) {
  .sections__title {
    line-height: clamp(19.4739130435px, 19.4739130435px + 1.0304347826 * (100vw - 1551px) / 100, 20.5043478261px);
  }
}
@media (max-width: 1550px) {
  .sections__title {
    line-height: 15.652173913px;
  }
}
@media (max-width: 1252px) {
  .sections__title {
    line-height: clamp(12.6913043478px, 12.6913043478px + 2.9608695652 * (100vw - 1025px) / 227, 15.652173913px);
  }
}
@media (max-width: 1024px) {
  .sections__title {
    font-size: clamp(16px, 16px + 4 * (100vw - 768px) / 256, 20px);
    line-height: clamp(20px, 20px + 4 * (100vw - 768px) / 256, 24px);
  }
}
@media (max-width: 767px) {
  .sections__title {
    font-size: clamp(14px, 14px + 2 * (100vw - 375px) / 393, 16px);
  }
}
.sections__count {
  color: #505355;
}
.sections__count {
  font-size: 13.6695652174px;
}
@media (max-width: 1651px) {
  .sections__count {
    font-size: clamp(12.9826086957px, 12.9826086957px + 0.6869565217 * (100vw - 1551px) / 100, 13.6695652174px);
  }
}
@media (max-width: 1550px) {
  .sections__count {
    font-size: 10.4347826087px;
  }
}
@media (max-width: 1252px) {
  .sections__count {
    font-size: clamp(8.4608695652px, 8.4608695652px + 1.9739130435 * (100vw - 1025px) / 227, 10.4347826087px);
  }
}
.sections__count {
  line-height: 17.0869565217px;
}
@media (max-width: 1651px) {
  .sections__count {
    line-height: clamp(16.2282608696px, 16.2282608696px + 0.8586956522 * (100vw - 1551px) / 100, 17.0869565217px);
  }
}
@media (max-width: 1550px) {
  .sections__count {
    line-height: 13.0434782609px;
  }
}
@media (max-width: 1252px) {
  .sections__count {
    line-height: clamp(10.5760869565px, 10.5760869565px + 2.4673913043 * (100vw - 1025px) / 227, 13.0434782609px);
  }
}
@media (max-width: 1024px) {
  .sections__count {
    font-size: 16px;
    line-height: 20px;
  }
}
@media (max-width: 767px) {
  .sections__count {
    font-size: clamp(12px, 12px + 4 * (100vw - 375px) / 393, 16px);
    line-height: clamp(16px, 16px + 4 * (100vw - 375px) / 393, 20px);
  }
}
.sections__body {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.sections__body {
  padding: 46.1347826087px 52.5423913043px;
}
@media (max-width: 1651px) {
  .sections__body {
    padding: clamp(43.8163043478px, 43.8163043478px + 2.3184782609 * (100vw - 1551px) / 100, 46.1347826087px) clamp(49.9019021739px, 49.9019021739px + 2.6404891304 * (100vw - 1551px) / 100, 52.5423913043px);
  }
}
@media (max-width: 1550px) {
  .sections__body {
    padding: 35.2173913043px 40.1086956522px;
  }
}
@media (max-width: 1252px) {
  .sections__body {
    padding: clamp(28.5554347826px, 28.5554347826px + 6.6619565217 * (100vw - 1025px) / 227, 35.2173913043px) clamp(32.5214673913px, 32.5214673913px + 7.5872282609 * (100vw - 1025px) / 227, 40.1086956522px);
  }
}
@media (max-width: 1024px) {
  .sections__body {
    padding: clamp(44px, 44px + 10 * (100vw - 768px) / 256, 54px) clamp(72px, 72px + -10.5 * (100vw - 768px) / 256, 61.5px) clamp(44px, 44px + 10 * (100vw - 768px) / 256, 54px) clamp(62px, 62px + -0.5 * (100vw - 768px) / 256, 61.5px);
  }
}
@media (max-width: 767px) {
  .sections__body {
    padding: clamp(32px, 32px + 12 * (100vw - 768px) / 256, 44px) clamp(15px, 15px + 57 * (100vw - 768px) / 256, 72px) clamp(32px, 32px + 12 * (100vw - 768px) / 256, 44px) clamp(15px, 15px + 47 * (100vw - 768px) / 256, 62px);
  }
}
.sections__image {
  object-fit: cover;
}
.sections__image {
  width: 275.1px;
}
@media (max-width: 1651px) {
  .sections__image {
    width: clamp(261.275px, 261.275px + 13.825 * (100vw - 1551px) / 100, 275.1px);
  }
}
@media (max-width: 1550px) {
  .sections__image {
    width: 210px;
  }
}
@media (max-width: 1252px) {
  .sections__image {
    width: clamp(170.275px, 170.275px + 39.725 * (100vw - 1025px) / 227, 210px);
  }
}
.sections__image {
  height: 164.0347826087px;
}
@media (max-width: 1651px) {
  .sections__image {
    height: clamp(155.7913043478px, 155.7913043478px + 8.2434782609 * (100vw - 1551px) / 100, 164.0347826087px);
  }
}
@media (max-width: 1550px) {
  .sections__image {
    height: 125.2173913043px;
  }
}
@media (max-width: 1252px) {
  .sections__image {
    height: clamp(101.5304347826px, 101.5304347826px + 23.6869565217 * (100vw - 1025px) / 227, 125.2173913043px);
  }
}
@media (max-width: 1024px) {
  .sections__image {
    width: clamp(202px, 202px + 120 * (100vw - 768px) / 256, 322px);
    height: clamp(120px, 120px + 72 * (100vw - 768px) / 256, 192px);
  }
}
@media (max-width: 767px) {
  .sections__image {
    width: clamp(140px, 140px + 62 * (100vw - 375px) / 393, 202px);
    height: clamp(84px, 84px + 36 * (100vw - 375px) / 393, 120px);
  }
}
/*!************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/src/TextTruncationController/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************/
.text-truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--line-clamp);
  overflow: hidden;
}
.text-truncate--active {
  text-overflow: ellipsis;
}

/* End */
/* /res/sectionsPage/836dbb5d730c196b624c.css?176423870716399 */