/*!***************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/style/layout/work.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.desc-margin-top {
  margin-top: 1rem !important; }
  @media (min-width: 451px) {
    .desc-margin-top {
      margin-top: 1.5rem !important; } }
  @media (min-width: 951px) {
    .desc-margin-top {
      margin-top: 2rem !important; } }

.desc-margin-bottom {
  margin-bottom: 1rem !important; }
  @media (min-width: 451px) {
    .desc-margin-bottom {
      margin-bottom: 1.5rem !important; } }
  @media (min-width: 951px) {
    .desc-margin-bottom {
      margin-bottom: 2rem !important; } }

.desc-padding-top {
  padding-top: 1rem !important; }
  @media (min-width: 451px) {
    .desc-padding-top {
      padding-top: 1.5rem !important; } }
  @media (min-width: 951px) {
    .desc-padding-top {
      padding-top: 2rem !important; } }

.desc-padding-bottom {
  padding-bottom: 1rem !important; }
  @media (min-width: 451px) {
    .desc-padding-bottom {
      padding-bottom: 1.5rem !important; } }
  @media (min-width: 951px) {
    .desc-padding-bottom {
      padding-bottom: 2rem !important; } }

.content-margin-top {
  margin-top: 2rem !important; }
  @media (min-width: 451px) {
    .content-margin-top {
      margin-top: 2.5rem !important; } }
  @media (min-width: 661px) {
    .content-margin-top {
      margin-top: 3rem !important; } }
  @media (min-width: 951px) {
    .content-margin-top {
      margin-top: 3.5rem !important; } }
  @media (min-width: 1281px) {
    .content-margin-top {
      margin-top: 4rem !important; } }

.content-margin-bottom {
  margin-bottom: 2rem !important; }
  @media (min-width: 451px) {
    .content-margin-bottom {
      margin-bottom: 2.5rem !important; } }
  @media (min-width: 661px) {
    .content-margin-bottom {
      margin-bottom: 3rem !important; } }
  @media (min-width: 951px) {
    .content-margin-bottom {
      margin-bottom: 3.5rem !important; } }
  @media (min-width: 1281px) {
    .content-margin-bottom {
      margin-bottom: 4rem !important; } }

.content-padding-top {
  padding-top: 2rem !important; }
  @media (min-width: 451px) {
    .content-padding-top {
      padding-top: 2.5rem !important; } }
  @media (min-width: 661px) {
    .content-padding-top {
      padding-top: 3rem !important; } }
  @media (min-width: 951px) {
    .content-padding-top {
      padding-top: 3.5rem !important; } }
  @media (min-width: 1281px) {
    .content-padding-top {
      padding-top: 4rem !important; } }

.content-padding-bottom {
  padding-bottom: 2rem !important; }
  @media (min-width: 451px) {
    .content-padding-bottom {
      padding-bottom: 2.5rem !important; } }
  @media (min-width: 661px) {
    .content-padding-bottom {
      padding-bottom: 3rem !important; } }
  @media (min-width: 951px) {
    .content-padding-bottom {
      padding-bottom: 3.5rem !important; } }
  @media (min-width: 1281px) {
    .content-padding-bottom {
      padding-bottom: 4rem !important; } }

.block-margin-top {
  margin-top: 4rem !important; }
  @media (min-width: 451px) {
    .block-margin-top {
      margin-top: 4.5rem !important; } }
  @media (min-width: 661px) {
    .block-margin-top {
      margin-top: 5rem !important; } }
  @media (min-width: 951px) {
    .block-margin-top {
      margin-top: 6rem !important; } }
  @media (min-width: 1281px) {
    .block-margin-top {
      margin-top: 8rem !important; } }

.block-margin-bottom {
  margin-bottom: 4rem !important; }
  @media (min-width: 451px) {
    .block-margin-bottom {
      margin-bottom: 4.5rem !important; } }
  @media (min-width: 661px) {
    .block-margin-bottom {
      margin-bottom: 5rem !important; } }
  @media (min-width: 951px) {
    .block-margin-bottom {
      margin-bottom: 6rem !important; } }
  @media (min-width: 1281px) {
    .block-margin-bottom {
      margin-bottom: 8rem !important; } }

.block-padding-top {
  padding-top: 4rem !important; }
  @media (min-width: 451px) {
    .block-padding-top {
      padding-top: 4.5rem !important; } }
  @media (min-width: 661px) {
    .block-padding-top {
      padding-top: 5rem !important; } }
  @media (min-width: 951px) {
    .block-padding-top {
      padding-top: 6rem !important; } }
  @media (min-width: 1281px) {
    .block-padding-top {
      padding-top: 8rem !important; } }

.block-padding-bottom {
  padding-bottom: 4rem !important; }
  @media (min-width: 451px) {
    .block-padding-bottom {
      padding-bottom: 4.5rem !important; } }
  @media (min-width: 661px) {
    .block-padding-bottom {
      padding-bottom: 5rem !important; } }
  @media (min-width: 951px) {
    .block-padding-bottom {
      padding-bottom: 6rem !important; } }
  @media (min-width: 1281px) {
    .block-padding-bottom {
      padding-bottom: 8rem !important; } }

.large-margin-top {
  margin-top: 4rem !important; }
  @media (min-width: 451px) {
    .large-margin-top {
      margin-top: 4.25rem !important; } }
  @media (min-width: 661px) {
    .large-margin-top {
      margin-top: 5rem !important; } }
  @media (min-width: 951px) {
    .large-margin-top {
      margin-top: 6.5rem !important; } }
  @media (min-width: 1281px) {
    .large-margin-top {
      margin-top: 6rem !important; } }

.large-margin-bottom {
  margin-bottom: 4rem !important; }
  @media (min-width: 451px) {
    .large-margin-bottom {
      margin-bottom: 4.25rem !important; } }
  @media (min-width: 661px) {
    .large-margin-bottom {
      margin-bottom: 5rem !important; } }
  @media (min-width: 951px) {
    .large-margin-bottom {
      margin-bottom: 6.5rem !important; } }
  @media (min-width: 1281px) {
    .large-margin-bottom {
      margin-bottom: 6rem !important; } }

.large-padding-top {
  padding-top: 4rem !important; }
  @media (min-width: 451px) {
    .large-padding-top {
      padding-top: 4.25rem !important; } }
  @media (min-width: 661px) {
    .large-padding-top {
      padding-top: 5rem !important; } }
  @media (min-width: 951px) {
    .large-padding-top {
      padding-top: 6.5rem !important; } }
  @media (min-width: 1281px) {
    .large-padding-top {
      padding-top: 6rem !important; } }

.large-padding-bottom {
  padding-bottom: 4rem !important; }
  @media (min-width: 451px) {
    .large-padding-bottom {
      padding-bottom: 4.25rem !important; } }
  @media (min-width: 661px) {
    .large-padding-bottom {
      padding-bottom: 5rem !important; } }
  @media (min-width: 951px) {
    .large-padding-bottom {
      padding-bottom: 6.5rem !important; } }
  @media (min-width: 1281px) {
    .large-padding-bottom {
      padding-bottom: 6rem !important; } }

.gutter-margin-top {
  margin-top: 0.5rem !important; }
  @media (min-width: 451px) {
    .gutter-margin-top {
      margin-top: 1rem !important; } }
  @media (min-width: 661px) {
    .gutter-margin-top {
      margin-top: 1.5rem !important; } }
  @media (min-width: 951px) {
    .gutter-margin-top {
      margin-top: 1.25rem !important; } }
  @media (min-width: 1281px) {
    .gutter-margin-top {
      margin-top: 2rem !important; } }

.gutter-margin-bottom {
  margin-bottom: 0.5rem !important; }
  @media (min-width: 451px) {
    .gutter-margin-bottom {
      margin-bottom: 1rem !important; } }
  @media (min-width: 661px) {
    .gutter-margin-bottom {
      margin-bottom: 1.5rem !important; } }
  @media (min-width: 951px) {
    .gutter-margin-bottom {
      margin-bottom: 1.25rem !important; } }
  @media (min-width: 1281px) {
    .gutter-margin-bottom {
      margin-bottom: 2rem !important; } }

.gutter-padding-top {
  padding-top: 0.5rem !important; }
  @media (min-width: 451px) {
    .gutter-padding-top {
      padding-top: 1rem !important; } }
  @media (min-width: 661px) {
    .gutter-padding-top {
      padding-top: 1.5rem !important; } }
  @media (min-width: 951px) {
    .gutter-padding-top {
      padding-top: 1.25rem !important; } }
  @media (min-width: 1281px) {
    .gutter-padding-top {
      padding-top: 2rem !important; } }

.gutter-padding-bottom {
  padding-bottom: 0.5rem !important; }
  @media (min-width: 451px) {
    .gutter-padding-bottom {
      padding-bottom: 1rem !important; } }
  @media (min-width: 661px) {
    .gutter-padding-bottom {
      padding-bottom: 1.5rem !important; } }
  @media (min-width: 951px) {
    .gutter-padding-bottom {
      padding-bottom: 1.25rem !important; } }
  @media (min-width: 1281px) {
    .gutter-padding-bottom {
      padding-bottom: 2rem !important; } }

/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
.l-content-max-width {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem; }
  @media (max-width: 1920px) {
    .l-content-max-width {
      padding-left: 7rem;
      padding-right: 7rem; } }
  @media (max-width: 1280px) {
    .l-content-max-width {
      padding-left: 4rem;
      padding-right: 4rem; } }
  @media (max-width: 950px) {
    .l-content-max-width {
      padding-left: 2.5rem;
      padding-right: 2.5rem; } }
  @media (max-width: 660px) {
    .l-content-max-width {
      padding-left: 1.5rem;
      padding-right: 1.5rem; } }
  @media (max-width: 450px) {
    .l-content-max-width {
      padding-left: 1rem;
      padding-right: 1rem; } }
  @media (max-width: 320px) {
    .l-content-max-width {
      padding-left: 1rem;
      padding-right: 1rem; } }
  @media (min-width: 1920px) {
    .l-content-max-width {
      padding-left: 7rem;
      padding-right: 7rem; } }

@media (max-width: 1920px) {
  .l-stretch-left {
    margin-left: 0 !important; } }

@media (max-width: 1280px) {
  .l-stretch-left {
    margin-left: 0 !important; } }

@media (max-width: 950px) {
  .l-stretch-left {
    margin-left: 0 !important; } }

@media (max-width: 660px) {
  .l-stretch-left {
    margin-left: 0 !important; } }

@media (max-width: 450px) {
  .l-stretch-left {
    margin-left: 0 !important; } }

@media (max-width: 320px) {
  .l-stretch-left {
    margin-left: 0 !important; } }

@media (min-width: 1920px) {
  .l-stretch-left {
    margin-left: 0 !important; } }

@media (max-width: 1920px) {
  .l-stretch-left .l-stretch-content {
    padding-left: 0 !important; } }

@media (max-width: 1280px) {
  .l-stretch-left .l-stretch-content {
    padding-left: 0 !important; } }

@media (max-width: 950px) {
  .l-stretch-left .l-stretch-content {
    padding-left: 0 !important; } }

@media (max-width: 660px) {
  .l-stretch-left .l-stretch-content {
    padding-left: 0 !important; } }

@media (max-width: 450px) {
  .l-stretch-left .l-stretch-content {
    padding-left: 0 !important; } }

@media (max-width: 320px) {
  .l-stretch-left .l-stretch-content {
    padding-left: 0 !important; } }

@media (min-width: 1920px) {
  .l-stretch-left .l-stretch-content {
    padding-left: 0 !important; } }

@media (max-width: 1920px) {
  .l-stretch-left .l-stretch-content-margin {
    margin-left: 0 !important; } }

@media (max-width: 1280px) {
  .l-stretch-left .l-stretch-content-margin {
    margin-left: 0 !important; } }

@media (max-width: 950px) {
  .l-stretch-left .l-stretch-content-margin {
    margin-left: 0 !important; } }

@media (max-width: 660px) {
  .l-stretch-left .l-stretch-content-margin {
    margin-left: 0 !important; } }

@media (max-width: 450px) {
  .l-stretch-left .l-stretch-content-margin {
    margin-left: 0 !important; } }

@media (max-width: 320px) {
  .l-stretch-left .l-stretch-content-margin {
    margin-left: 0 !important; } }

@media (min-width: 1920px) {
  .l-stretch-left .l-stretch-content-margin {
    margin-left: 0 !important; } }

@media (max-width: 1920px) {
  .l-stretch-right {
    margin-right: 0 !important; } }

@media (max-width: 1280px) {
  .l-stretch-right {
    margin-right: 0 !important; } }

@media (max-width: 950px) {
  .l-stretch-right {
    margin-right: 0 !important; } }

@media (max-width: 660px) {
  .l-stretch-right {
    margin-right: 0 !important; } }

@media (max-width: 450px) {
  .l-stretch-right {
    margin-right: 0 !important; } }

@media (max-width: 320px) {
  .l-stretch-right {
    margin-right: 0 !important; } }

@media (min-width: 1920px) {
  .l-stretch-right {
    margin-right: 0 !important; } }

@media (max-width: 1920px) {
  .l-stretch-right .l-stretch-content {
    padding-right: 0 !important; } }

@media (max-width: 1280px) {
  .l-stretch-right .l-stretch-content {
    padding-right: 0 !important; } }

@media (max-width: 950px) {
  .l-stretch-right .l-stretch-content {
    padding-right: 0 !important; } }

@media (max-width: 660px) {
  .l-stretch-right .l-stretch-content {
    padding-right: 0 !important; } }

@media (max-width: 450px) {
  .l-stretch-right .l-stretch-content {
    padding-right: 0 !important; } }

@media (max-width: 320px) {
  .l-stretch-right .l-stretch-content {
    padding-right: 0 !important; } }

@media (min-width: 1920px) {
  .l-stretch-right .l-stretch-content {
    padding-right: 0 !important; } }

@media (max-width: 1920px) {
  .l-stretch-right .l-stretch-content-margin {
    margin-right: 0 !important; } }

@media (max-width: 1280px) {
  .l-stretch-right .l-stretch-content-margin {
    margin-right: 0 !important; } }

@media (max-width: 950px) {
  .l-stretch-right .l-stretch-content-margin {
    margin-right: 0 !important; } }

@media (max-width: 660px) {
  .l-stretch-right .l-stretch-content-margin {
    margin-right: 0 !important; } }

@media (max-width: 450px) {
  .l-stretch-right .l-stretch-content-margin {
    margin-right: 0 !important; } }

@media (max-width: 320px) {
  .l-stretch-right .l-stretch-content-margin {
    margin-right: 0 !important; } }

@media (min-width: 1920px) {
  .l-stretch-right .l-stretch-content-margin {
    margin-right: 0 !important; } }

@media (max-width: 1920px) {
  .l-stretch-all {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 1280px) {
  .l-stretch-all {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 950px) {
  .l-stretch-all {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 660px) {
  .l-stretch-all {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 450px) {
  .l-stretch-all {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 320px) {
  .l-stretch-all {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (min-width: 1920px) {
  .l-stretch-all {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 1920px) {
  .l-stretch-all .l-stretch-content {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

@media (max-width: 1280px) {
  .l-stretch-all .l-stretch-content {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

@media (max-width: 950px) {
  .l-stretch-all .l-stretch-content {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

@media (max-width: 660px) {
  .l-stretch-all .l-stretch-content {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

@media (max-width: 450px) {
  .l-stretch-all .l-stretch-content {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

@media (max-width: 320px) {
  .l-stretch-all .l-stretch-content {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

@media (min-width: 1920px) {
  .l-stretch-all .l-stretch-content {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

@media (max-width: 1920px) {
  .l-stretch-all .l-stretch-content-margin {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 1280px) {
  .l-stretch-all .l-stretch-content-margin {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 950px) {
  .l-stretch-all .l-stretch-content-margin {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 660px) {
  .l-stretch-all .l-stretch-content-margin {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 450px) {
  .l-stretch-all .l-stretch-content-margin {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 320px) {
  .l-stretch-all .l-stretch-content-margin {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (min-width: 1920px) {
  .l-stretch-all .l-stretch-content-margin {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 1920px) {
  .l-stretch-left-all {
    margin-left: -7rem !important; } }

@media (max-width: 1280px) {
  .l-stretch-left-all {
    margin-left: -4rem !important; } }

@media (max-width: 950px) {
  .l-stretch-left-all {
    margin-left: -2.5rem !important; } }

@media (max-width: 660px) {
  .l-stretch-left-all {
    margin-left: -1.5rem !important; } }

@media (max-width: 450px) {
  .l-stretch-left-all {
    margin-left: -1rem !important; } }

@media (max-width: 320px) {
  .l-stretch-left-all {
    margin-left: -1rem !important; } }

@media (min-width: 1920px) {
  .l-stretch-left-all {
    margin-left: -7rem !important; } }

@media (max-width: 1920px) {
  .l-stretch-left-all .l-stretch-content {
    padding-left: 7rem !important; } }

@media (max-width: 1280px) {
  .l-stretch-left-all .l-stretch-content {
    padding-left: 4rem !important; } }

@media (max-width: 950px) {
  .l-stretch-left-all .l-stretch-content {
    padding-left: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-stretch-left-all .l-stretch-content {
    padding-left: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-stretch-left-all .l-stretch-content {
    padding-left: 1rem !important; } }

@media (max-width: 320px) {
  .l-stretch-left-all .l-stretch-content {
    padding-left: 1rem !important; } }

@media (min-width: 1920px) {
  .l-stretch-left-all .l-stretch-content {
    padding-left: 7rem !important; } }

@media (max-width: 1920px) {
  .l-stretch-left-all .l-stretch-content-margin {
    margin-left: 7rem !important; } }

@media (max-width: 1280px) {
  .l-stretch-left-all .l-stretch-content-margin {
    margin-left: 4rem !important; } }

@media (max-width: 950px) {
  .l-stretch-left-all .l-stretch-content-margin {
    margin-left: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-stretch-left-all .l-stretch-content-margin {
    margin-left: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-stretch-left-all .l-stretch-content-margin {
    margin-left: 1rem !important; } }

@media (max-width: 320px) {
  .l-stretch-left-all .l-stretch-content-margin {
    margin-left: 1rem !important; } }

@media (min-width: 1920px) {
  .l-stretch-left-all .l-stretch-content-margin {
    margin-left: 7rem !important; } }

@media (max-width: 1920px) {
  .l-stretch-right-all {
    margin-right: -7rem !important; } }

@media (max-width: 1280px) {
  .l-stretch-right-all {
    margin-right: -4rem !important; } }

@media (max-width: 950px) {
  .l-stretch-right-all {
    margin-right: -2.5rem !important; } }

@media (max-width: 660px) {
  .l-stretch-right-all {
    margin-right: -1.5rem !important; } }

@media (max-width: 450px) {
  .l-stretch-right-all {
    margin-right: -1rem !important; } }

@media (max-width: 320px) {
  .l-stretch-right-all {
    margin-right: -1rem !important; } }

@media (min-width: 1920px) {
  .l-stretch-right-all {
    margin-right: -7rem !important; } }

@media (max-width: 1920px) {
  .l-stretch-right-all .l-stretch-content {
    padding-right: 7rem !important; } }

@media (max-width: 1280px) {
  .l-stretch-right-all .l-stretch-content {
    padding-right: 4rem !important; } }

@media (max-width: 950px) {
  .l-stretch-right-all .l-stretch-content {
    padding-right: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-stretch-right-all .l-stretch-content {
    padding-right: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-stretch-right-all .l-stretch-content {
    padding-right: 1rem !important; } }

@media (max-width: 320px) {
  .l-stretch-right-all .l-stretch-content {
    padding-right: 1rem !important; } }

@media (min-width: 1920px) {
  .l-stretch-right-all .l-stretch-content {
    padding-right: 7rem !important; } }

@media (max-width: 1920px) {
  .l-stretch-right-all .l-stretch-content-margin {
    margin-right: 7rem !important; } }

@media (max-width: 1280px) {
  .l-stretch-right-all .l-stretch-content-margin {
    margin-right: 4rem !important; } }

@media (max-width: 950px) {
  .l-stretch-right-all .l-stretch-content-margin {
    margin-right: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-stretch-right-all .l-stretch-content-margin {
    margin-right: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-stretch-right-all .l-stretch-content-margin {
    margin-right: 1rem !important; } }

@media (max-width: 320px) {
  .l-stretch-right-all .l-stretch-content-margin {
    margin-right: 1rem !important; } }

@media (min-width: 1920px) {
  .l-stretch-right-all .l-stretch-content-margin {
    margin-right: 7rem !important; } }

@media (max-width: 1920px) {
  .l-stretch-all-all {
    margin-left: -7rem !important;
    margin-right: -7rem !important; } }

@media (max-width: 1280px) {
  .l-stretch-all-all {
    margin-left: -4rem !important;
    margin-right: -4rem !important; } }

@media (max-width: 950px) {
  .l-stretch-all-all {
    margin-left: -2.5rem !important;
    margin-right: -2.5rem !important; } }

@media (max-width: 660px) {
  .l-stretch-all-all {
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important; } }

@media (max-width: 450px) {
  .l-stretch-all-all {
    margin-left: -1rem !important;
    margin-right: -1rem !important; } }

@media (max-width: 320px) {
  .l-stretch-all-all {
    margin-left: -1rem !important;
    margin-right: -1rem !important; } }

@media (min-width: 1920px) {
  .l-stretch-all-all {
    margin-left: -7rem !important;
    margin-right: -7rem !important; } }

@media (max-width: 1920px) {
  .l-stretch-all-all .l-stretch-content {
    padding-left: 7rem !important;
    padding-right: 7rem !important; } }

@media (max-width: 1280px) {
  .l-stretch-all-all .l-stretch-content {
    padding-left: 4rem !important;
    padding-right: 4rem !important; } }

@media (max-width: 950px) {
  .l-stretch-all-all .l-stretch-content {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-stretch-all-all .l-stretch-content {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-stretch-all-all .l-stretch-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important; } }

@media (max-width: 320px) {
  .l-stretch-all-all .l-stretch-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important; } }

@media (min-width: 1920px) {
  .l-stretch-all-all .l-stretch-content {
    padding-left: 7rem !important;
    padding-right: 7rem !important; } }

@media (max-width: 1920px) {
  .l-stretch-all-all .l-stretch-content-margin {
    margin-left: 7rem !important;
    margin-right: 7rem !important; } }

@media (max-width: 1280px) {
  .l-stretch-all-all .l-stretch-content-margin {
    margin-left: 4rem !important;
    margin-right: 4rem !important; } }

@media (max-width: 950px) {
  .l-stretch-all-all .l-stretch-content-margin {
    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-stretch-all-all .l-stretch-content-margin {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-stretch-all-all .l-stretch-content-margin {
    margin-left: 1rem !important;
    margin-right: 1rem !important; } }

@media (max-width: 320px) {
  .l-stretch-all-all .l-stretch-content-margin {
    margin-left: 1rem !important;
    margin-right: 1rem !important; } }

@media (min-width: 1920px) {
  .l-stretch-all-all .l-stretch-content-margin {
    margin-left: 7rem !important;
    margin-right: 7rem !important; } }

.l-stretch-global-all {
  width: 100vw !important;
  margin-left: calc((50vw - 50%) * -1) !important;
  margin-right: calc((50vw - 50%) * -1) !important; }
  .l-stretch-global-all .l-stretch-content {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem; }
    @media (max-width: 1920px) {
      .l-stretch-global-all .l-stretch-content {
        padding-left: 7rem;
        padding-right: 7rem; } }
    @media (max-width: 1280px) {
      .l-stretch-global-all .l-stretch-content {
        padding-left: 4rem;
        padding-right: 4rem; } }
    @media (max-width: 950px) {
      .l-stretch-global-all .l-stretch-content {
        padding-left: 2.5rem;
        padding-right: 2.5rem; } }
    @media (max-width: 660px) {
      .l-stretch-global-all .l-stretch-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem; } }
    @media (max-width: 450px) {
      .l-stretch-global-all .l-stretch-content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (max-width: 320px) {
      .l-stretch-global-all .l-stretch-content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (min-width: 1920px) {
      .l-stretch-global-all .l-stretch-content {
        padding-left: 7rem;
        padding-right: 7rem; } }
  .l-stretch-global-all .l-stretch-content-margin {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1920px;
    margin-left: 1rem;
    margin-right: 1rem; }
    @media (max-width: 1920px) {
      .l-stretch-global-all .l-stretch-content-margin {
        margin-left: 7rem;
        margin-right: 7rem; } }
    @media (max-width: 1280px) {
      .l-stretch-global-all .l-stretch-content-margin {
        margin-left: 4rem;
        margin-right: 4rem; } }
    @media (max-width: 950px) {
      .l-stretch-global-all .l-stretch-content-margin {
        margin-left: 2.5rem;
        margin-right: 2.5rem; } }
    @media (max-width: 660px) {
      .l-stretch-global-all .l-stretch-content-margin {
        margin-left: 1.5rem;
        margin-right: 1.5rem; } }
    @media (max-width: 450px) {
      .l-stretch-global-all .l-stretch-content-margin {
        margin-left: 1rem;
        margin-right: 1rem; } }
    @media (max-width: 320px) {
      .l-stretch-global-all .l-stretch-content-margin {
        margin-left: 1rem;
        margin-right: 1rem; } }
    @media (min-width: 1920px) {
      .l-stretch-global-all .l-stretch-content-margin {
        margin-left: 7rem;
        margin-right: 7rem; } }

.l-stretch-global-left {
  width: calc(100% + ((100vw - 100%) / 2)) !important;
  margin-left: calc((50vw - 50%) * -1) !important; }
  .l-stretch-global-left .l-stretch-content {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem; }
    @media (max-width: 1920px) {
      .l-stretch-global-left .l-stretch-content {
        padding-left: 7rem;
        padding-right: 7rem; } }
    @media (max-width: 1280px) {
      .l-stretch-global-left .l-stretch-content {
        padding-left: 4rem;
        padding-right: 4rem; } }
    @media (max-width: 950px) {
      .l-stretch-global-left .l-stretch-content {
        padding-left: 2.5rem;
        padding-right: 2.5rem; } }
    @media (max-width: 660px) {
      .l-stretch-global-left .l-stretch-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem; } }
    @media (max-width: 450px) {
      .l-stretch-global-left .l-stretch-content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (max-width: 320px) {
      .l-stretch-global-left .l-stretch-content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (min-width: 1920px) {
      .l-stretch-global-left .l-stretch-content {
        padding-left: 7rem;
        padding-right: 7rem; } }
  .l-stretch-global-left .l-stretch-content-margin {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1920px;
    margin-left: 1rem;
    margin-right: 1rem; }
    @media (max-width: 1920px) {
      .l-stretch-global-left .l-stretch-content-margin {
        margin-left: 7rem;
        margin-right: 7rem; } }
    @media (max-width: 1280px) {
      .l-stretch-global-left .l-stretch-content-margin {
        margin-left: 4rem;
        margin-right: 4rem; } }
    @media (max-width: 950px) {
      .l-stretch-global-left .l-stretch-content-margin {
        margin-left: 2.5rem;
        margin-right: 2.5rem; } }
    @media (max-width: 660px) {
      .l-stretch-global-left .l-stretch-content-margin {
        margin-left: 1.5rem;
        margin-right: 1.5rem; } }
    @media (max-width: 450px) {
      .l-stretch-global-left .l-stretch-content-margin {
        margin-left: 1rem;
        margin-right: 1rem; } }
    @media (max-width: 320px) {
      .l-stretch-global-left .l-stretch-content-margin {
        margin-left: 1rem;
        margin-right: 1rem; } }
    @media (min-width: 1920px) {
      .l-stretch-global-left .l-stretch-content-margin {
        margin-left: 7rem;
        margin-right: 7rem; } }

.l-stretch-global-right {
  width: calc(100% + ((100vw - 100%) / 2)) !important;
  margin-right: calc((50vw - 50%) * -1) !important; }
  .l-stretch-global-right .l-stretch-content {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem; }
    @media (max-width: 1920px) {
      .l-stretch-global-right .l-stretch-content {
        padding-left: 7rem;
        padding-right: 7rem; } }
    @media (max-width: 1280px) {
      .l-stretch-global-right .l-stretch-content {
        padding-left: 4rem;
        padding-right: 4rem; } }
    @media (max-width: 950px) {
      .l-stretch-global-right .l-stretch-content {
        padding-left: 2.5rem;
        padding-right: 2.5rem; } }
    @media (max-width: 660px) {
      .l-stretch-global-right .l-stretch-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem; } }
    @media (max-width: 450px) {
      .l-stretch-global-right .l-stretch-content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (max-width: 320px) {
      .l-stretch-global-right .l-stretch-content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (min-width: 1920px) {
      .l-stretch-global-right .l-stretch-content {
        padding-left: 7rem;
        padding-right: 7rem; } }
  .l-stretch-global-right .l-stretch-content-margin {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1920px;
    margin-left: 1rem;
    margin-right: 1rem; }
    @media (max-width: 1920px) {
      .l-stretch-global-right .l-stretch-content-margin {
        margin-left: 7rem;
        margin-right: 7rem; } }
    @media (max-width: 1280px) {
      .l-stretch-global-right .l-stretch-content-margin {
        margin-left: 4rem;
        margin-right: 4rem; } }
    @media (max-width: 950px) {
      .l-stretch-global-right .l-stretch-content-margin {
        margin-left: 2.5rem;
        margin-right: 2.5rem; } }
    @media (max-width: 660px) {
      .l-stretch-global-right .l-stretch-content-margin {
        margin-left: 1.5rem;
        margin-right: 1.5rem; } }
    @media (max-width: 450px) {
      .l-stretch-global-right .l-stretch-content-margin {
        margin-left: 1rem;
        margin-right: 1rem; } }
    @media (max-width: 320px) {
      .l-stretch-global-right .l-stretch-content-margin {
        margin-left: 1rem;
        margin-right: 1rem; } }
    @media (min-width: 1920px) {
      .l-stretch-global-right .l-stretch-content-margin {
        margin-left: 7rem;
        margin-right: 7rem; } }

@media (max-width: 1920px) {
  .l-indent-left {
    padding-left: 0 !important; } }

@media (max-width: 1280px) {
  .l-indent-left {
    padding-left: 0 !important; } }

@media (max-width: 950px) {
  .l-indent-left {
    padding-left: 0 !important; } }

@media (max-width: 660px) {
  .l-indent-left {
    padding-left: 0 !important; } }

@media (max-width: 450px) {
  .l-indent-left {
    padding-left: 0 !important; } }

@media (max-width: 320px) {
  .l-indent-left {
    padding-left: 0 !important; } }

@media (min-width: 1920px) {
  .l-indent-left {
    padding-left: 0 !important; } }

@media (max-width: 1920px) {
  .l-indent-left-margin {
    margin-left: 0 !important; } }

@media (max-width: 1280px) {
  .l-indent-left-margin {
    margin-left: 0 !important; } }

@media (max-width: 950px) {
  .l-indent-left-margin {
    margin-left: 0 !important; } }

@media (max-width: 660px) {
  .l-indent-left-margin {
    margin-left: 0 !important; } }

@media (max-width: 450px) {
  .l-indent-left-margin {
    margin-left: 0 !important; } }

@media (max-width: 320px) {
  .l-indent-left-margin {
    margin-left: 0 !important; } }

@media (min-width: 1920px) {
  .l-indent-left-margin {
    margin-left: 0 !important; } }

@media (max-width: 1920px) {
  .l-indent-left-content {
    padding-left: 7rem !important; } }

@media (max-width: 1280px) {
  .l-indent-left-content {
    padding-left: 4rem !important; } }

@media (max-width: 950px) {
  .l-indent-left-content {
    padding-left: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-indent-left-content {
    padding-left: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-indent-left-content {
    padding-left: 1rem !important; } }

@media (max-width: 320px) {
  .l-indent-left-content {
    padding-left: 1rem !important; } }

@media (min-width: 1920px) {
  .l-indent-left-content {
    padding-left: 7rem !important; } }

@media (max-width: 1920px) {
  .l-indent-left-content-margin {
    margin-left: 7rem !important; } }

@media (max-width: 1280px) {
  .l-indent-left-content-margin {
    margin-left: 4rem !important; } }

@media (max-width: 950px) {
  .l-indent-left-content-margin {
    margin-left: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-indent-left-content-margin {
    margin-left: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-indent-left-content-margin {
    margin-left: 1rem !important; } }

@media (max-width: 320px) {
  .l-indent-left-content-margin {
    margin-left: 1rem !important; } }

@media (min-width: 1920px) {
  .l-indent-left-content-margin {
    margin-left: 7rem !important; } }

@media (max-width: 1920px) {
  .l-indent-left-all {
    padding-left: 7rem !important; } }

@media (max-width: 1280px) {
  .l-indent-left-all {
    padding-left: 4rem !important; } }

@media (max-width: 950px) {
  .l-indent-left-all {
    padding-left: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-indent-left-all {
    padding-left: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-indent-left-all {
    padding-left: 1rem !important; } }

@media (max-width: 320px) {
  .l-indent-left-all {
    padding-left: 1rem !important; } }

@media (min-width: 1920px) {
  .l-indent-left-all {
    padding-left: 7rem !important; } }

@media (max-width: 1920px) {
  .l-indent-left-all-margin {
    margin-left: 7rem !important; } }

@media (max-width: 1280px) {
  .l-indent-left-all-margin {
    margin-left: 4rem !important; } }

@media (max-width: 950px) {
  .l-indent-left-all-margin {
    margin-left: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-indent-left-all-margin {
    margin-left: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-indent-left-all-margin {
    margin-left: 1rem !important; } }

@media (max-width: 320px) {
  .l-indent-left-all-margin {
    margin-left: 1rem !important; } }

@media (min-width: 1920px) {
  .l-indent-left-all-margin {
    margin-left: 7rem !important; } }

@media (max-width: 1920px) {
  .l-indent-right {
    padding-right: 0 !important; } }

@media (max-width: 1280px) {
  .l-indent-right {
    padding-right: 0 !important; } }

@media (max-width: 950px) {
  .l-indent-right {
    padding-right: 0 !important; } }

@media (max-width: 660px) {
  .l-indent-right {
    padding-right: 0 !important; } }

@media (max-width: 450px) {
  .l-indent-right {
    padding-right: 0 !important; } }

@media (max-width: 320px) {
  .l-indent-right {
    padding-right: 0 !important; } }

@media (min-width: 1920px) {
  .l-indent-right {
    padding-right: 0 !important; } }

@media (max-width: 1920px) {
  .l-indent-right-margin {
    margin-right: 0 !important; } }

@media (max-width: 1280px) {
  .l-indent-right-margin {
    margin-right: 0 !important; } }

@media (max-width: 950px) {
  .l-indent-right-margin {
    margin-right: 0 !important; } }

@media (max-width: 660px) {
  .l-indent-right-margin {
    margin-right: 0 !important; } }

@media (max-width: 450px) {
  .l-indent-right-margin {
    margin-right: 0 !important; } }

@media (max-width: 320px) {
  .l-indent-right-margin {
    margin-right: 0 !important; } }

@media (min-width: 1920px) {
  .l-indent-right-margin {
    margin-right: 0 !important; } }

@media (max-width: 1920px) {
  .l-indent-right-content {
    padding-right: 7rem !important; } }

@media (max-width: 1280px) {
  .l-indent-right-content {
    padding-right: 4rem !important; } }

@media (max-width: 950px) {
  .l-indent-right-content {
    padding-right: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-indent-right-content {
    padding-right: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-indent-right-content {
    padding-right: 1rem !important; } }

@media (max-width: 320px) {
  .l-indent-right-content {
    padding-right: 1rem !important; } }

@media (min-width: 1920px) {
  .l-indent-right-content {
    padding-right: 7rem !important; } }

@media (max-width: 1920px) {
  .l-indent-right-content-margin {
    margin-right: 7rem !important; } }

@media (max-width: 1280px) {
  .l-indent-right-content-margin {
    margin-right: 4rem !important; } }

@media (max-width: 950px) {
  .l-indent-right-content-margin {
    margin-right: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-indent-right-content-margin {
    margin-right: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-indent-right-content-margin {
    margin-right: 1rem !important; } }

@media (max-width: 320px) {
  .l-indent-right-content-margin {
    margin-right: 1rem !important; } }

@media (min-width: 1920px) {
  .l-indent-right-content-margin {
    margin-right: 7rem !important; } }

@media (max-width: 1920px) {
  .l-indent-right-all {
    padding-right: 7rem !important; } }

@media (max-width: 1280px) {
  .l-indent-right-all {
    padding-right: 4rem !important; } }

@media (max-width: 950px) {
  .l-indent-right-all {
    padding-right: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-indent-right-all {
    padding-right: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-indent-right-all {
    padding-right: 1rem !important; } }

@media (max-width: 320px) {
  .l-indent-right-all {
    padding-right: 1rem !important; } }

@media (min-width: 1920px) {
  .l-indent-right-all {
    padding-right: 7rem !important; } }

@media (max-width: 1920px) {
  .l-indent-right-all-margin {
    margin-right: 7rem !important; } }

@media (max-width: 1280px) {
  .l-indent-right-all-margin {
    margin-right: 4rem !important; } }

@media (max-width: 950px) {
  .l-indent-right-all-margin {
    margin-right: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-indent-right-all-margin {
    margin-right: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-indent-right-all-margin {
    margin-right: 1rem !important; } }

@media (max-width: 320px) {
  .l-indent-right-all-margin {
    margin-right: 1rem !important; } }

@media (min-width: 1920px) {
  .l-indent-right-all-margin {
    margin-right: 7rem !important; } }

@media (max-width: 1920px) {
  .l-indent-all {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

@media (max-width: 1280px) {
  .l-indent-all {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

@media (max-width: 950px) {
  .l-indent-all {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

@media (max-width: 660px) {
  .l-indent-all {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

@media (max-width: 450px) {
  .l-indent-all {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

@media (max-width: 320px) {
  .l-indent-all {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

@media (min-width: 1920px) {
  .l-indent-all {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

@media (max-width: 1920px) {
  .l-indent-all-margin {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 1280px) {
  .l-indent-all-margin {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 950px) {
  .l-indent-all-margin {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 660px) {
  .l-indent-all-margin {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 450px) {
  .l-indent-all-margin {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 320px) {
  .l-indent-all-margin {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (min-width: 1920px) {
  .l-indent-all-margin {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media (max-width: 1920px) {
  .l-indent-all-content {
    padding-left: 7rem !important;
    padding-right: 7rem !important; } }

@media (max-width: 1280px) {
  .l-indent-all-content {
    padding-left: 4rem !important;
    padding-right: 4rem !important; } }

@media (max-width: 950px) {
  .l-indent-all-content {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-indent-all-content {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-indent-all-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important; } }

@media (max-width: 320px) {
  .l-indent-all-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important; } }

@media (min-width: 1920px) {
  .l-indent-all-content {
    padding-left: 7rem !important;
    padding-right: 7rem !important; } }

@media (max-width: 1920px) {
  .l-indent-all-content-margin {
    margin-left: 7rem !important;
    margin-right: 7rem !important; } }

@media (max-width: 1280px) {
  .l-indent-all-content-margin {
    margin-left: 4rem !important;
    margin-right: 4rem !important; } }

@media (max-width: 950px) {
  .l-indent-all-content-margin {
    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-indent-all-content-margin {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-indent-all-content-margin {
    margin-left: 1rem !important;
    margin-right: 1rem !important; } }

@media (max-width: 320px) {
  .l-indent-all-content-margin {
    margin-left: 1rem !important;
    margin-right: 1rem !important; } }

@media (min-width: 1920px) {
  .l-indent-all-content-margin {
    margin-left: 7rem !important;
    margin-right: 7rem !important; } }

@media (max-width: 1920px) {
  .l-indent-all-all {
    padding-left: 7rem !important;
    padding-right: 7rem !important; } }

@media (max-width: 1280px) {
  .l-indent-all-all {
    padding-left: 4rem !important;
    padding-right: 4rem !important; } }

@media (max-width: 950px) {
  .l-indent-all-all {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-indent-all-all {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-indent-all-all {
    padding-left: 1rem !important;
    padding-right: 1rem !important; } }

@media (max-width: 320px) {
  .l-indent-all-all {
    padding-left: 1rem !important;
    padding-right: 1rem !important; } }

@media (min-width: 1920px) {
  .l-indent-all-all {
    padding-left: 7rem !important;
    padding-right: 7rem !important; } }

@media (max-width: 1920px) {
  .l-indent-all-all-margin {
    margin-left: 7rem !important;
    margin-right: 7rem !important; } }

@media (max-width: 1280px) {
  .l-indent-all-all-margin {
    margin-left: 4rem !important;
    margin-right: 4rem !important; } }

@media (max-width: 950px) {
  .l-indent-all-all-margin {
    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important; } }

@media (max-width: 660px) {
  .l-indent-all-all-margin {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important; } }

@media (max-width: 450px) {
  .l-indent-all-all-margin {
    margin-left: 1rem !important;
    margin-right: 1rem !important; } }

@media (max-width: 320px) {
  .l-indent-all-all-margin {
    margin-left: 1rem !important;
    margin-right: 1rem !important; } }

@media (min-width: 1920px) {
  .l-indent-all-all-margin {
    margin-left: 7rem !important;
    margin-right: 7rem !important; } }

@font-face {
  font-family: "Styrene A LC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/local/templates/uiscom/frontend/font/Styrene-A-Regular-Web.woff2") format("woff2"), url("/local/templates/uiscom/frontend/font/Styrene-A-Regular-Web.woff") format("woff"); }

@font-face {
  font-family: "Styrene A LC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/local/templates/uiscom/frontend/font/Styrene-A-Bold-Web.woff2") format("woff2"), url("/local/templates/uiscom/frontend/font/Styrene-A-Bold-Web.woff") format("woff"); }

@font-face {
  font-family: "Styrene A LC";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/local/templates/uiscom/frontend/font/Styrene-A-Medium-Web.woff2") format("woff2"), url("/local/templates/uiscom/frontend/font/Styrene-A-Medium-Web.woff") format("woff"); }

/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
/* Document
       ========================================================================== */
/**
     * 1. Change the default font family in all browsers (opinionated).
     * 2. Correct the line height in all browsers.
     * 3. Prevent adjustments of font size after orientation changes in
     *    IE on Windows Phone and in iOS.
     */
html {
  font-family: sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */ }

/* Sections
       ========================================================================== */
/**
     * Remove the margin in all browsers (opinionated).
     */
body {
  margin: 0; }

/**
     * Add the correct display in IE 9-.
     */
article,
aside,
footer,
header,
nav,
section {
  display: block; }

/**
     * Correct the font size and margin on `h1` elements within `section` and
     * `article` contexts in Chrome, Firefox, and Safari.
     */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
       ========================================================================== */
/**
     * Add the correct display in IE 9-.
     */
figcaption,
figure {
  display: block; }

/**
     * Add the correct margin in IE 8.
     */
figure {
  margin: 1em 40px; }

/**
     * 1. Add the correct box sizing in Firefox.
     * 2. Show the overflow in Edge and IE.
     */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
     * Add the correct display in IE.
     */
main {
  display: block; }

/**
     * 1. Correct the inheritance and scaling of font size in all browsers.
     * 2. Correct the odd `em` font sizing in all browsers.
     */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Links
       ========================================================================== */
/**
     * 1. Remove the gray background on active links in IE 10.
     * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
     */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */ }

/**
     * Remove the outline on focused links when they are also active or hovered
     * in all browsers (opinionated).
     */
a:active,
a:hover {
  outline-width: 0; }

/* Text-level semantics
       ========================================================================== */
/**
     * 1. Remove the bottom border in Firefox 39-.
     * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
     */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */ }

/**
     * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
     */
b,
strong {
  font-weight: inherit; }

/**
     * Add the correct font weight in Chrome, Edge, and Safari.
     */
b,
strong {
  font-weight: bolder; }

/**
     * 1. Correct the inheritance and scaling of font size in all browsers.
     * 2. Correct the odd `em` font sizing in all browsers.
     */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
     * Add the correct font style in Android 4.3-.
     */
dfn {
  font-style: italic; }

/**
     * Add the correct background and color in IE 9-.
     */
mark {
  background-color: #ff0;
  color: #000; }

/**
     * Add the correct font size in all browsers.
     */
small {
  font-size: 80%; }

/**
     * Prevent `sub` and `sup` elements from affecting the line height in
     * all browsers.
     */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
       ========================================================================== */
/**
     * Add the correct display in IE 9-.
     */
audio,
video {
  display: inline-block; }

/**
     * Add the correct display in iOS 4-7.
     */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
     * Remove the border on images inside links in IE 10-.
     */
img {
  border-style: none; }

/**
     * Hide the overflow in IE.
     */
svg:not(:root) {
  overflow: hidden; }

/* Forms
       ========================================================================== */
/**
     * 1. Change the font styles in all browsers (opinionated).
     * 2. Remove the margin in Firefox and Safari.
     */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
     * Show the overflow in IE.
     */
button {
  overflow: visible; }

/**
     * Remove the inheritance of text transform in Edge, Firefox, and IE.
     * 1. Remove the inheritance of text transform in Firefox.
     */
button,
select {
  /* 1 */
  text-transform: none; }

/**
     * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
     *    controls in Android 4.
     * 2. Correct the inability to style clickable types in iOS and Safari.
     */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

button,
[type="button"],
[type="reset"],
[type="submit"] {
  /**
       * Remove the inner border and padding in Firefox.
       */
  /**
       * Restore the focus styles unset by the previous rule.
       */ }
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0; }
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText; }

/**
     * Show the overflow in Edge.
     */
input {
  overflow: visible; }

/**
     * 1. Add the correct box sizing in IE 10-.
     * 2. Remove the padding in IE 10-.
     */
[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
     * Correct the cursor style of increment and decrement buttons in Chrome.
     */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
     * 1. Correct the odd appearance in Chrome and Safari.
     * 2. Correct the outline style in Safari.
     */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
  /**
       * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
       */ }
  [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; }

/**
     * 1. Correct the inability to style clickable types in iOS and Safari.
     * 2. Change font properties to `inherit` in Safari.
     */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/**
     * Change the border, margin, and padding in all browsers (opinionated).
     */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
     * 1. Correct the text wrapping in Edge and IE.
     * 2. Correct the color inheritance from `fieldset` elements in IE.
     * 3. Remove the padding so developers are not caught out when they zero out
     *    `fieldset` elements in all browsers.
     */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  color: inherit;
  /* 2 */
  white-space: normal;
  /* 1 */ }

/**
     * 1. Add the correct display in IE 9-.
     * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
     */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
     * Remove the default vertical scrollbar in IE.
     */
textarea {
  overflow: auto; }

/* Interactive
       ========================================================================== */
/*
     * Add the correct display in Edge, IE, and Firefox.
     */
details {
  display: block; }

/*
     * Add the correct display in all browsers.
     */
summary {
  display: list-item; }

/*
     * Add the correct display in IE 9-.
     */
menu {
  display: block; }

/* Scripting
       ========================================================================== */
/**
     * Add the correct display in IE 9-.
     */
canvas {
  display: inline-block; }

/**
     * Add the correct display in IE.
     */
template {
  display: none; }

/* Hidden
       ========================================================================== */
/**
     * Add the correct display in IE 10-.
     */
[hidden] {
  display: none; }

.foundation-mq {
  font-family: "small=0em&medium=48em&large=64em&xlarge=80em"; }

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 20px; }

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit; }

body {
  margin: 0;
  padding: 0;
  background: #f4f4f4;
  font-family: "Styrene A LC", "Arial", "Helvetica", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  color: #232323;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic; }

textarea {
  height: auto;
  min-height: 50px;
  border-radius: 0; }

select {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  border-radius: 0; }

.map_canvas img,
.map_canvas embed,
.map_canvas object,
.mqa-display img,
.mqa-display embed,
.mqa-display object {
  max-width: none !important; }

button {
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1;
  cursor: auto; }
  [data-whatinput='mouse'] button {
    outline: 0; }

pre {
  overflow: auto; }

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; }

.is-visible {
  display: block !important; }

.is-hidden {
  display: none !important; }

.c-first-screen {
  height: calc(100vh - 3rem) !important;
  overflow: hidden !important; }

.c-100vh {
  height: 100vh !important;
  overflow: hidden !important; }

.c-gradienr-blue-text {
  background: -o-linear-gradient(bottom, rgba(55, 227, 254, 0), rgba(55, 227, 254, 0)), -o-linear-gradient(314.11deg, #006ed3 18.54%, #20ccff 36.17%, #1b52eb 73.4%);
  background: linear-gradient(0deg, rgba(55, 227, 254, 0), rgba(55, 227, 254, 0)), linear-gradient(135.89deg, #006ed3 18.54%, #20ccff 36.17%, #1b52eb 73.4%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #99cdf1; }

h1,
.h1,
.c-h1 {
  margin: 0;
  padding: 0;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.95rem;
  text-transform: none; }
  @media (min-width: 451px) {
    h1,
    .h1,
    .c-h1 {
      font-size: 1.75rem;
      line-height: 2.1rem; } }
  @media (min-width: 951px) {
    h1,
    .h1,
    .c-h1 {
      font-size: 2.1rem;
      line-height: 2.5rem; } }

h2,
.h2,
.c-h2 {
  margin: 0;
  padding: 0;
  font-weight: 500;
  line-height: 1.8rem;
  font-size: 1.3rem; }
  @media (min-width: 451px) {
    h2,
    .h2,
    .c-h2 {
      font-size: 1.5rem;
      line-height: 1.95rem; } }
  @media (min-width: 951px) {
    h2,
    .h2,
    .c-h2 {
      font-size: 1.75rem;
      line-height: 2.25rem; } }

.h3,
.c-h3 {
  margin: 0;
  padding: 0;
  font-weight: 700;
  line-height: 1.25rem;
  font-size: 0.9rem; }
  @media (min-width: 451px) {
    .h3,
    .c-h3 {
      font-size: 1rem;
      line-height: 1.4rem;
      font-weight: 500; } }
  @media (min-width: 951px) {
    .h3,
    .c-h3 {
      font-size: 1.25rem;
      line-height: 1.75rem; } }

h3 {
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 20px 0px !important;
  font-size: 20px !important;
  line-height: 28px !important; }
  @media (min-width: 451px) {
    h3 {
      font-size: 20px !important;
      line-height: 28px !important; } }
  @media (min-width: 951px) {
    h3 {
      font-size: 25px !important;
      line-height: 35px !important; } }

h4,
.h4,
.c-h4 {
  margin: 0;
  padding: 0;
  font-weight: 500;
  line-height: 1.2rem;
  font-size: 0.85rem; }
  @media (min-width: 451px) {
    h4,
    .h4,
    .c-h4 {
      font-weight: 700;
      font-size: 0.75rem;
      line-height: 1.25rem; } }
  @media (min-width: 951px) {
    h4,
    .h4,
    .c-h4 {
      font-size: 0.85rem;
      line-height: 1.45rem; } }

h4 {
  line-height: 24px;
  font-size: 18px; }

h5,
.h5,
.c-h5 {
  margin: 0;
  padding: 0;
  font-weight: 500;
  line-height: 1.05rem;
  font-size: 0.8rem; }
  @media (min-width: 451px) {
    h5,
    .h5,
    .c-h5 {
      font-weight: 700;
      font-size: 0.65rem;
      line-height: 0.85rem; } }
  @media (min-width: 951px) {
    h5,
    .h5,
    .c-h5 {
      font-size: 0.75rem;
      line-height: 1rem; } }

h5 {
  line-height: 21px;
  font-size: 15px; }

p,
.p {
  padding: 0;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.25rem; }
  @media (min-width: 951px) {
    p,
    .p {
      font-size: 0.85rem;
      line-height: 1.45rem; } }

b,
.b {
  font-weight: 700; }

p.head,
.p.head {
  line-height: 1.05rem; }
  @media (min-width: 951px) {
    p.head,
    .p.head {
      line-height: 1.2rem; } }

.little {
  font-size: 0.7rem;
  line-height: 1.25rem; }
  @media (min-width: 451px) {
    .little {
      font-size: 0.6rem;
      line-height: 1.1rem; } }
  @media (min-width: 951px) {
    .little {
      font-size: 0.7rem;
      line-height: 1.25rem; } }

.little-head {
  font-size: 0.7rem;
  line-height: 1rem; }
  @media (min-width: 451px) {
    .little-head {
      font-size: 0.6rem;
      line-height: 0.9rem; } }
  @media (min-width: 951px) {
    .little-head {
      font-size: 0.7rem;
      line-height: 1.05rem; } }

.main-content-center {
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .main-content-center {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .main-content-center {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .main-content-center {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .main-content-center {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .main-content-center {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .main-content-center {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .main-content-center {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .main-content-center {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .main-content-center {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .main-content-center {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .main-content-center {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .main-content-center {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .main-content-center {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .main-content-center {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

.hr,
hr {
  width: 100%;
  border: none;
  border-bottom: 2px solid #c5c5c5; }
  .hr .min, .hr-min,
  hr .min,
  hr-min {
    max-width: 4.25rem; }

.marker-list {
  width: 100%;
  padding: 0;
  margin: 0; }
  .marker-list .li,
  .marker-list > li {
    position: relative;
    padding: 0;
    margin: 0;
    margin-bottom: .75rem;
    padding-right: 1rem;
    padding-left: 2rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    list-style-type: none;
    list-style-position: inside; }
    .marker-list .li::before,
    .marker-list > li::before {
      content: "";
      display: inline-block;
      position: absolute;
      top: 0.3rem;
      left: 0;
      width: 1rem;
      height: 1rem;
      margin-left: .5rem;
      background-image: url("/images/icons/marker.svg");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center; }
    @media (min-width: 951px) {
      .marker-list .li,
      .marker-list > li {
        font-size: 0.85rem;
        line-height: 1.45rem; } }
  .marker-list > li:last-child {
    margin-bottom: 0; }

ul {
  margin-left: 20px;
  padding: 0;
  margin-bottom: 1rem; }
  ul > li {
    position: relative;
    padding: 0;
    margin: 0;
    margin-left: 1rem;
    margin-bottom: .25rem;
    font-size: 0.75rem !important;
    line-height: 1.25rem !important;
    list-style-position: outside;
    list-style-type: disc; }
    @media (min-width: 951px) {
      ul > li {
        font-size: 0.85rem !important;
        line-height: 1.45rem !important; } }
  ul > li:last-child {
    margin-bottom: 0; }
  ul ul {
    margin-left: 1rem; }
    ul ul > li {
      margin-left: 1rem;
      list-style-type: circle; }
  ul ol > li {
    margin-left: 0; }

ol {
  width: 100%;
  padding: 0;
  margin: 0;
  margin-bottom: 1rem;
  counter-reset: li; }
  ol > ul {
    padding-left: 1rem; }
  ol > li {
    position: relative;
    padding: 0;
    padding-left: 20px;
    margin: 0;
    margin-left: 1rem;
    margin-bottom: .25rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    list-style-type: none;
    list-style-position: inside; }
    ol > li::before {
      counter-increment: li;
      content: counters(li, ".") ". ";
      position: absolute;
      left: 15px;
      text-align: right;
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%); }
    @media (min-width: 951px) {
      ol > li {
        font-size: 0.85rem;
        line-height: 1.45rem; } }
  ol > li:last-child {
    margin-bottom: 0; }

li {
  position: relative;
  padding: 0;
  margin: 0;
  margin-left: 1rem;
  font-size: 0.75rem !important;
  line-height: 1.25rem !important;
  list-style-type: disc;
  list-style-position: inside; }
  @media (min-width: 951px) {
    li {
      font-size: 0.85rem !important;
      line-height: 1.45rem !important; } }

ul ul, ul ol, ul .marker-list, ol ul, ol ol, ol .marker-list, .marker-list ul, .marker-list ol, .marker-list .marker-list {
  margin-top: 1rem;
  margin-left: 0; }

a {
  text-decoration: none;
  color: #00a;
  border-bottom: 1px solid #00a;
  line-height: 1rem;
  cursor: pointer; }
  a:hover {
    color: #99cdf1;
    border-bottom: 1px solid #99cdf1; }

input {
  outline: none; }

.c-block {
  display: block;
  width: 100%; }

.c-hidden {
  display: none !important; }

.c-right {
  float: right;
  margin: 0 0 10px 10px; }

.c-left {
  float: left;
  margin: 0 10px 10px 0; }

center,
.c-center {
  text-align: center; }

.c-center-align {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.c-center-all {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center; }

.c-left-all {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start; }

.c-right-all {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

@media screen and (max-width: 47.9375em) {
  .c-small-hidden {
    display: none; } }

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
  .c-medium-hidden {
    display: none; } }

@media screen and (min-width: 64em) and (max-width: 79.9375em) {
  .c-large-hidden {
    display: none; } }

@media screen and (min-width: 80em) {
  .c-xlarge-hidden {
    display: none; } }

video {
  width: 100%;
  height: auto;
  max-height: 100%; }

.c-content h1,
.c-content .h1,
.c-content h2,
.c-content .h2,
.c-content h3,
.c-content .h3,
.c-content h4,
.c-content .h4,
.c-content h5,
.c-content .h5 {
  margin-bottom: 1rem; }

.c-content img {
  margin-bottom: 1rem; }

.c-content p,
.c-content .p {
  margin-bottom: 1rem; }
  .c-content p:last-child,
  .c-content .p:last-child {
    margin-bottom: 0; }

.c-content ul {
  margin-bottom: 1rem; }

.c-content span[style*="background-color"] {
  display: inline-block;
  padding: 0 0.5rem;
  border-radius: 1.5rem; }
  .c-content span[style*="background-color"] span {
    padding: 0; }

.c-content .marker-list {
  margin-bottom: 1rem; }

.c-content .weight-normal {
  font-weight: 400 !important; }

.image {
  text-align: center; }

.image-right {
  text-align: end; }

figure.media {
  border-radius: 5px; }

.grid-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .grid-container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .grid-container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .grid-container {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .grid-container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .grid-container {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .grid-container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .grid-container {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .grid-container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .grid-container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .grid-container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .grid-container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .grid-container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }

@media (max-width: 1920px) {
  .grid-cell-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (max-width: 1280px) {
  .grid-cell-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (max-width: 950px) {
  .grid-cell-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (max-width: 660px) {
  .grid-cell-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (max-width: 450px) {
  .grid-cell-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (max-width: 320px) {
  .grid-cell-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1921px) {
  .grid-cell-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .grid-cell-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .grid-cell-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 951px) and (max-width: 950px) {
  .grid-cell-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 951px) and (max-width: 660px) {
  .grid-cell-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 951px) and (max-width: 450px) {
  .grid-cell-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (max-width: 320px) {
  .grid-cell-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .grid-cell-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

input[type="checkbox"]:checked + label::before {
  background-size: contain; }

.checkbox-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer; }
  .checkbox-label::before {
    content: '';
    display: block;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 0.95rem;
    height: 1rem;
    margin-top: 3px;
    margin-right: 0.5rem;
    border: 1px solid #9e9d9d;
    border-radius: 5px;
    background-image: url("/images/icons/checkbox_ok.png");
    background-size: 0;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer; }

.grecaptcha-badge {
  display: none !important; }

figure {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden; }

table {
  min-width: 47.5rem;
  width: 100%;
  border-spacing: 0.3rem;
  border: none;
  border-collapse: collapse; }
  table th {
    max-width: 16.5rem;
    text-align: start;
    padding: 10px 12px;
    background-color: #F0F0F0;
    border: 1px solid #b9b9b9;
    font-family: Styrene A LC;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0em;
    color: #252525; }
  table td {
    font-family: Styrene A LC;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: left;
    vertical-align: middle;
    padding: 10px 12px;
    background-color: #fff;
    border: 1px solid #B9B9B9; }
  table tr:first-child th:first-child {
    border-top-left-radius: 4px; }
  table tr:first-child th:last-child {
    border-top-right-radius: 4px; }
  table tr:last-child td:first-child {
    border-bottom-left-radius: 4px; }
  table tr:last-child td:last-child {
    border-bottom-right-radius: 4px; }

.bg-text-blue {
  display: inline;
  padding: 0 1rem;
  border-radius: 2.5rem;
  background-color: #00a;
  color: #fff0e6;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone; }

div[id^="wait_comp_"] {
  display: none !important; }

.wrap_st_cart {
  z-index: 10000000; }
  .wrap_st_cart ul > li {
    margin-left: 0 !important; }

.robolink {
  display: none !important; }

html {
  height: 100%;
  overflow-y: visible;
  font-size: 20px; }
  @media (min-width: 320px) {
    html {
      font-size: 20px; } }
  @media (min-width: 450px) {
    html {
      font-size: 20px; } }
  @media (min-width: 660px) {
    html {
      font-size: 20px; } }
  @media (min-width: 950px) {
    html {
      font-size: 20px; } }
  @media (min-width: 1280px) {
    html {
      font-size: 20px; } }
  @media (min-width: 1920px) {
    html {
      font-size: 20px; } }

html.no-scroll,
html.no-scroll body {
  overflow: hidden !important; }

body {
  min-width: 320px; }
  body * {
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }

/*!********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/auth/auth.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-auth {
  width: 100vw !important;
  margin-left: calc((50vw - 50%) * -1) !important;
  margin-right: calc((50vw - 50%) * -1) !important; }
  .b-auth.error .b-auth__error {
    display: block; }
  .b-auth__error {
    display: none;
    text-align: center;
    margin: 0;
    padding: 20px 0;
    color: #ff4c62; }
  .b-auth__banner {
    position: relative;
    display: block;
    padding-top: calc((145 / 450) * 100%);
    background: url(/images/auth/back_min.png) left top no-repeat;
    background-size: 100%;
    margin-top: 18px; }
    @media (min-width: 451px) {
      .b-auth__banner {
        padding-top: calc((210 / 660) * 100%);
        background: url(/images/auth/back_mobile.png) left top no-repeat;
        background-size: contain;
        margin-top: 0;
        margin-bottom: 40px; } }
    @media (min-width: 661px) {
      .b-auth__banner {
        padding-top: calc((305 / 950) * 100%);
        background: url(/images/auth/back_mobile2.png) left top no-repeat;
        background-size: contain; } }
    @media (min-width: 951px) {
      .b-auth__banner {
        padding-top: calc((410 / 1280) * 100%);
        background: url(/images/auth/back_middle.png) left top no-repeat;
        background-size: contain; } }
    @media (min-width: 1281px) {
      .b-auth__banner {
        padding-top: calc((615 / 1918) * 100%);
        background: url(/images/auth/back_middle2.png) left top no-repeat;
        background-size: contain; } }
    .b-auth__banner::before {
      display: block;
      content: "";
      width: 100%; }
  .b-auth__title {
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.1rem;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1rem;
    font-style: normal;
    font-weight: 500;
    color: #fff0e6; }
    @media (min-width: 451px) {
      .b-auth__title {
        top: 5rem;
        font-size: 1.5rem; } }
    @media (min-width: 661px) {
      .b-auth__title {
        top: 5.2rem;
        font-size: 1.5rem; } }
    @media (min-width: 951px) {
      .b-auth__title {
        top: 6.5rem;
        font-size: 1.7rem; } }
    @media (min-width: 1281px) {
      .b-auth__title {
        top: 8.7rem;
        font-size: 1.8rem; } }
  .b-auth__content {
    padding: 0;
    margin: 0 0 2.8rem;
    background-color: #ffffff;
    width: 100%; }
    @media (min-width: 451px) {
      .b-auth__content {
        margin-top: -1.8rem; } }
    @media (min-width: 661px) {
      .b-auth__content {
        margin-top: -5.1rem;
        background-color: #F4F4F4; } }
    @media (min-width: 951px) {
      .b-auth__content {
        margin-top: -7rem; } }
    @media (min-width: 1100px) {
      .b-auth__content {
        margin-top: -9rem; } }
    @media (min-width: 1281px) {
      .b-auth__content {
        margin-top: -10rem; } }
    @media (min-width: 1800px) {
      .b-auth__content {
        margin-top: -16rem; } }
  .b-auth__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .b-auth__container-content {
      width: 100%;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
      @media (min-width: 661px) {
        .b-auth__container-content {
          min-width: 668px; } }
    .b-auth__container form {
      width: 100%; }
      @media (min-width: 661px) {
        .b-auth__container form {
          max-width: 668px; } }
      @media (min-width: 951px) {
        .b-auth__container form {
          max-width: 920px; } }
  .b-auth__form {
    display: block;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    background-color: #fff;
    z-index: 1;
    border: none;
    border-radius: 5px; }
    @media (min-width: 661px) {
      .b-auth__form {
        padding: 60px 40px;
        max-width: 668px; } }
    @media (min-width: 951px) {
      .b-auth__form {
        padding: 60px 142.5px;
        max-width: 920px; } }
    .b-auth__form .link-items {
      margin: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: 100%; }
      @media (min-width: 661px) {
        .b-auth__form .link-items {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row;
          margin-top: 0;
          padding-top: 0 !important; } }
      @media (min-width: 951px) {
        .b-auth__form .link-items {
          -webkit-box-pack: center !important;
              -ms-flex-pack: center !important;
                  justify-content: center !important; } }
      .b-auth__form .link-items .link-item {
        width: 100%;
        margin: 0; }
        @media (min-width: 661px) {
          .b-auth__form .link-items .link-item {
            width: 50%; } }
        @media (min-width: 951px) {
          .b-auth__form .link-items .link-item {
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content; } }
        .b-auth__form .link-items .link-item:first-child {
          margin-bottom: 20px; }
          @media (min-width: 661px) {
            .b-auth__form .link-items .link-item:first-child {
              margin-right: 20px;
              margin-bottom: 20px; } }
        .b-auth__form .link-items .link-item a {
          font-size: 17px;
          font-weight: 400;
          line-height: 17px;
          letter-spacing: 0em;
          height: 50px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          width: calc(100% - 40px);
          margin: 0 auto;
          background-color: #EAEAEA;
          color: #252525; }
          @media (min-width: 661px) {
            .b-auth__form .link-items .link-item a {
              margin: 0;
              width: 100%;
              padding: 16.5px 0; } }
          @media (min-width: 951px) {
            .b-auth__form .link-items .link-item a {
              padding: 16.5px 30px; } }
          .b-auth__form .link-items .link-item a img {
            margin-left: 5px; }
        .b-auth__form .link-items .link-item .active-button {
          border: 1px solid #0000AA;
          background-color: #E6F3FF; }
  .b-auth__email {
    margin: 60px 20px 0 20px; }
    @media (min-width: 661px) {
      .b-auth__email {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        margin: 0; } }
  .b-auth__password {
    margin: 30px 20px 0 20px;
    position: relative; }
    .b-auth__password .password-control {
      position: absolute;
      top: 18px;
      right: 19px;
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url(/local/templates/uiscom/frontend/img/view.svg) 0 0 no-repeat; }
    .b-auth__password .password-control.view {
      background: url(/local/templates/uiscom/frontend/img/no-view.svg) 0 0 no-repeat; }
    @media (min-width: 661px) {
      .b-auth__password {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        margin: 40px 0 60px 0; } }
  .b-auth label {
    display: none;
    font-size: 17px;
    line-height: 24px;
    color: #252525;
    width: 100%; }
    @media (min-width: 661px) {
      .b-auth label {
        display: inline-block;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content; } }
    @media (min-width: 951px) {
      .b-auth label {
        font-size: 17px;
        line-height: 24px; } }
    @media (min-width: 1281px) {
      .b-auth label {
        font-size: 17px;
        line-height: 24px; } }
  .b-auth input {
    background: #f4f4f4;
    border: 1px solid #757373;
    border-radius: 25px;
    padding: 13px 20px;
    width: 100%;
    color: #878787;
    height: 50px; }
    .b-auth input:focus {
      background-color: #E6F3FF; }
    @media (min-width: 661px) {
      .b-auth input {
        width: 403px;
        height: 57px;
        border-radius: 60px; }
        .b-auth input::-webkit-input-placeholder {
          color: transparent; }
        .b-auth input::-moz-placeholder {
          color: transparent; }
        .b-auth input:-ms-input-placeholder {
          color: transparent; }
        .b-auth input::-ms-input-placeholder {
          color: transparent; }
        .b-auth input::placeholder {
          color: transparent; } }
    @media (min-width: 951px) {
      .b-auth input {
        padding: 17px 20px; } }
  .b-auth__containerbutton {
    margin: 60px 20px 20px 20px; }
    @media (min-width: 661px) {
      .b-auth__containerbutton {
        margin: 0 auto;
        width: 100%;
        max-width: 525px;
        padding-bottom: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; } }
  .b-auth__button {
    width: 100%;
    height: 50px; }
    @media (min-width: 661px) {
      .b-auth__button {
        display: inline-block;
        width: 236px; } }
    @media (min-width: 951px) {
      .b-auth__button {
        width: 236px;
        height: 50px; } }
    @media (min-width: 1281px) {
      .b-auth__button {
        width: 236px;
        height: 50px; } }
    .b-auth__button.disabled {
      opacity: .3;
      cursor: not-allowed;
      pointer-events: none;
      -webkit-filter: grayscale(100%);
              filter: grayscale(100%); }
  .b-auth__politic {
    margin: 20px 0px 40px 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    @media (min-width: 661px) {
      .b-auth__politic {
        -ms-flex-pack: distribute;
            justify-content: space-around;
        width: calc(100% - 236px);
        margin: 0; } }
    .b-auth__politic a {
      font-size: 14px;
      line-height: 21px;
      color: #9e9d9d;
      text-decoration: underline; }

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/banners/calculate-banner/calculate-banner.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-calculate-banner {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 54rem; }
  .b-calculate-banner__main {
    position: relative; }
  .b-calculate-banner__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-top: -3rem !important; }
    @media (max-width: 1920px) {
      .b-calculate-banner__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-calculate-banner__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-calculate-banner__items {
        margin-left: -12.5px;
        margin-right: -12.5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-calculate-banner__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-calculate-banner__items {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-calculate-banner__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-calculate-banner__items {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-calculate-banner__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-calculate-banner__items {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-calculate-banner__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-calculate-banner__items {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-calculate-banner__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
  .b-calculate-banner__item {
    position: relative;
    background-color: #fff;
    max-width: 19.15rem;
    margin-top: 3rem !important;
    border-radius: 1.5rem 1.5rem 0 0; }
    @media (max-width: 1920px) {
      .b-calculate-banner__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-calculate-banner__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-calculate-banner__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-calculate-banner__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-calculate-banner__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-calculate-banner__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-calculate-banner__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-calculate-banner__item {
        margin-right: auto !important;
        margin-left: auto !important; } }
    @media (min-width: 951px) {
      .b-calculate-banner__item {
        max-width: none; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-calculate-banner__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-calculate-banner__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-calculate-banner__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-calculate-banner__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-calculate-banner__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-calculate-banner__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-calculate-banner__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    .b-calculate-banner__item:nth-child(odd)::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: -8.75rem;
      top: 0;
      background-image: url("/images/calculate-banner/left.png");
      background-repeat: no-repeat;
      background-size: contain;
      z-index: -1; }
      @media (min-width: 1281px) {
        .b-calculate-banner__item:nth-child(odd)::before {
          left: -6.75rem; } }
    .b-calculate-banner__item:nth-child(even) .b-calculate-banner__sum {
      background-color: #e4fffc; }
    .b-calculate-banner__item:nth-child(even)::after {
      content: '';
      position: absolute;
      width: 6.6rem;
      height: 5.75rem;
      right: -0.75rem;
      top: -3rem;
      background-image: url("/images/calculate-banner/money.png");
      background-repeat: no-repeat;
      background-size: contain; }
      @media (min-width: 661px) {
        .b-calculate-banner__item:nth-child(even)::after {
          right: -1.75rem;
          top: -5rem;
          width: 9.6rem;
          height: 8.75rem; } }
      @media (min-width: 951px) {
        .b-calculate-banner__item:nth-child(even)::after {
          width: 10.6rem;
          height: 9.75rem;
          right: -4.75rem;
          top: -4rem; } }
      @media (min-width: 1281px) {
        .b-calculate-banner__item:nth-child(even)::after {
          right: -6.75rem; } }
    .b-calculate-banner__item:nth-child(even)::before {
      display: none;
      content: '';
      position: absolute;
      background-image: url("/images/calculate-banner/right.png");
      background-repeat: no-repeat;
      background-size: contain;
      width: 5rem;
      height: 5rem;
      bottom: 3rem;
      right: -2rem;
      z-index: -1; }
      @media (min-width: 451px) {
        .b-calculate-banner__item:nth-child(even)::before {
          display: block; } }
  .b-calculate-banner__sum {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    font-size: 2rem;
    min-height: 5rem;
    border-radius: 1.5rem 1.5rem 0 0;
    background-color: #e9efff; }
    @media (min-width: 451px) {
      .b-calculate-banner__sum {
        font-size: 2.6rem;
        min-height: 8rem; } }
    @media (min-width: 1281px) {
      .b-calculate-banner__sum {
        font-size: 3.25rem;
        min-height: 10rem; } }
  .b-calculate-banner__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: wrap column;
            flex-flow: wrap column;
    padding: 2rem 1rem; }
    @media (min-width: 451px) {
      .b-calculate-banner__content {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: nowrap row;
                flex-flow: nowrap row; } }
    .b-calculate-banner__content-image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: 9rem;
      margin-bottom: 0.5rem;
      -o-object-fit: contain;
         object-fit: contain; }
      @media (min-width: 451px) {
        .b-calculate-banner__content-image {
          margin-right: 0.5rem;
          margin-bottom: 0; } }
  .b-calculate-banner__sub-items {
    text-align: center; }
    @media (min-width: 451px) {
      .b-calculate-banner__sub-items {
        text-align: start; } }
  .b-calculate-banner__sub-item-count {
    color: #00a;
    font-weight: 700; }
  .b-calculate-banner__sub-item-title {
    font-weight: 400; }
  .b-calculate-banner__line {
    display: block;
    margin: 2rem auto;
    width: 5rem;
    height: 1px;
    background-color: #232323; }
    @media (min-width: 451px) {
      .b-calculate-banner__line {
        margin: 2rem 0; } }
  .b-calculate-banner__image-container {
    text-align: center;
    margin-bottom: 2.5rem; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/banners/cookie-banner/cookie-banner.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-cookie-banner {
  position: relative;
  background-color: #fff;
  padding: 24px;
  -webkit-box-shadow: 0px 4px 4px -1px rgba(12, 12, 13, 0.1), 0px 4px 4px -1px rgba(12, 12, 13, 0.05);
          box-shadow: 0px 4px 4px -1px rgba(12, 12, 13, 0.1), 0px 4px 4px -1px rgba(12, 12, 13, 0.05);
  /*
	&__button-mobile {
		display: flex;
		height: 2rem;

		@include for-width('middle') {
			display: none;
		}
	}

	&__close {
		position: absolute;
		display: none;
		width: 0.425rem;
		height: 0.425rem;
		right: 0.4rem;
		top: 0.4rem;
		mask-image: url('/images/icons/exit.svg');
		background-color: $color-gray;
		mask-size: contain;
		mask-repeat: no-repeat;
		mask-position: center;
		cursor: pointer;

		@include for-width('middle') {
			display: block;
		}

		&:hover {
			background-color: $color-black;
		}
	} */ }
  .b-cookie-banner__image {
    display: none;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 5.25rem;
    height: 100%;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover; }
    @media (min-width: 951px) {
      .b-cookie-banner__image {
        display: block; } }
  .b-cookie-banner__desc {
    font-size: .6rem;
    margin-bottom: 24px; }
  .b-cookie-banner__desc p {
    margin-bottom: 12px;
    font-size: .6rem;
    line-height: 1.05rem; }
  .b-cookie-banner__buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 16px; }
  .b-cookie-banner .b-button {
    width: 50%; }
  .b-cookie-banner .b-button__content {
    height: 2rem; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/banners/double-banner-equal/double-banner-equal.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-double-banner-equal__main {
  position: relative; }

.b-double-banner-equal__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-double-banner-equal__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-double-banner-equal__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-double-banner-equal__container {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-double-banner-equal__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-double-banner-equal__container {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-double-banner-equal__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-double-banner-equal__container {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-double-banner-equal__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-double-banner-equal__container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-double-banner-equal__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-double-banner-equal__container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-double-banner-equal__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-double-banner-equal__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-double-banner-equal__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-double-banner-equal__container {
    margin-left: -12.5px;
    margin-right: -12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-double-banner-equal__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-double-banner-equal__container {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-double-banner-equal__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-double-banner-equal__container {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-double-banner-equal__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-double-banner-equal__container {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-double-banner-equal__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-double-banner-equal__container {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-double-banner-equal__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

.b-double-banner-equal__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  padding: 1.5rem 1rem 1rem;
  border-radius: 5px; }
  @media (max-width: 1920px) {
    .b-double-banner-equal__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-double-banner-equal__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-double-banner-equal__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-double-banner-equal__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-double-banner-equal__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-double-banner-equal__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-double-banner-equal__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 951px) {
    .b-double-banner-equal__item {
      padding: 2.5rem 5rem 1.5rem 1.5rem; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-double-banner-equal__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-double-banner-equal__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-double-banner-equal__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-double-banner-equal__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-double-banner-equal__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-double-banner-equal__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-double-banner-equal__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-double-banner-equal__item.first {
    color: #fff0e6; }
    .b-double-banner-equal__item.first::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #232323;
      opacity: 0.5;
      z-index: 1;
      border-radius: 5px; }

.b-double-banner-equal__title {
  position: relative;
  max-width: 24.5rem;
  z-index: 2; }

.b-double-banner-equal__desc {
  position: relative;
  margin-top: 1.5rem;
  max-width: 24.5rem;
  z-index: 2; }

.b-double-banner-equal__button {
  position: relative;
  margin-top: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 2rem;
  z-index: 2; }

.b-double-banner-equal__back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
  border-radius: 5px; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/banners/double-banner/double-banner.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-double-banner__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-double-banner__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-double-banner__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-double-banner__container {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-double-banner__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-double-banner__container {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-double-banner__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-double-banner__container {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-double-banner__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-double-banner__container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-double-banner__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-double-banner__container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-double-banner__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-double-banner__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-double-banner__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-double-banner__container {
    margin-left: -12.5px;
    margin-right: -12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-double-banner__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-double-banner__container {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-double-banner__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-double-banner__container {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-double-banner__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-double-banner__container {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-double-banner__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-double-banner__container {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-double-banner__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

.b-double-banner__main {
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 1 auto !important;
          flex: 1 1 auto !important;
  position: relative;
  width: 100%;
  padding-top: 1.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  padding-bottom: 7rem; }
  @media (max-width: 1920px) {
    .b-double-banner__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-double-banner__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-double-banner__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-double-banner__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-double-banner__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-double-banner__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-double-banner__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 951px) {
    .b-double-banner__main {
      padding-top: 2.5rem; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-double-banner__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-double-banner__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-double-banner__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-double-banner__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-double-banner__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-double-banner__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-double-banner__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1500px) and (max-width: 1920px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1500px) and (max-width: 1280px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1500px) and (max-width: 950px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1500px) and (max-width: 660px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1500px) and (max-width: 450px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1500px) and (max-width: 320px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1500px) and (min-width: 1921px) {
  .b-double-banner__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-double-banner__main-title {
    position: relative;
    width: auto;
    max-width: 13rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    color: #232323;
    z-index: 5; }
    @media (min-width: 451px) {
      .b-double-banner__main-title {
        max-width: 22.5rem; } }
    @media (min-width: 661px) {
      .b-double-banner__main-title {
        max-width: 24.5rem; } }
    @media (min-width: 1281px) {
      .b-double-banner__main-title {
        margin-left: 1.5rem;
        margin-right: 1.5rem; } }
  .b-double-banner__main-desc {
    position: relative;
    width: auto;
    max-width: 13rem;
    margin-left: 1rem;
    margin-right: 1rem;
    color: #232323;
    z-index: 5; }
    @media (min-width: 451px) {
      .b-double-banner__main-desc {
        max-width: 22.5rem; } }
    @media (min-width: 661px) {
      .b-double-banner__main-desc {
        max-width: 24.5rem; } }
    @media (min-width: 1281px) {
      .b-double-banner__main-desc {
        margin-left: 1.5rem;
        margin-right: 1.5rem; } }

.b-double-banner__sub {
  position: relative;
  padding-top: 1.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  padding-bottom: 7rem; }
  @media (max-width: 1920px) {
    .b-double-banner__sub {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-double-banner__sub {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-double-banner__sub {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-double-banner__sub {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-double-banner__sub {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-double-banner__sub {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-double-banner__sub {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 951px) {
    .b-double-banner__sub {
      padding-top: 2.5rem; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-double-banner__sub {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(41.66667% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-double-banner__sub {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(41.66667% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-double-banner__sub {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(41.66667% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-double-banner__sub {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(41.66667% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-double-banner__sub {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(41.66667% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-double-banner__sub {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(41.66667% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-double-banner__sub {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(41.66667% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1500px) and (max-width: 1920px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1500px) and (max-width: 1280px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1500px) and (max-width: 950px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1500px) and (max-width: 660px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1500px) and (max-width: 450px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1500px) and (max-width: 320px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1500px) and (min-width: 1921px) {
  .b-double-banner__sub {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-double-banner__sub::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: black;
    opacity: 0.6;
    border-radius: 5px; }
  .b-double-banner__sub-title {
    position: relative;
    width: auto;
    max-width: 13rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    color: #fff0e6;
    z-index: 5; }
    @media (min-width: 451px) {
      .b-double-banner__sub-title {
        max-width: 22.5rem; } }
    @media (min-width: 661px) {
      .b-double-banner__sub-title {
        max-width: 16rem; } }
    @media (min-width: 1281px) {
      .b-double-banner__sub-title {
        margin-left: 1.5rem;
        margin-right: 1.5rem; } }
  .b-double-banner__sub-desc {
    position: relative;
    width: auto;
    max-width: 13rem;
    margin-left: 1rem;
    margin-right: 1rem;
    color: #fff0e6;
    z-index: 5; }
    @media (min-width: 451px) {
      .b-double-banner__sub-desc {
        max-width: 22.5rem; } }
    @media (min-width: 661px) {
      .b-double-banner__sub-desc {
        max-width: 16rem; } }
    @media (min-width: 1281px) {
      .b-double-banner__sub-desc {
        margin-left: 1.5rem;
        margin-right: 1.5rem; } }

.b-double-banner__button {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 12rem;
  margin: 0 1rem;
  height: 1.8rem;
  left: 0;
  right: 0;
  bottom: 1rem;
  z-index: 5; }
  @media (min-width: 451px) {
    .b-double-banner__button {
      width: auto;
      margin: 0;
      left: 1rem;
      right: auto; } }
  @media (min-width: 661px) {
    .b-double-banner__button {
      bottom: 1.5rem; } }
  @media (min-width: 951px) {
    .b-double-banner__button {
      left: 1rem; } }
  @media (min-width: 1281px) {
    .b-double-banner__button {
      left: 1.5rem; } }

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/banners/left-align-banner/left-align-banner.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-left-align-banner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }
  @media (max-width: 950px) {
    .b-left-align-banner {
      width: 100vw !important;
      margin-left: calc((50vw - 50%) * -1) !important;
      margin-right: calc((50vw - 50%) * -1) !important; } }
  .b-left-align-banner__event {
    font-weight: 400;
    font-size: 11px;
    line-height: 29px;
    padding: 3px 14px;
    border-radius: 60px;
    position: absolute;
    top: -15px;
    left: 0;
    color: #fff;
    z-index: 2; }
    @media (min-width: 951px) {
      .b-left-align-banner__event {
        font-size: 17px; } }
    @media (min-width: 451px) {
      .b-left-align-banner__event {
        font-size: 13px; } }
  .b-left-align-banner__back {
    position: absolute;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    opacity: 0.3; }
    @media (min-width: 951px) {
      .b-left-align-banner__back {
        opacity: 1; } }
    .b-left-align-banner__back--gradient::after {
      content: "";
      position: absolute;
      width: 100%;
      background-position: right bottom;
      height: 100%;
      border-radius: 5px;
      background-repeat: no-repeat;
      top: 0;
      background-image: url("/images/blue-gradient.png");
      background-size: cover;
      z-index: 2; }
      @media (min-width: 451px) {
        .b-left-align-banner__back--gradient::after {
          width: 100%; } }
  .b-left-align-banner__image-container {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden; }
  .b-left-align-banner__image, .b-left-align-banner__image-mobile {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: right;
       object-position: right; }
    .b-left-align-banner__image_opacity, .b-left-align-banner__image-mobile_opacity {
      opacity: 0.3; }
    @media (min-width: 951px) {
      .b-left-align-banner__image, .b-left-align-banner__image-mobile {
        opacity: 1; } }
  .b-left-align-banner__image {
    display: none; }
    @media (min-width: 451px) {
      .b-left-align-banner__image {
        display: block; } }
  .b-left-align-banner__image-mobile {
    display: block; }
    @media (min-width: 451px) {
      .b-left-align-banner__image-mobile {
        display: none; } }
  .b-left-align-banner__content {
    padding: 4rem 1rem 3.5rem;
    z-index: 1;
    position: relative; }
    @media (max-width: 1920px) {
      .b-left-align-banner__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-left-align-banner__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-left-align-banner__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-left-align-banner__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-left-align-banner__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-left-align-banner__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-left-align-banner__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (min-width: 451px) {
      .b-left-align-banner__content {
        padding: 4.5rem 1rem 4rem; }
        .b-left-align-banner__content div {
          max-width: 16rem; } }
    @media (min-width: 661px) {
      .b-left-align-banner__content {
        padding: 5rem 1rem 4.5rem; }
        .b-left-align-banner__content div {
          max-width: 20rem; } }
    @media (min-width: 951px) {
      .b-left-align-banner__content {
        padding: 6rem 0 5.5rem; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-left-align-banner__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(91.66667% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-left-align-banner__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(91.66667% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-left-align-banner__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(91.66667% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-left-align-banner__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(91.66667% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-left-align-banner__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(91.66667% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-left-align-banner__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(91.66667% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-left-align-banner__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(91.66667% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 951px) {
        .b-left-align-banner__content div {
          max-width: 22.5rem; } }
    @media (min-width: 1281px) {
      .b-left-align-banner__content {
        padding: 8rem 0 7rem; }
        .b-left-align-banner__content div {
          max-width: 26rem; } }
  .b-left-align-banner__desc {
    margin-bottom: 2rem; }
  .b-left-align-banner__button {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    height: 2rem; }
    @media (min-width: 1281px) {
      .b-left-align-banner__button {
        height: 3rem; } }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/banners/mail-banner/mail-banner.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-mail-banner__main {
  position: relative;
  padding: 2rem 1rem;
  text-align: center; }
  @media (max-width: 450px) {
    .b-mail-banner__main {
      width: 100vw !important;
      margin-left: calc((50vw - 50%) * -1) !important;
      margin-right: calc((50vw - 50%) * -1) !important; } }
  @media (min-width: 661px) {
    .b-mail-banner__main {
      padding: 3rem 1rem; } }
  @media (min-width: 661px) {
    .b-mail-banner__main {
      padding: 3rem 5rem; } }

.b-mail-banner__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
  border-radius: 5px;
  overflow: hidden; }
  .b-mail-banner__back::after {
    content: "";
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #232323;
    opacity: 0.75; }

.b-mail-banner__content {
  position: relative;
  z-index: 1;
  color: #fff0e6; }

.b-mail-banner__desc {
  margin-top: 0.5rem; }
  .b-mail-banner__desc-mail {
    padding: 4px;
    background-color: #00a;
    color: #fff0e6; }

.b-mail-banner__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 2.5rem; }

/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/banners/usual-banner-with-list/usual-banner-with-list.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-usual-banner-with-list {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 5px; }
  @media (max-width: 450px) {
    .b-usual-banner-with-list {
      width: 100vw !important;
      margin-left: calc((50vw - 50%) * -1) !important;
      margin-right: calc((50vw - 50%) * -1) !important; } }
  @media (min-width: 451px) {
    .b-usual-banner-with-list {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; } }
  .b-usual-banner-with-list__video-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3; }
    .b-usual-banner-with-list__video-container::before {
      content: "";
      position: absolute;
      width: 100%;
      border-radius: 5px;
      height: 100%;
      opacity: 0.7;
      background-color: #232323;
      z-index: 1; }
  .b-usual-banner-with-list__video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover; }
  .b-usual-banner-with-list__back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
    left: 0;
    z-index: 3; }
    .b-usual-banner-with-list__back--gradient::after {
      content: "";
      position: absolute;
      width: 80%;
      background-position: right bottom;
      height: 100%;
      border-radius: 5px;
      background-repeat: no-repeat;
      top: 0;
      background-image: url("/images/blue-gradient.png");
      background-size: cover;
      z-index: 2; }
      @media (min-width: 1281px) {
        .b-usual-banner-with-list__back--gradient::after {
          width: 40%; } }
    .b-usual-banner-with-list__back::before {
      content: "";
      position: absolute;
      width: 100%;
      border-radius: 5px;
      height: 100%;
      opacity: 0.7;
      background-color: #232323;
      z-index: 1; }
  .b-usual-banner-with-list__content {
    position: relative;
    padding-top: 2rem;
    margin-bottom: 1.5rem;
    z-index: 4; }
    @media (min-width: 451px) {
      .b-usual-banner-with-list__content {
        padding-top: 2.5rem; } }
    @media (min-width: 951px) {
      .b-usual-banner-with-list__content {
        padding-top: 3.5rem;
        margin-bottom: 2.5rem; } }
    @media (min-width: 1281px) {
      .b-usual-banner-with-list__content {
        padding-top: 4rem;
        margin-bottom: 2.5rem; } }
  .b-usual-banner-with-list__title {
    text-align: center;
    color: #fff0e6;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1rem; }
    @media (max-width: 1920px) {
      .b-usual-banner-with-list__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-usual-banner-with-list__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-usual-banner-with-list__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-usual-banner-with-list__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-usual-banner-with-list__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-usual-banner-with-list__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-usual-banner-with-list__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-usual-banner-with-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-usual-banner-with-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-usual-banner-with-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-usual-banner-with-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-usual-banner-with-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-usual-banner-with-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-usual-banner-with-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    @media (min-width: 661px) {
      .b-usual-banner-with-list__title {
        padding: 0; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-usual-banner-with-list__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-usual-banner-with-list__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-usual-banner-with-list__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-usual-banner-with-list__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-usual-banner-with-list__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-usual-banner-with-list__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-usual-banner-with-list__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-usual-banner-with-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-usual-banner-with-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-usual-banner-with-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-usual-banner-with-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-usual-banner-with-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-usual-banner-with-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-usual-banner-with-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-usual-banner-with-list__desc {
    text-align: center;
    color: #fff0e6;
    margin-bottom: 1.5rem;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1rem; }
    @media (max-width: 1920px) {
      .b-usual-banner-with-list__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-usual-banner-with-list__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-usual-banner-with-list__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-usual-banner-with-list__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-usual-banner-with-list__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-usual-banner-with-list__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-usual-banner-with-list__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (min-width: 451px) {
      .b-usual-banner-with-list__desc {
        margin-bottom: 1.5rem; } }
  @media (min-width: 451px) and (max-width: 1920px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 1280px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 950px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 660px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 450px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 320px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 661px) {
      .b-usual-banner-with-list__desc {
        padding: 0; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 951px) {
      .b-usual-banner-with-list__desc {
        margin-bottom: 2.5rem; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 1281px) {
      .b-usual-banner-with-list__desc {
        margin-bottom: 2rem; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-usual-banner-with-list__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1920px) {
    .b-usual-banner-with-list__points {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-usual-banner-with-list__points {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-usual-banner-with-list__points {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-usual-banner-with-list__points {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-usual-banner-with-list__points {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-usual-banner-with-list__points {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-usual-banner-with-list__points {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-usual-banner-with-list__points-container {
    padding: 0 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: auto;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 5rem; }
    @media (max-width: 1920px) {
      .b-usual-banner-with-list__points-container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-usual-banner-with-list__points-container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-usual-banner-with-list__points-container {
        margin-left: -12.5px;
        margin-right: -12.5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-usual-banner-with-list__points-container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-usual-banner-with-list__points-container {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-usual-banner-with-list__points-container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-usual-banner-with-list__points-container {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-usual-banner-with-list__points-container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-usual-banner-with-list__points-container {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-usual-banner-with-list__points-container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-usual-banner-with-list__points-container {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-usual-banner-with-list__points-container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (min-width: 451px) {
      .b-usual-banner-with-list__points-container {
        margin-bottom: 6.3rem; } }
    @media (min-width: 661px) {
      .b-usual-banner-with-list__points-container {
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap; } }
  .b-usual-banner-with-list__point {
    max-width: 16rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 1rem; }
    @media (max-width: 1920px) {
      .b-usual-banner-with-list__point {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 40px; } }
    @media (max-width: 1280px) {
      .b-usual-banner-with-list__point {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 25px; } }
    @media (max-width: 950px) {
      .b-usual-banner-with-list__point {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 30px; } }
    @media (max-width: 660px) {
      .b-usual-banner-with-list__point {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px; } }
    @media (max-width: 450px) {
      .b-usual-banner-with-list__point {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px; } }
    @media (max-width: 320px) {
      .b-usual-banner-with-list__point {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px; } }
    @media (min-width: 1921px) {
      .b-usual-banner-with-list__point {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 40px; } }
    .b-usual-banner-with-list__point-img {
      width: 2rem;
      margin-right: 2rem; }
    .b-usual-banner-with-list__point-desc {
      color: #fff; }
    @media (min-width: 451px) {
      .b-usual-banner-with-list__point {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        max-width: 9rem;
        margin-bottom: 0; } }
  @media (min-width: 451px) and (max-width: 1920px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 451px) and (max-width: 1280px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (min-width: 451px) and (max-width: 950px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (min-width: 451px) and (max-width: 660px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (min-width: 451px) and (max-width: 450px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 451px) and (max-width: 320px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
    @media (min-width: 451px) {
        .b-usual-banner-with-list__point-img {
          width: 3rem;
          margin-right: 0;
          margin-bottom: 0.75rem; }
        .b-usual-banner-with-list__point-desc {
          text-align: center; } }
    @media (min-width: 661px) {
      .b-usual-banner-with-list__point {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
    @media (min-width: 661px) {
        .b-usual-banner-with-list__point-img {
          margin-bottom: 0.5rem; } }
    @media (min-width: 951px) {
      .b-usual-banner-with-list__point {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 1281px) {
      .b-usual-banner-with-list__point {
        max-width: 12rem;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        text-align: left; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-usual-banner-with-list__point {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 1281px) {
        .b-usual-banner-with-list__point-img {
          margin-right: 1rem;
          margin-bottom: 0; }
        .b-usual-banner-with-list__point-desc {
          text-align: left; } }
  @media (max-width: 1920px) {
    .b-usual-banner-with-list__cell {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(8.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-usual-banner-with-list__cell {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(8.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-usual-banner-with-list__cell {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(8.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-usual-banner-with-list__cell {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(8.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-usual-banner-with-list__cell {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(8.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-usual-banner-with-list__cell {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(8.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-usual-banner-with-list__cell {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(8.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-usual-banner-with-list__cell {
      display: none; } }
  .b-usual-banner-with-list__button {
    position: absolute;
    max-width: 13.25rem;
    height: 2rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 1.5rem;
    z-index: 4; }
    @media (min-width: 451px) {
      .b-usual-banner-with-list__button {
        bottom: 2.5rem; } }

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/banners/usual-banner/usual-banner.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-usual-banner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 5px; }
  @media (max-width: 450px) {
    .b-usual-banner {
      width: 100vw !important;
      margin-left: calc((50vw - 50%) * -1) !important;
      margin-right: calc((50vw - 50%) * -1) !important; } }
  @media (min-width: 451px) {
    .b-usual-banner {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; } }
  .b-usual-banner a {
    color: #fff; }
    .b-usual-banner a:hover {
      text-decoration: underline;
      color: #9e9d9d; }
  .b-usual-banner__video-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3; }
  .b-usual-banner__video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover; }
  .b-usual-banner__back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
    left: 0;
    z-index: 3; }
    .b-usual-banner__back--gradient::after {
      content: "";
      position: absolute;
      width: 100%;
      background-position: right bottom;
      height: 100%;
      border-radius: 5px;
      background-repeat: no-repeat;
      top: 0;
      background-image: url("/images/blue-gradient.png");
      background-size: cover;
      z-index: 2; }
      @media (min-width: 451px) {
        .b-usual-banner__back--gradient::after {
          width: 100%; } }
  .b-usual-banner__back::before, .b-usual-banner__video-container::before {
    content: "";
    position: absolute;
    width: 100%;
    border-radius: 5px;
    height: 100%;
    opacity: 0.6;
    background-color: #232323;
    z-index: 1; }
  .b-usual-banner__content {
    position: relative;
    margin-top: 2rem !important;
    margin-bottom: 1.5rem;
    z-index: 4; }
    @media (min-width: 451px) {
      .b-usual-banner__content {
        margin-top: 4.5rem !important; } }
    @media (min-width: 661px) {
      .b-usual-banner__content {
        margin-top: 5rem !important; } }
    @media (min-width: 951px) {
      .b-usual-banner__content {
        margin-top: 6rem !important;
        margin-bottom: 2rem; } }
  .b-usual-banner__title {
    text-align: center;
    color: #fff;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1rem; }
    @media (max-width: 1920px) {
      .b-usual-banner__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-usual-banner__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 6.25px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-usual-banner__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 7.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-usual-banner__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-usual-banner__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-usual-banner__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-usual-banner__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-usual-banner__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-usual-banner__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-usual-banner__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-usual-banner__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-usual-banner__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-usual-banner__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-usual-banner__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-usual-banner__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-usual-banner__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-usual-banner__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-usual-banner__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-usual-banner__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-usual-banner__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-usual-banner__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
    @media (min-width: 951px) {
      .b-usual-banner__title {
        padding: 0; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-usual-banner__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-usual-banner__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-usual-banner__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-usual-banner__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-usual-banner__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-usual-banner__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-usual-banner__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  .b-usual-banner__desc {
    text-align: center;
    color: #fff;
    margin-bottom: 4rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1rem; }
    @media (max-width: 1920px) {
      .b-usual-banner__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-usual-banner__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 6.25px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-usual-banner__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 7.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-usual-banner__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-usual-banner__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-usual-banner__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-usual-banner__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (min-width: 451px) {
      .b-usual-banner__desc {
        margin-bottom: 4.25rem !important; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-usual-banner__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-usual-banner__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-usual-banner__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-usual-banner__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-usual-banner__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-usual-banner__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-usual-banner__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
    @media (min-width: 951px) {
      .b-usual-banner__desc {
        margin-bottom: 5.5rem !important; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-usual-banner__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-usual-banner__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-usual-banner__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-usual-banner__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-usual-banner__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-usual-banner__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-usual-banner__desc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
    @media (max-width: 450px) {
      .b-usual-banner__desc.disable {
        margin-bottom: 0 !important; } }
  .b-usual-banner__metas {
    font-size: 0.7rem;
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 20px auto;
    gap: 20px; }
    .b-usual-banner__metas img {
      max-width: 60px; }
    @media (min-width: 951px) {
      .b-usual-banner__metas {
        text-align: left;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        max-width: 330px; } }
  .b-usual-banner__autor-desc {
    width: calc(100% - 80px); }
  .b-usual-banner__meta_row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px; }
  .b-usual-banner__meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    .b-usual-banner__meta img {
      margin-right: 5px; }
    @media (min-width: 951px) {
      .b-usual-banner__meta img {
        margin-right: 10px; } }
  .b-usual-banner__button {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 2rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 1.5rem;
    z-index: 4; }
    @media (min-width: 951px) {
      .b-usual-banner__button {
        bottom: 2rem; } }
    @media (min-width: 1281px) {
      .b-usual-banner__button {
        bottom: 2.5rem; } }
  .b-usual-banner__tags {
    font-size: 0.75rem;
    margin: 1rem 0; }
    .b-usual-banner__tags a {
      color: #9e9d9d;
      display: inline-block;
      margin: 0 .5rem .5rem 0; }
      .b-usual-banner__tags a:hover {
        color: #00a; }
    @media (min-width: 661px) {
      .b-usual-banner__tags {
        font-size: .7rem; } }

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/blog/blog-headers/blog-headers.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-blog-headers {
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  /*
	.h3 {
		position: relative;
		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			width: 21px;
			background: url("data:image/svg+xml,%3Csvg width='21' height='13' viewBox='0 0 21 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.75 2.12524L10.5 10.8752L19.25 2.12524' stroke='%23252525' stroke-width='2.91667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center center;
			transform: rotate(180deg);
		}

	}*/
  /*
	&--hidden {
		& .b-blog-headers__items {
			display: none;
		}
		.h3::after {
			transform: rotate(0deg);
		}
	} */ }
  .b-blog-headers__items {
    margin-top: 20px;
    color: #00a; }

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/blog/blog-linking/blog-linking.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
@media (min-width: 1281px) {
  .b-blog-linking {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1100px; } }

.b-blog-linking__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px; }

.b-blog-linking__title {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 25px;
  background-color: #0000AA;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  margin: auto;
  font-size: 0.85rem;
  font-weight: 500;
  position: absolute;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: .5rem 1rem; }
  @media (min-width: 951px) {
    .b-blog-linking__title {
      min-width: 80%; } }

.b-blog-linking__item {
  height: 210px;
  background-color: #fff;
  position: relative;
  border-radius: 5px;
  color: #fff !important;
  overflow: hidden;
  width: 100%;
  margin-bottom: 1rem; }
  .b-blog-linking__item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover; }
  .b-blog-linking__item:hover .b-blog-linking__title {
    max-width: 100%;
    z-index: 100; }
  .b-blog-linking__item:hover:after {
    content: '';
    position: absolute;
    top: 0;
    left: -60px;
    right: -60px;
    bottom: 0;
    border-radius: 999px 999px 5px 5px;
    background-color: #0000AA; }
  @media (min-width: 661px) {
    .b-blog-linking__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-blog-linking__item_1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-blog-linking__item_1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-blog-linking__item_1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-blog-linking__item_1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-blog-linking__item_1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-blog-linking__item_1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-blog-linking__item_1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 951px) {
    .b-blog-linking__item_3 {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px; }
    .b-blog-linking__item_4 {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 20px);
      margin-left: 10px;
      margin-right: 10px; } }

/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/blog/blog-other/blog-other.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-blog-other {
  padding: 1rem;
  background-color: #fff;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (min-width: 1281px) {
    .b-blog-other {
      margin-left: auto !important;
      margin-right: auto !important; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-blog-other {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-blog-other {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-blog-other {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-blog-other {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-blog-other {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-blog-other {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-blog-other {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  .b-blog-other .h2 {
    color: #d9d9d9;
    font-weight: 700;
    margin-bottom: 1.2rem;
    font-size: 1.5rem; }
    @media (min-width: 661px) {
      .b-blog-other .h2 {
        font-size: 1.75rem; } }
    @media (min-width: 1281px) {
      .b-blog-other .h2 {
        font-size: 2.1rem; } }
  @media (max-width: 1920px) {
    .b-blog-other__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-blog-other__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-blog-other__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-blog-other__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-blog-other__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-blog-other__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-blog-other__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-blog-other__main {
      margin-right: 20px !important; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-blog-other__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-blog-other__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-blog-other__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-blog-other__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-blog-other__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-blog-other__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-blog-other__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  .b-blog-other__items a {
    font-size: .8rem;
    display: inline-block;
    padding-left: 10px;
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px); }
  .b-blog-other__items li {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none; }
  .b-blog-other__items img {
    vertical-align: middle;
    margin-left: 5px; }
  .b-blog-other__image {
    display: none; }
    .b-blog-other__image img {
      max-height: 300px;
      width: 100%;
      -o-object-fit: cover;
         object-fit: cover; }
    @media (min-width: 1281px) {
      .b-blog-other__image {
        display: block;
        border-radius: 10px;
        overflow: hidden; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-blog-other__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-blog-other__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-blog-other__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-blog-other__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-blog-other__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-blog-other__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-blog-other__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }

/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/breadcrumbs/breadcrumbs.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-breadcrumbs {
  display: none;
  margin-bottom: 0.25rem;
  margin-top: 0.5rem; }
  .b-breadcrumbs div {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .b-breadcrumbs p {
    color: #9e9d9d;
    display: inline-block; }
  .b-breadcrumbs a {
    color: #737373;
    border-color: #737373; }
    .b-breadcrumbs a:hover {
      color: #e5e5e5;
      border-color: #e5e5e5; }
  .b-breadcrumbs span {
    color: #9e9d9d;
    margin: 0 5px; }
  @media (min-width: 951px) {
    .b-breadcrumbs {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/button/button.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-button {
  height: 100%;
  min-height: 30px; }
  .b-button.disabled {
    opacity: 0.6;
    pointer-events: none; }
  .b-button__content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-item-align: end;
        align-self: flex-end;
    padding: 0 1rem;
    height: 100%;
    -webkit-transition: background-color 0.3s, color 0.3s;
    -o-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 30px;
    border: none;
    cursor: pointer; }
    .b-button__content div {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      text-align: center;
      white-space: nowrap;
      margin-bottom: 0; }
    .b-button__content div.p {
      font-size: 0.7rem; }
    .b-button__content a {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 0; }
    .b-button__content.green {
      background-color: #00a769;
      color: #fff; }
      .b-button__content.green:hover {
        background-color: #008654; }
    .b-button__content.pink {
      background-color: #ffd9d7;
      color: #232323; }
      .b-button__content.pink:hover {
        background-color: #fff0e6; }
    .b-button__content.blue {
      background-color: #00a;
      color: #fff0e6; }
      .b-button__content.blue:hover {
        background-color: #99cdf1; }
    .b-button__content.border {
      padding: 0 1.2rem;
      border: 1px solid #232323;
      border-radius: 8px;
      -webkit-transition: background-color 0.3s, color 0.3s, border-color 0.3s;
      -o-transition: background-color 0.3s, color 0.3s, border-color 0.3s;
      transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
      .b-button__content.border:hover {
        border-color: #00a;
        color: #00a; }
    .b-button__content.magenta {
      background-color: #fb62a3;
      color: #fff; }
      .b-button__content.magenta:hover {
        opacity: 0.7; }
    .b-button__content.red {
      background-color: #ff454f;
      color: #fff; }
      .b-button__content.red:hover {
        opacity: 0.7; }
    .b-button__content.blue-pink {
      border-radius: 8px;
      background-color: #00a;
      color: #ffd9d7; }
      .b-button__content.blue-pink:hover {
        background-color: #99cdf1; }
    .b-button__content.gray {
      border-radius: 30px;
      background-color: #757373;
      color: #fff; }
      .b-button__content.gray:hover {
        background-color: #979797; }
    .b-button__content.black {
      background-color: #232323;
      color: #ffd9d7; }
      .b-button__content.black:hover {
        opacity: 0.8; }
    .b-button__content.border-pink {
      border: 1px solid #FFF0E6;
      color: #FFF0E6;
      border-radius: 50px;
      -webkit-transition: opacity 0.3s;
      -o-transition: opacity 0.3s;
      transition: opacity 0.3s; }
      .b-button__content.border-pink:hover {
        border: 1px solid #FFD9D7;
        color: #FFD9D7; }
  .b-button__icon {
    margin-right: 0.75rem; }
  .b-button__arrow {
    position: relative;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 1rem;
    margin-left: 0.25rem;
    height: 0.4rem;
    top: 1px;
    -webkit-mask-image: url("/images/icons/arrow.svg");
            mask-image: url("/images/icons/arrow.svg");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: right center;
            mask-position: right center;
    background-color: #232323;
    padding-top: 1px;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; }
    .b-button__arrow.dissable {
      display: none; }
    .b-button__arrow.active {
      -webkit-transform: rotate(0.5turn);
              transform: rotate(0.5turn);
      -webkit-mask-position: left center;
              mask-position: left center; }

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/buttons-download/buttons-download.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-buttons-download__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -1rem;
  margin-left: -1.9rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.b-buttons-download__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 1.9rem;
  margin-top: 1rem;
  width: 12rem;
  height: 3.25rem;
  border-radius: 19.2px;
  position: relative; }

.b-buttons-download__img {
  position: absolute;
  bottom: 8px;
  left: 14px; }

.b-buttons-download__title {
  padding-left: 5rem;
  color: #fff;
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.2rem; }

/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./node_modules/ion-rangeslider/css/ion.rangeSlider.min.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*!Ion.RangeSlider, 2.3.1, © Denis Ineshin, 2010 - 2019, IonDen.com, Build date: 2019-12-19 16:51:02*/
.irs {
  position: relative;
  display: block;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 12px;
  font-family: Arial,sans-serif; }

.irs-line {
  position: relative;
  display: block;
  overflow: hidden;
  outline: none !important; }

.irs-bar {
  position: absolute;
  display: block;
  left: 0;
  width: 0; }

.irs-shadow {
  position: absolute;
  display: none;
  left: 0;
  width: 0; }

.irs-handle {
  position: absolute;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: default;
  z-index: 1; }

.irs-handle.type_last {
  z-index: 2; }

.irs-min, .irs-max {
  position: absolute;
  display: block;
  cursor: default; }

.irs-min {
  left: 0; }

.irs-max {
  right: 0; }

.irs-from, .irs-to, .irs-single {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  cursor: default;
  white-space: nowrap; }

.irs-grid {
  position: absolute;
  display: none;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px; }

.irs-with-grid .irs-grid {
  display: block; }

.irs-grid-pol {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 8px;
  background: #000; }

.irs-grid-pol.small {
  height: 4px; }

.irs-grid-text {
  position: absolute;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  text-align: center;
  font-size: 9px;
  line-height: 9px;
  padding: 0 3px;
  color: #000; }

.irs-disable-mask {
  position: absolute;
  display: block;
  top: 0;
  left: -1%;
  width: 102%;
  height: 100%;
  cursor: default;
  background: rgba(0, 0, 0, 0);
  z-index: 2; }

.lt-ie9 .irs-disable-mask {
  background: #000;
  filter: alpha(opacity=0);
  cursor: not-allowed; }

.irs-disabled {
  opacity: .4; }

.irs-hidden-input {
  position: absolute !important;
  display: block !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  outline: none !important;
  z-index: -9999 !important;
  background: none !important;
  border-style: solid !important;
  border-color: transparent !important; }

.irs--flat {
  height: 40px; }

.irs--flat.irs-with-grid {
  height: 60px; }

.irs--flat .irs-line {
  top: 25px;
  height: 12px;
  background-color: #e1e4e9;
  border-radius: 4px; }

.irs--flat .irs-bar {
  top: 25px;
  height: 12px;
  background-color: #ed5565; }

.irs--flat .irs-bar--single {
  border-radius: 4px 0 0 4px; }

.irs--flat .irs-shadow {
  height: 1px;
  bottom: 16px;
  background-color: #e1e4e9; }

.irs--flat .irs-handle {
  top: 22px;
  width: 16px;
  height: 18px;
  background-color: transparent; }

.irs--flat .irs-handle > i:first-child {
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  margin-left: -1px;
  background-color: #da4453; }

.irs--flat .irs-handle.state_hover > i:first-child, .irs--flat .irs-handle:hover > i:first-child {
  background-color: #a43540; }

.irs--flat .irs-min, .irs--flat .irs-max {
  top: 0;
  padding: 1px 3px;
  color: #999;
  font-size: 10px;
  line-height: 1.333;
  text-shadow: none;
  background-color: #e1e4e9;
  border-radius: 4px; }

.irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-single {
  color: white;
  font-size: 10px;
  line-height: 1.333;
  text-shadow: none;
  padding: 1px 5px;
  background-color: #ed5565;
  border-radius: 4px; }

.irs--flat .irs-from:before, .irs--flat .irs-to:before, .irs--flat .irs-single:before {
  position: absolute;
  display: block;
  content: "";
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -3px;
  overflow: hidden;
  border: 3px solid transparent;
  border-top-color: #ed5565; }

.irs--flat .irs-grid-pol {
  background-color: #e1e4e9; }

.irs--flat .irs-grid-text {
  color: #999; }

.irs--big {
  height: 55px; }

.irs--big.irs-with-grid {
  height: 70px; }

.irs--big .irs-line {
  top: 33px;
  height: 12px;
  background-color: white;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(-50%, #ddd), color-stop(150%, white));
  background: -o-linear-gradient(top, #ddd -50%, white 150%);
  background: linear-gradient(to bottom, #ddd -50%, white 150%);
  border: 1px solid #ccc;
  border-radius: 12px; }

.irs--big .irs-bar {
  top: 33px;
  height: 12px;
  background-color: #92bce0;
  border: 1px solid #428bca;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(30%, #428bca), to(#b9d4ec));
  background: -o-linear-gradient(top, #ffffff 0%, #428bca 30%, #b9d4ec 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #428bca 30%, #b9d4ec 100%);
  -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5);
          box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5); }

.irs--big .irs-bar--single {
  border-radius: 12px 0 0 12px; }

.irs--big .irs-shadow {
  height: 1px;
  bottom: 16px;
  background-color: rgba(66, 139, 202, 0.5); }

.irs--big .irs-handle {
  top: 25px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-color: #cbcfd5;
  background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(30%, #B4B9BE), to(white));
  background: -o-linear-gradient(top, white 0%, #B4B9BE 30%, white 100%);
  background: linear-gradient(to bottom, white 0%, #B4B9BE 30%, white 100%);
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px white;
          box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px white;
  border-radius: 30px; }

.irs--big .irs-handle.state_hover, .irs--big .irs-handle:hover {
  border-color: rgba(0, 0, 0, 0.45);
  background-color: #939ba7;
  background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(30%, #919BA5), to(white));
  background: -o-linear-gradient(top, white 0%, #919BA5 30%, white 100%);
  background: linear-gradient(to bottom, white 0%, #919BA5 30%, white 100%); }

.irs--big .irs-min, .irs--big .irs-max {
  top: 0;
  padding: 1px 5px;
  color: white;
  text-shadow: none;
  background-color: #9f9f9f;
  border-radius: 3px; }

.irs--big .irs-from, .irs--big .irs-to, .irs--big .irs-single {
  color: white;
  text-shadow: none;
  padding: 1px 5px;
  background-color: #428bca;
  background: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3071a9));
  background: -o-linear-gradient(top, #428bca 0%, #3071a9 100%);
  background: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
  border-radius: 3px; }

.irs--big .irs-grid-pol {
  background-color: #428bca; }

.irs--big .irs-grid-text {
  color: #428bca; }

.irs--modern {
  height: 55px; }

.irs--modern.irs-with-grid {
  height: 55px; }

.irs--modern .irs-line {
  top: 25px;
  height: 5px;
  background-color: #d1d6e0;
  background: -webkit-gradient(linear, left top, left bottom, from(#e0e4ea), to(#d1d6e0));
  background: -o-linear-gradient(top, #e0e4ea 0%, #d1d6e0 100%);
  background: linear-gradient(to bottom, #e0e4ea 0%, #d1d6e0 100%);
  border: 1px solid #a3adc1;
  border-bottom-width: 0;
  border-radius: 5px; }

.irs--modern .irs-bar {
  top: 25px;
  height: 5px;
  background: #20b426;
  background: -webkit-gradient(linear, left top, left bottom, from(#20b426), to(#18891d));
  background: -o-linear-gradient(top, #20b426 0%, #18891d 100%);
  background: linear-gradient(to bottom, #20b426 0%, #18891d 100%); }

.irs--modern .irs-bar--single {
  border-radius: 5px 0 0 5px; }

.irs--modern .irs-shadow {
  height: 1px;
  bottom: 21px;
  background-color: rgba(209, 214, 224, 0.5); }

.irs--modern .irs-handle {
  top: 37px;
  width: 12px;
  height: 13px;
  border: 1px solid #a3adc1;
  border-top-width: 0;
  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
          box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px; }

.irs--modern .irs-handle > i:nth-child(1) {
  position: absolute;
  display: block;
  top: -4px;
  left: 1px;
  width: 6px;
  height: 6px;
  border: 1px solid #a3adc1;
  background: white;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg); }

.irs--modern .irs-handle > i:nth-child(2) {
  position: absolute;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  top: 0;
  left: 0;
  width: 10px;
  height: 12px;
  background: #e9e6e6;
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(#e9e6e6));
  background: -o-linear-gradient(top, white 0%, #e9e6e6 100%);
  background: linear-gradient(to bottom, white 0%, #e9e6e6 100%);
  border-radius: 0 0 3px 3px; }

.irs--modern .irs-handle > i:nth-child(3) {
  position: absolute;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 5px;
  border-left: 1px solid #a3adc1;
  border-right: 1px solid #a3adc1; }

.irs--modern .irs-handle.state_hover, .irs--modern .irs-handle:hover {
  border-color: #7685a2;
  background: #c3c7cd;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(30%, #919ba5), to(#ffffff));
  background: -o-linear-gradient(top, #ffffff 0%, #919ba5 30%, #ffffff 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #919ba5 30%, #ffffff 100%); }

.irs--modern .irs-handle.state_hover > i:nth-child(1), .irs--modern .irs-handle:hover > i:nth-child(1) {
  border-color: #7685a2; }

.irs--modern .irs-handle.state_hover > i:nth-child(3), .irs--modern .irs-handle:hover > i:nth-child(3) {
  border-color: #48536a; }

.irs--modern .irs-min, .irs--modern .irs-max {
  top: 0;
  font-size: 10px;
  line-height: 1.333;
  text-shadow: none;
  padding: 1px 5px;
  color: white;
  background-color: #d1d6e0;
  border-radius: 5px; }

.irs--modern .irs-from, .irs--modern .irs-to, .irs--modern .irs-single {
  font-size: 10px;
  line-height: 1.333;
  text-shadow: none;
  padding: 1px 5px;
  background-color: #20b426;
  color: white;
  border-radius: 5px; }

.irs--modern .irs-from:before, .irs--modern .irs-to:before, .irs--modern .irs-single:before {
  position: absolute;
  display: block;
  content: "";
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -3px;
  overflow: hidden;
  border: 3px solid transparent;
  border-top-color: #20b426; }

.irs--modern .irs-grid {
  height: 25px; }

.irs--modern .irs-grid-pol {
  background-color: #dedede; }

.irs--modern .irs-grid-text {
  color: silver;
  font-size: 13px; }

.irs--sharp {
  height: 50px;
  font-size: 12px;
  line-height: 1; }

.irs--sharp.irs-with-grid {
  height: 57px; }

.irs--sharp .irs-line {
  top: 30px;
  height: 2px;
  background-color: black;
  border-radius: 2px; }

.irs--sharp .irs-bar {
  top: 30px;
  height: 2px;
  background-color: #ee22fa; }

.irs--sharp .irs-bar--single {
  border-radius: 2px 0 0 2px; }

.irs--sharp .irs-shadow {
  height: 1px;
  bottom: 21px;
  background-color: rgba(0, 0, 0, 0.5); }

.irs--sharp .irs-handle {
  top: 25px;
  width: 10px;
  height: 10px;
  background-color: #a804b2; }

.irs--sharp .irs-handle > i:first-child {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #a804b2; }

.irs--sharp .irs-handle.state_hover, .irs--sharp .irs-handle:hover {
  background-color: black; }

.irs--sharp .irs-handle.state_hover > i:first-child, .irs--sharp .irs-handle:hover > i:first-child {
  border-top-color: black; }

.irs--sharp .irs-min, .irs--sharp .irs-max {
  color: white;
  font-size: 14px;
  line-height: 1;
  top: 0;
  padding: 3px 4px;
  opacity: .4;
  background-color: #a804b2;
  border-radius: 2px; }

.irs--sharp .irs-from, .irs--sharp .irs-to, .irs--sharp .irs-single {
  font-size: 14px;
  line-height: 1;
  text-shadow: none;
  padding: 3px 4px;
  background-color: #a804b2;
  color: white;
  border-radius: 2px; }

.irs--sharp .irs-from:before, .irs--sharp .irs-to:before, .irs--sharp .irs-single:before {
  position: absolute;
  display: block;
  content: "";
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -3px;
  overflow: hidden;
  border: 3px solid transparent;
  border-top-color: #a804b2; }

.irs--sharp .irs-grid {
  height: 25px; }

.irs--sharp .irs-grid-pol {
  background-color: #dedede; }

.irs--sharp .irs-grid-text {
  color: silver;
  font-size: 13px; }

.irs--round {
  height: 50px; }

.irs--round.irs-with-grid {
  height: 65px; }

.irs--round .irs-line {
  top: 36px;
  height: 4px;
  background-color: #dee4ec;
  border-radius: 4px; }

.irs--round .irs-bar {
  top: 36px;
  height: 4px;
  background-color: #006cfa; }

.irs--round .irs-bar--single {
  border-radius: 4px 0 0 4px; }

.irs--round .irs-shadow {
  height: 4px;
  bottom: 21px;
  background-color: rgba(222, 228, 236, 0.5); }

.irs--round .irs-handle {
  top: 26px;
  width: 24px;
  height: 24px;
  border: 4px solid #006cfa;
  background-color: white;
  border-radius: 24px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
          box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3); }

.irs--round .irs-handle.state_hover, .irs--round .irs-handle:hover {
  background-color: #f0f6ff; }

.irs--round .irs-min, .irs--round .irs-max {
  color: #333;
  font-size: 14px;
  line-height: 1;
  top: 0;
  padding: 3px 5px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px; }

.irs--round .irs-from, .irs--round .irs-to, .irs--round .irs-single {
  font-size: 14px;
  line-height: 1;
  text-shadow: none;
  padding: 3px 5px;
  background-color: #006cfa;
  color: white;
  border-radius: 4px; }

.irs--round .irs-from:before, .irs--round .irs-to:before, .irs--round .irs-single:before {
  position: absolute;
  display: block;
  content: "";
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -3px;
  overflow: hidden;
  border: 3px solid transparent;
  border-top-color: #006cfa; }

.irs--round .irs-grid {
  height: 25px; }

.irs--round .irs-grid-pol {
  background-color: #dedede; }

.irs--round .irs-grid-text {
  color: silver;
  font-size: 13px; }

.irs--square {
  height: 50px; }

.irs--square.irs-with-grid {
  height: 60px; }

.irs--square .irs-line {
  top: 31px;
  height: 4px;
  background-color: #dedede; }

.irs--square .irs-bar {
  top: 31px;
  height: 4px;
  background-color: black; }

.irs--square .irs-shadow {
  height: 2px;
  bottom: 21px;
  background-color: #dedede; }

.irs--square .irs-handle {
  top: 25px;
  width: 16px;
  height: 16px;
  border: 3px solid black;
  background-color: white;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }

.irs--square .irs-handle.state_hover, .irs--square .irs-handle:hover {
  background-color: #f0f6ff; }

.irs--square .irs-min, .irs--square .irs-max {
  color: #333;
  font-size: 14px;
  line-height: 1;
  top: 0;
  padding: 3px 5px;
  background-color: rgba(0, 0, 0, 0.1); }

.irs--square .irs-from, .irs--square .irs-to, .irs--square .irs-single {
  font-size: 14px;
  line-height: 1;
  text-shadow: none;
  padding: 3px 5px;
  background-color: black;
  color: white; }

.irs--square .irs-grid {
  height: 25px; }

.irs--square .irs-grid-pol {
  background-color: #dedede; }

.irs--square .irs-grid-text {
  color: silver;
  font-size: 11px; }

/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/fields/range-selector/range-selector.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-range-selector .irs {
  border-radius: 50px; }

.b-range-selector .irs-bar {
  top: 0.25rem;
  height: 1.5rem;
  border: none;
  background: #ffd9d7;
  -webkit-box-shadow: none;
          box-shadow: none; }

.b-range-selector .irs-line {
  top: 0.25rem;
  height: 1.5rem;
  border-radius: 50px;
  border: none;
  background-color: #f4f4f4; }

.b-range-selector .irs-handle {
  top: 0;
  z-index: 10;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  width: 2rem;
  height: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 3px solid #fff;
  background: #ffd9d7 !important; }
  .b-range-selector .irs-handle.state_hover {
    border-color: #fff;
    background: #fae7e6 !important; }
  .b-range-selector .irs-handle:hover {
    border-color: #fff;
    background: #fae7e6 !important; }

.b-range-selector .irs-grid-text {
  top: 0;
  color: #232323;
  font-size: 0.75rem;
  line-height: 1.05rem;
  padding: 0 10px; }
  @media (min-width: 951px) {
    .b-range-selector .irs-grid-text {
      font-size: 0.85rem;
      line-height: 1.2rem; } }

.b-range-selector .irs-grid-pol {
  display: none; }

.b-range-selector .irs-grid-pol.small {
  display: none; }

.b-range-selector .irs-grid.points {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 5;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  pointer-events: none; }
  .b-range-selector .irs-grid.points .irs-grid-text {
    display: none; }
  .b-range-selector .irs-grid.points .irs-grid-pol {
    display: block;
    top: auto;
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 1.5rem;
    background-color: #9e9d9d; }
  .b-range-selector .irs-grid.points .irs-grid-pol.small {
    display: none; }

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/filters/categories-filter/categories-filter.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-categories-filter__main {
  padding: 2.5rem 2rem;
  border-radius: 5px; }

.b-categories-filter__name {
  font-weight: 500;
  color: #00a; }

.b-categories-filter__subitems {
  margin-top: 1rem;
  margin-left: 1rem; }

.b-categories-filter__subitem {
  display: block;
  color: #232323; }
  .b-categories-filter__subitem.active {
    color: #00a;
    pointer-events: none; }

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/filters/price-filter/price-filter.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-price-filter__main {
  padding: 2.5rem 2rem;
  border-radius: 5px; }

.b-price-filter__title {
  font-weight: 500;
  color: #00a;
  margin-bottom: 1rem; }

.b-price-filter__price-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2rem; }

.b-price-filter__label {
  cursor: pointer; }

.b-price-filter__price-min, .b-price-filter__price-max {
  max-width: 4rem;
  width: 100%;
  height: 1.5rem;
  background: #fff;
  border-radius: 0.75rem;
  margin-left: 0.4rem;
  margin-right: 0.9rem;
  text-align: center;
  border: none;
  outline: none; }

.b-price-filter__brands-search {
  max-width: 12.25rem;
  width: 100%;
  height: 1.5rem;
  background: #fff;
  border-radius: 0.75rem;
  border: none;
  outline: none;
  padding-left: 1rem;
  margin-bottom: 1rem; }

.b-price-filter__brands-item.disabled {
  display: none; }

.b-price-filter__brands-item input {
  display: none; }

.b-price-filter__brands-item label {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer; }
  .b-price-filter__brands-item label::before {
    content: '';
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 0.75rem;
    height: 0.75rem;
    background-color: #fff;
    margin-right: 0.75rem; }
  .b-price-filter__brands-item label::after {
    content: '';
    display: none;
    position: absolute;
    width: 0.6rem;
    height: 0.6rem;
    background-image: url("/images/icons/checkbox_ok.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    left: 0.12rem; }

.b-price-filter__brands-item input:checked + label::after {
  display: block; }

.b-price-filter__brands-more {
  display: inline-block;
  color: #00a;
  border-bottom: 1px solid #00a;
  margin-top: 1rem;
  cursor: pointer; }
  .b-price-filter__brands-more:hover {
    border: none; }

.b-price-filter__buttons {
  margin-top: 2rem;
  margin-bottom: -0.5rem; }

.b-price-filter__submit {
  display: inline-block;
  height: 1.5rem;
  margin-bottom: 0.5rem; }
  .b-price-filter__submit .b-button__content {
    border-radius: 0.25rem; }

.b-price-filter__clear {
  display: inline-block;
  height: 1.5rem;
  margin-bottom: 0.5rem; }
  .b-price-filter__clear .b-button__content {
    border-radius: 0.25rem; }

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/chat-form/chat-form.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-chat-form {
  width: 100%; }
  .b-chat-form__label {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-bottom: 1rem;
    width: 100%; }
    @media (min-width: 451px) {
      .b-chat-form__label {
        width: 5rem;
        margin-bottom: 0;
        margin-right: 2rem; } }
    @media (min-width: 661px) {
      .b-chat-form__label {
        margin-top: 0.5rem;
        width: 11rem; } }
  .b-chat-form__field {
    margin-bottom: 1.5rem !important;
    position: relative; }
    .b-chat-form__field:last-child {
      margin-bottom: 0 !important; }
    .b-chat-form__field input,
    .b-chat-form__field textarea {
      border: none !important;
      width: 100%;
      padding-left: 1.75rem;
      background-color: #f4f4f4;
      outline: none;
      overflow: hidden; }
      .b-chat-form__field input::-webkit-input-placeholder, .b-chat-form__field textarea::-webkit-input-placeholder {
        color: #9e9d9d; }
      .b-chat-form__field input::-moz-placeholder, .b-chat-form__field textarea::-moz-placeholder {
        color: #9e9d9d; }
      .b-chat-form__field input:-ms-input-placeholder, .b-chat-form__field textarea:-ms-input-placeholder {
        color: #9e9d9d; }
      .b-chat-form__field input::-ms-input-placeholder, .b-chat-form__field textarea::-ms-input-placeholder {
        color: #9e9d9d; }
      .b-chat-form__field input::placeholder,
      .b-chat-form__field textarea::placeholder {
        color: #9e9d9d; }
    .b-chat-form__field input {
      height: 2.5rem;
      border-radius: 2.5rem; }
    .b-chat-form__field textarea {
      padding-top: 0.75rem;
      height: 5rem;
      resize: none;
      border-radius: 1.25rem; }
    .b-chat-form__field.tao-error-field input,
    .b-chat-form__field.tao-error-field textarea,
    .b-chat-form__field.tao-error-field label::before {
      border: 1px solid #ff4c62 !important; }
    @media (min-width: 451px) {
      .b-chat-form__field {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; } }
    .b-chat-form__field .iti {
      width: 100%; }
  .b-chat-form__input {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto; }
  .b-chat-form__form-submit {
    display: none; }
  .b-chat-form__submit {
    height: 2.5rem;
    margin-top: 3rem; }
    @media (min-width: 451px) {
      .b-chat-form__submit {
        display: inline-block; } }
    .b-chat-form__submit.disabled {
      opacity: 0.6;
      pointer-events: none; }
    .b-chat-form__submit .b-button {
      min-width: 10rem; }
  .b-chat-form .tao-form-errors {
    margin-bottom: 1.5rem !important;
    padding: 0 !important;
    border: none; }
    .b-chat-form .tao-form-errors li {
      padding: 0;
      margin-left: 0; }
      .b-chat-form .tao-form-errors li::before {
        display: none; }
  .b-chat-form .shadow {
    display: none !important; }
  .b-chat-form__ok {
    display: none;
    text-align: center; }
    .b-chat-form__ok.active {
      display: block; }
    .b-chat-form__ok-title {
      display: block;
      margin-top: 3rem; }
    .b-chat-form__ok-desc {
      margin-top: 0.5rem; }
  .b-chat-form__agree .little-head {
    margin-left: 20px; }
    @media (max-width: 450px) {
      .b-chat-form__agree .little-head {
        display: block;
        text-align: left;
        margin-left: 16%; } }
  .b-chat-form__containerbutton {
    color: #232323; }
    .b-chat-form__containerbutton .little-head {
      margin-left: 20px; }
  .b-chat-form__containerbutton, .b-chat-form__agree {
    color: #232323;
    font-size: 14px;
    margin-top: 20px; }
    .b-chat-form__containerbutton a, .b-chat-form__agree a {
      color: #232323;
      text-decoration: underline; }
    .b-chat-form__containerbutton input[type=checkbox]:checked + span, .b-chat-form__agree input[type=checkbox]:checked + span {
      background: url(/images/icons/checkbox_ok.png) 6px 1px no-repeat, url(/images/icons/checkbox_back.png) 0 0 no-repeat; }
    .b-chat-form__containerbutton input[type=checkbox] + span, .b-chat-form__agree input[type=checkbox] + span {
      position: absolute;
      left: 0;
      top: 0;
      background: url(/images/icons/checkbox_back.png) 0 0 no-repeat;
      border: none !important;
      width: 100%;
      height: 100%;
      border-radius: 5px; }
    .b-chat-form__containerbutton label.checkbox, .b-chat-form__agree label.checkbox {
      width: 30px;
      height: 30px;
      display: inline-block;
      position: relative;
      float: left; }
      .b-chat-form__containerbutton label.checkbox span, .b-chat-form__agree label.checkbox span {
        width: 30px;
        height: 30px; }
  .b-chat-form__register-confirm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .b-chat-form__politic.little-head {
    margin-left: 21px; }
  .b-chat-form__error {
    position: absolute;
    width: 100%;
    height: 20px;
    color: #FF4C62;
    font-size: 14px;
    text-align: right;
    bottom: -22px;
    /*@include for-width('mobile') {
			top: -22px;
			text-align: center;
		}
		@include for-width('mobile', 'down') {
			bottom: -22px;
		}*/ }
  .b-chat-form__error-politicagree {
    position: relative;
    top: 0;
    font-size: 12px;
    text-align: left; }

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/consultation-form/consultation-form.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-consultation-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%; }
  .b-consultation-form small {
    font-size: .7rem;
    display: block;
    margin-top: 15px;
    color: #888787; }
  .b-consultation-form input[type="text"] {
    background-color: #f4f4f4 !important;
    height: 2rem !important; }
    @media (min-width: 951px) {
      .b-consultation-form input[type="text"] {
        height: 2.5rem !important; } }
  .b-consultation-form__content {
    position: relative; }
  .b-consultation-form input[type='radio'] {
    display: none; }
  .b-consultation-form .tao-form {
    display: none; }
  .b-consultation-form__fio, .b-consultation-form__phone, .b-consultation-form__email {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 12px; }
    .b-consultation-form__fio label, .b-consultation-form__phone label, .b-consultation-form__email label {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: 5.9rem;
      margin-right: 0.5rem; }
    .b-consultation-form__fio .iti, .b-consultation-form__phone .iti, .b-consultation-form__email .iti {
      width: 100%; }
    @media (min-width: 951px) {
      .b-consultation-form__fio label, .b-consultation-form__phone label, .b-consultation-form__email label {
        width: 7rem;
        margin-right: 1.5rem; } }
    @media (max-width: 660px) {
      .b-consultation-form__fio, .b-consultation-form__phone, .b-consultation-form__email {
        -webkit-box-align: baseline;
            -ms-flex-align: baseline;
                align-items: baseline;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 10px; } }
  .b-consultation-form__datetime {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 1.5rem; }
    .b-consultation-form__datetime-label {
      margin-bottom: 1rem;
      text-align: center; }
    @media (min-width: 661px) {
      .b-consultation-form__datetime {
        text-align: start; } }
    @media (min-width: 951px) {
      .b-consultation-form__datetime {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row; }
        .b-consultation-form__datetime-label {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 auto;
                  flex: 0 0 auto;
          text-align: start;
          width: 7rem;
          margin-right: 1.5rem;
          margin-bottom: 0; } }
  .b-consultation-form__datetime-hide {
    display: none; }
  .b-consultation-form__inputs {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto; }
  .b-consultation-form__day {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .b-consultation-form__day-label {
      display: block;
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      border-radius: 50px;
      text-align: center;
      padding: 0.6rem 0;
      margin-left: 0.5rem;
      background-color: #f4f4f4;
      cursor: pointer; }
      .b-consultation-form__day-label.active {
        background-color: #ffd9d7;
        pointer-events: none; }
      .b-consultation-form__day-label.disabled {
        opacity: 0.5;
        pointer-events: none; }
      .b-consultation-form__day-label:hover {
        background-color: #fae7e6; }
      .b-consultation-form__day-label:first-child {
        margin-left: 0; }
  .b-consultation-form__time {
    margin-top: 1rem; }
    @media (min-width: 951px) {
      .b-consultation-form__time {
        margin-top: 1.5rem; } }
  .b-consultation-form__result {
    margin-top: 1.5rem; }
    .b-consultation-form__result span {
      color: #00a; }
    @media (min-width: 951px) {
      .b-consultation-form__result {
        margin-top: 2rem; } }
  .b-consultation-form__result-hide {
    display: none; }
  .b-consultation-form__container {
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 1.5rem;
    text-align: center; }
    @media (min-width: 951px) {
      .b-consultation-form__container {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        text-align: start;
        margin-top: 2rem; } }
    .b-consultation-form__container.active {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
  .b-consultation-form__button {
    min-width: 13rem;
    height: 2rem;
    margin-bottom: 1rem; }
    @media (min-width: 951px) {
      .b-consultation-form__button {
        max-width: none;
        margin-bottom: 0;
        height: 2.5rem; } }
    .b-consultation-form__button.unactive {
      opacity: 0.6;
      pointer-events: none; }
  .b-consultation-form__error {
    display: none;
    color: #ff4c62; }
    .b-consultation-form__error.active {
      display: block; }
  .b-consultation-form__success {
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 1.5rem;
    text-align: center; }
    @media (min-width: 951px) {
      .b-consultation-form__success {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        text-align: start;
        margin-top: 2rem; } }
    .b-consultation-form__success.active {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    .b-consultation-form__success-button {
      pointer-events: none;
      min-width: 14rem;
      height: 2rem;
      margin-bottom: 1rem; }
      @media (min-width: 951px) {
        .b-consultation-form__success-button {
          max-width: none;
          margin-bottom: 0;
          height: 2.5rem; } }
    .b-consultation-form__success-link {
      color: #00a;
      border-color: #00a; }
      @media (min-width: 951px) {
        .b-consultation-form__success-link {
          margin-left: 1.5rem; } }
  .b-consultation-form__capcha {
    margin-top: 1rem; }
  .b-consultation-form__register-confirm {
    text-align: left;
    width: 100%;
    font-size: 12px; }
    @media (min-width: 951px) {
      .b-consultation-form__register-confirm {
        line-height: 18px;
        font-size: 14px;
        line-height: 21px; } }
  .b-consultation-form__containerbutton {
    width: 100%;
    text-align: center;
    margin-top: 25px;
    color: #888787; }
    .b-consultation-form__containerbutton a {
      color: #888787;
      text-decoration: underline; }
      @media (min-width: 951px) {
        .b-consultation-form__containerbutton a {
          line-height: 21px; } }
    .b-consultation-form__containerbutton .before {
      display: none; }
    .b-consultation-form__containerbutton.error .before {
      display: block;
      position: absolute;
      bottom: -26px;
      left: 0;
      width: 100%;
      color: #ff4c62;
      font-size: 12px;
      line-height: 12px; }
  .b-consultation-form__error {
    font-size: 12px;
    padding-left: 0; }
    @media (min-width: 661px) {
      .b-consultation-form__error {
        padding-left: 150px;
        font-size: 14px; } }
    @media (min-width: 951px) {
      .b-consultation-form__error {
        padding-left: 190px; } }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/dantist-form/dantist-form.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-dantist-form {
  width: 100%; }
  .b-dantist-form .tao-form {
    margin: 0 !important; }
  .b-dantist-form .ok-message {
    display: none !important; }
  .b-dantist-form__label {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-bottom: 1rem;
    width: 100%; }
    @media (min-width: 451px) {
      .b-dantist-form__label {
        width: 5rem;
        margin-bottom: 0;
        margin-right: 2rem; } }
    @media (min-width: 661px) {
      .b-dantist-form__label {
        margin-top: 0.5rem;
        width: 7.5rem; } }
  .b-dantist-form__field {
    margin-bottom: 1.5rem !important;
    position: relative; }
    .b-dantist-form__field:last-child {
      margin-bottom: 0 !important; }
    .b-dantist-form__field input[type="text"],
    .b-dantist-form__field textarea {
      border: none !important;
      width: 100%;
      padding-left: 1.75rem;
      background-color: #f4f4f4;
      outline: none;
      overflow: hidden; }
      .b-dantist-form__field input[type="text"]::-webkit-input-placeholder, .b-dantist-form__field textarea::-webkit-input-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-dantist-form__field input[type="text"]::-moz-placeholder, .b-dantist-form__field textarea::-moz-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-dantist-form__field input[type="text"]:-ms-input-placeholder, .b-dantist-form__field textarea:-ms-input-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-dantist-form__field input[type="text"]::-ms-input-placeholder, .b-dantist-form__field textarea::-ms-input-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-dantist-form__field input[type="text"]::placeholder,
      .b-dantist-form__field textarea::placeholder {
        color: #9e9d9d;
        opacity: 1; }
    .b-dantist-form__field input[type="text"] {
      height: 2.5rem;
      border-radius: 2.5rem; }
    .b-dantist-form__field textarea {
      padding-top: 0.75rem;
      height: 5rem;
      resize: none;
      border-radius: 1.25rem; }
    .b-dantist-form__field input[name="promo"] {
      background-color: #e1efff; }
    .b-dantist-form__field.tao-error-field input[type="text"],
    .b-dantist-form__field.tao-error-field textarea,
    .b-dantist-form__field.tao-error-field label::before {
      border: 1px solid #ff4c62 !important; }
    @media (min-width: 451px) {
      .b-dantist-form__field {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; } }
    .b-dantist-form__field .iti {
      width: 100%; }
  .b-dantist-form__input {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto; }
  .b-dantist-form__form-submit {
    display: none; }
  .b-dantist-form__submit {
    display: inline-block;
    margin-top: 1rem;
    height: 3rem; }
    @media (min-width: 951px) {
      .b-dantist-form__submit {
        margin-top: 2rem; } }
  .b-dantist-form__success {
    display: none;
    margin-top: 2rem;
    min-height: 3rem;
    pointer-events: none; }
  .b-dantist-form__button {
    height: 2.5rem; }
  .b-dantist-form .tao-form-errors {
    margin-bottom: 1.5rem !important;
    padding: 0.5rem 1rem !important;
    border: 1px solid #ff4c62;
    background-color: #fff; }
    .b-dantist-form .tao-form-errors li {
      padding: 0; }
      .b-dantist-form .tao-form-errors li::before {
        display: none; }
  .b-dantist-form__ok {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    display: none;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100%; }
    .b-dantist-form__ok-back {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #232323;
      opacity: 0.6;
      z-index: -1; }
    .b-dantist-form__ok-content {
      text-align: center;
      width: 16rem;
      padding: 0.75rem 1rem 2rem;
      background-color: #fff; }
    .b-dantist-form__ok-close {
      display: block;
      margin-bottom: 0.75rem;
      margin-left: auto;
      width: 0.6rem;
      height: 0.6rem;
      -webkit-mask-image: url("/images/icons/exit.svg");
              mask-image: url("/images/icons/exit.svg");
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-position: center;
              mask-position: center;
      background-color: #979797;
      cursor: pointer; }
      .b-dantist-form__ok-close:hover {
        opacity: 0.6; }
    .b-dantist-form__ok-icon {
      display: block;
      width: 2.5rem;
      height: 2.5rem;
      background-image: url("/images/icons/success.svg");
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 1.5rem; }
    .b-dantist-form__ok-title {
      margin-bottom: 0.75rem;
      text-align: center; }
    .b-dantist-form__ok-desc {
      margin-bottom: 2rem;
      text-align: center; }
    .b-dantist-form__ok-continue {
      display: inline-block;
      margin-left: auto;
      margin-right: auto;
      border-bottom: 1px solid #232323;
      cursor: pointer; }
      .b-dantist-form__ok-continue:hover {
        border: none; }
  .b-dantist-form__containerbutton {
    float: left; }
    .b-dantist-form__containerbutton .little-head a {
      color: inherit; }
  .b-dantist-form__register-confirm {
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .b-dantist-form__error {
    position: absolute;
    width: 100%;
    height: 20px;
    color: #FF4C62;
    font-size: 14px;
    text-align: right;
    bottom: -22px; }

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/event-form/event-form.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-event-form {
  width: 100%; }
  .b-event-form .tao-form {
    margin: 0 !important; }
  .b-event-form .ok-message {
    display: none !important; }
  .b-event-form__label {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-bottom: 1rem;
    width: 100%; }
    @media (min-width: 451px) {
      .b-event-form__label {
        width: 5rem;
        margin-bottom: 0;
        margin-right: 2rem; } }
    @media (min-width: 661px) {
      .b-event-form__label {
        margin-top: 0.5rem;
        width: 7.5rem; } }
  .b-event-form__field {
    margin-bottom: 1.5rem !important;
    position: relative; }
    .b-event-form__field:last-child {
      margin-bottom: 0 !important; }
    .b-event-form__field input[type="text"],
    .b-event-form__field textarea {
      border: none !important;
      width: 100%;
      padding-left: 1.75rem;
      background-color: #f4f4f4;
      outline: none;
      overflow: hidden; }
      .b-event-form__field input[type="text"]::-webkit-input-placeholder, .b-event-form__field textarea::-webkit-input-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-event-form__field input[type="text"]::-moz-placeholder, .b-event-form__field textarea::-moz-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-event-form__field input[type="text"]:-ms-input-placeholder, .b-event-form__field textarea:-ms-input-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-event-form__field input[type="text"]::-ms-input-placeholder, .b-event-form__field textarea::-ms-input-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-event-form__field input[type="text"]::placeholder,
      .b-event-form__field textarea::placeholder {
        color: #9e9d9d;
        opacity: 1; }
    .b-event-form__field input[type="text"] {
      height: 2.5rem;
      border-radius: 2.5rem; }
    .b-event-form__field textarea {
      padding-top: 0.75rem;
      height: 5rem;
      resize: none;
      border-radius: 1.25rem; }
    .b-event-form__field input[name="promo"] {
      background-color: #e1efff; }
    .b-event-form__field .field-politic,
    .b-event-form__field .field-politic_partner {
      visibility: hidden; }
    .b-event-form__field.tao-error-field input[type="text"],
    .b-event-form__field.tao-error-field textarea,
    .b-event-form__field.tao-error-field label::before {
      border: 1px solid #ff4c62 !important; }
    @media (min-width: 451px) {
      .b-event-form__field {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; } }
    .b-event-form__field .iti {
      width: 100%; }
  .b-event-form__input {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto; }
  .b-event-form__form-submit {
    display: none; }
  .b-event-form__submit {
    display: inline-block;
    margin-top: 1rem;
    height: 3rem; }
    @media (min-width: 951px) {
      .b-event-form__submit {
        margin-top: 2rem; } }
  .b-event-form__success {
    display: none;
    margin-top: 2rem;
    min-height: 3rem;
    pointer-events: none; }
  .b-event-form__button {
    height: 2.5rem; }
  .b-event-form .tao-form-errors {
    margin-bottom: 1.5rem !important;
    padding: 0.5rem 1rem !important;
    border: 1px solid #ff4c62;
    background-color: #fff; }
    .b-event-form .tao-form-errors li {
      padding: 0; }
      .b-event-form .tao-form-errors li::before {
        display: none; }
  .b-event-form__ok {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    display: none;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100%; }
    .b-event-form__ok-back {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #232323;
      opacity: 0.6;
      z-index: -1; }
    .b-event-form__ok-content {
      text-align: center;
      width: 16rem;
      padding: 0.75rem 1rem 2rem;
      background-color: #fff; }
    .b-event-form__ok-close {
      display: block;
      margin-bottom: 0.75rem;
      margin-left: auto;
      width: 0.6rem;
      height: 0.6rem;
      -webkit-mask-image: url("/images/icons/exit.svg");
              mask-image: url("/images/icons/exit.svg");
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-position: center;
              mask-position: center;
      background-color: #979797;
      cursor: pointer; }
      .b-event-form__ok-close:hover {
        opacity: 0.6; }
    .b-event-form__ok-icon {
      display: block;
      width: 2.5rem;
      height: 2.5rem;
      background-image: url("/images/icons/success.svg");
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 1.5rem; }
    .b-event-form__ok-title {
      margin-bottom: 0.75rem;
      text-align: center; }
    .b-event-form__ok-desc {
      margin-bottom: 2rem;
      text-align: center; }
    .b-event-form__ok-continue {
      display: inline-block;
      margin-left: auto;
      margin-right: auto;
      border-bottom: 1px solid #232323;
      cursor: pointer; }
      .b-event-form__ok-continue:hover {
        border: none; }
  .b-event-form__containerbutton {
    float: left; }
    .b-event-form__containerbutton .little-head a {
      color: inherit; }
  .b-event-form__register-confirm {
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .b-event-form__error {
    position: absolute;
    width: 100%;
    height: 20px;
    color: #FF4C62;
    font-size: 14px;
    text-align: right;
    bottom: -22px; }

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/image-with-form/image-with-form.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-image-with-form {
  position: relative; }
  .b-image-with-form__back {
    position: absolute;
    border-radius: 5px;
    height: 100%;
    z-index: -1; }
    @media (max-width: 1700px) {
      .b-image-with-form__back {
        width: 100vw !important;
        margin-left: calc((50vw - 50%) * -1) !important;
        margin-right: calc((50vw - 50%) * -1) !important; } }
    @media (max-width: 1280px) {
      .b-image-with-form__back {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important; } }
    @media (max-width: 950px) {
      .b-image-with-form__back {
        width: 100vw !important;
        margin-left: calc((50vw - 50%) * -1) !important;
        margin-right: calc((50vw - 50%) * -1) !important; } }
    @media (min-width: 1700px) {
      .b-image-with-form__back {
        width: 100%; } }
  .b-image-with-form__main {
    padding: 2rem 0;
    margin-left: auto !important;
    margin-right: auto !important; }
    @media (min-width: 951px) {
      .b-image-with-form__main {
        padding: 4rem 0; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-image-with-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-image-with-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-image-with-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-image-with-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-image-with-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-image-with-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-image-with-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
    @media (min-width: 1281px) {
      .b-image-with-form__main {
        padding: 4rem 0; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-image-with-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-image-with-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-image-with-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-image-with-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-image-with-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-image-with-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-image-with-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-image-with-form__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-image-with-form__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-image-with-form__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-image-with-form__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-image-with-form__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-image-with-form__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-image-with-form__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
  .b-image-with-form__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .b-image-with-form__content {
    text-align: center; }
    @media (min-width: 1281px) {
      .b-image-with-form__content {
        text-align: start; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-image-with-form__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-image-with-form__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-image-with-form__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-image-with-form__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-image-with-form__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-image-with-form__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-image-with-form__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-image-with-form__image-container {
    display: none; }
    @media (min-width: 1281px) {
      .b-image-with-form__image-container {
        display: block; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-image-with-form__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-image-with-form__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-image-with-form__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-image-with-form__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-image-with-form__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-image-with-form__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-image-with-form__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-image-with-form__title {
    font-weight: 700; }
  .b-image-with-form__desc {
    margin-top: 1rem; }
  .b-image-with-form__form {
    display: block;
    margin: 2rem auto 0;
    max-width: 23.5rem; }
    @media (min-width: 1281px) {
      .b-image-with-form__form {
        margin: 2rem 0 0; } }

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/info-form/info-form.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-info-form {
  border-radius: 5px; }
  @media (max-width: 450px) {
    .b-info-form {
      width: 100vw !important;
      margin-left: calc((50vw - 50%) * -1) !important;
      margin-right: calc((50vw - 50%) * -1) !important; } }
  .b-info-form.success .b-info-form__item {
    display: none; }
  .b-info-form__success {
    display: none;
    text-align: center;
    margin-top: 2rem;
    min-height: 3rem; }
  .b-info-form__container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: 5px; }
  .b-info-form__content {
    position: relative;
    width: 100%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    z-index: 2; }
    @media (min-width: 451px) {
      .b-info-form__content {
        padding-bottom: 2rem;
        padding-top: 2rem; } }
    @media (min-width: 951px) {
      .b-info-form__content {
        padding-bottom: 2.5rem;
        padding-top: 2.5rem; } }
  .b-info-form__gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-image: url("/images/blue-gradient-form.png");
    background-repeat: no-repeat;
    background-size: auto 100%; }
  .b-info-form__item {
    width: 100%;
    padding: 0 1rem;
    border-radius: 5px; }
  .b-info-form__title {
    text-align: center;
    margin-top: 0; }
  .b-info-form__untitle {
    text-align: center;
    margin-top: 0; }
    @media (min-width: 661px) {
      .b-info-form__untitle {
        margin-bottom: 2rem; } }
  .b-info-form__form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
    @media (min-width: 661px) {
      .b-info-form__form {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding: 0 20%; } }
  .b-info-form .policy-form {
    margin-top: 32px !important; }
  .b-info-form__button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 0 auto;
    height: 2.5rem;
    white-space: nowrap; }
    @media (min-width: 661px) {
      .b-info-form__button {
        margin: 0; } }
  .b-info-form__input-container {
    position: relative;
    margin-bottom: 1.5rem;
    margin-right: 1rem;
    width: 100%; }
    .b-info-form__input-container .iti {
      width: 100%; }
    @media (min-width: 661px) {
      .b-info-form__input-container {
        margin-bottom: 0; } }
  .b-info-form__input-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 1rem; }
    @media (min-width: 661px) {
      .b-info-form__input-row {
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap; } }
  .b-info-form__input {
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
    height: 2rem !important;
    font-size: 0.85rem !important;
    background-color: transparent !important;
    border-bottom: 1px solid #fff !important;
    border-radius: 0 !important;
    margin: 1rem auto 0; }
    .b-info-form__input::-webkit-input-placeholder {
      font-weight: 500 !important;
      font-size: 0.85rem !important;
      text-align: center !important;
      opacity: 1 !important; }
    .b-info-form__input::-moz-placeholder {
      font-weight: 500 !important;
      font-size: 0.85rem !important;
      text-align: center !important;
      opacity: 1 !important; }
    .b-info-form__input:-ms-input-placeholder {
      font-weight: 500 !important;
      font-size: 0.85rem !important;
      text-align: center !important;
      opacity: 1 !important; }
    .b-info-form__input::-ms-input-placeholder {
      font-weight: 500 !important;
      font-size: 0.85rem !important;
      text-align: center !important;
      opacity: 1 !important; }
    .b-info-form__input::placeholder {
      font-weight: 500 !important;
      font-size: 0.85rem !important;
      text-align: center !important;
      opacity: 1 !important; }
      @media (min-width: 451px) {
        .b-info-form__input::-webkit-input-placeholder {
          font-size: 1.25rem !important; }
        .b-info-form__input::-moz-placeholder {
          font-size: 1.25rem !important; }
        .b-info-form__input:-ms-input-placeholder {
          font-size: 1.25rem !important; }
        .b-info-form__input::-ms-input-placeholder {
          font-size: 1.25rem !important; }
        .b-info-form__input::placeholder {
          font-size: 1.25rem !important; } }
    .b-info-form__input:focus::-webkit-input-placeholder {
      color: transparent !important; }
    .b-info-form__input:focus::-moz-placeholder {
      color: transparent !important; }
    .b-info-form__input:focus:-ms-input-placeholder {
      color: transparent !important; }
    .b-info-form__input:focus::-ms-input-placeholder {
      color: transparent !important; }
    .b-info-form__input:focus::placeholder {
      color: transparent !important; }
    @media (min-width: 451px) {
      .b-info-form__input {
        font-size: 1.25rem !important; } }
    @media (min-width: 661px) {
      .b-info-form__input {
        margin: 0; } }
  .b-info-form__agree label.head {
    font-size: 12px;
    line-height: 18px;
    color: #888787;
    margin-left: 14px; }
    .b-info-form__agree label.head a {
      color: inherit;
      text-decoration: underline; }
      .b-info-form__agree label.head a:hover {
        color: #686767; }
    @media (min-width: 700px) {
      .b-info-form__agree label.head {
        display: inline-block; } }
    @media (min-width: 951px) {
      .b-info-form__agree label.head {
        font-size: 14px;
        line-height: 18px; } }
    @media (min-width: 1281px) {
      .b-info-form__agree label.head {
        font-size: 14px;
        line-height: 21px; } }
  .b-info-form__agree label.checkbox {
    width: 32px;
    height: 30px;
    display: inline-block;
    position: relative; }
  .b-info-form__agree input[type='checkbox'] + span {
    position: absolute;
    left: 0;
    top: 0;
    background: #FFFFFF;
    border: none !important;
    width: 100%;
    height: 100%; }
    .b-info-form__agree input[type='checkbox'] + span::before {
      border-color: #ff4c62 !important; }
  .b-info-form__agree input[type="checkbox"]:checked + span {
    background: url("/images/icons/checkbox_ok.png") 6px 1px no-repeat, #FFFFFF; }
  .b-info-form__error {
    position: absolute;
    display: none;
    margin: 0 auto;
    left: 0;
    right: 0;
    color: #ff4c62;
    text-align: center; }
  .b-info-form__politic {
    margin: 25px auto;
    text-align: left;
    color: #888787;
    font-size: 12px;
    line-height: 18px;
    margin-left: 50px; }
    .b-info-form__politic a {
      font-size: 12px;
      line-height: 18px;
      color: #888787;
      text-decoration: underline; }
      .b-info-form__politic a:hover {
        color: #686767; }
      @media (min-width: 951px) {
        .b-info-form__politic a {
          font-size: 14px;
          line-height: 21px; } }
    @media (min-width: 951px) {
      .b-info-form__politic {
        font-size: 14px;
        line-height: 21px; } }
  .b-info-form__register-confirm {
    text-align: left;
    width: 100%; }
  .b-info-form__containerbutton {
    width: 100%;
    text-align: center;
    position: relative; }
    .b-info-form__containerbutton a {
      text-decoration: underline; }
    .b-info-form__containerbutton .before {
      display: none; }
    .b-info-form__containerbutton.error .before {
      display: block;
      position: absolute;
      bottom: -26px;
      left: 0;
      width: 100%;
      height: 20px;
      color: #ff4c62;
      font-size: 12px;
      line-height: 12px; }
    .b-info-form__containerbutton input[type=checkbox]:checked + span {
      background: url(/images/icons/checkbox_ok.png) 6px 1px no-repeat, #FFFFFF; }
    .b-info-form__containerbutton input[type=checkbox] + span {
      position: absolute;
      left: 0;
      top: 0;
      background: #FFFFFF;
      border: none !important;
      width: 100%;
      height: 100%; }
    .b-info-form__containerbutton label.checkbox {
      width: 32px;
      height: 30px;
      display: inline-block;
      position: relative;
      float: left; }
  .b-info-form__error-agree {
    position: absolute;
    width: 100%;
    height: 20px;
    color: #FF4C62;
    font-size: 14px;
    text-align: center;
    left: 0;
    /*@include for-width('mobile') {
			top: -22px;
			text-align: center;
		}
		@include for-width('mobile', 'down') {
			bottom: -22px;
		}*/ }
  .b-info-form__error-politicagree {
    position: relative;
    top: 0;
    font-size: 12px;
    text-align: left; }
  .b-info-form div.tao-error-field input.text {
    background-color: #FFEDEF;
    border: 1px solid #FF4C62; }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/landing-form/landing-form.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-landing-form__label {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%; }
  @media (min-width: 451px) {
    .b-landing-form__label {
      width: 5rem;
      margin-bottom: 0;
      margin-right: 2rem; } }
  @media (min-width: 661px) {
    .b-landing-form__label {
      width: 11rem; } }

.b-landing-form__field {
  margin-bottom: 1.5rem !important;
  position: relative; }
  .b-landing-form__field:last-child {
    margin-bottom: 0 !important; }
  @media (min-width: 451px) {
    .b-landing-form__field {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }
  .b-landing-form__field .iti {
    width: 100%; }
    .b-landing-form__field .iti input[type='text'] {
      padding: 0 0.5rem 0 2.5rem; }

.b-landing-form__input {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; }

.b-landing-form__form-submit {
  display: none; }

.b-landing-form__submit {
  margin-top: 3rem;
  text-align: center; }
  @media (min-width: 451px) {
    .b-landing-form__submit {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      text-align: start; } }
  .b-landing-form__submit-button {
    height: 2.5rem; }
    @media (min-width: 451px) {
      .b-landing-form__submit-button {
        margin-right: 1.5rem; } }
  .b-landing-form__submit-link {
    display: block;
    margin-top: 1rem;
    text-decoration: underline; }
    @media (min-width: 451px) {
      .b-landing-form__submit-link {
        margin-top: 0; } }

.b-landing-form .tao-form-errors {
  margin-bottom: 1.5rem !important;
  padding: 0 !important;
  border: none; }
  .b-landing-form .tao-form-errors li {
    padding: 0; }
    .b-landing-form .tao-form-errors li::before {
      display: none; }

.b-landing-form .ok-message {
  display: none; }

.b-landing-form__ok {
  display: none;
  text-align: center; }
  .b-landing-form__ok.active {
    display: block; }
  .b-landing-form__ok-title {
    display: block;
    margin-top: 3rem; }
  .b-landing-form__ok-desc {
    margin-top: 0.5rem; }

.b-landing-form__agree {
  padding: 30px 0 0; }
  @media (min-width: 450px) {
    .b-landing-form__agree {
      padding: 40px 0 0; } }
  @media (min-width: 451px) {
    .b-landing-form__agree {
      padding: 40px 0 0; } }
  @media (min-width: 661px) {
    .b-landing-form__agree {
      padding: 30px 0 0; } }
  @media (min-width: 951px) {
    .b-landing-form__agree {
      padding: 30px 0 0; } }
  @media (min-width: 1281px) {
    .b-landing-form__agree {
      padding: 30px 0 0; } }
  .b-landing-form__agree label.head {
    font-size: 12px;
    line-height: 18px;
    color: #252525;
    margin-left: 14px; }
    .b-landing-form__agree label.head a {
      color: #252525;
      text-decoration: underline; }
      .b-landing-form__agree label.head a:hover {
        color: #313131; }
    @media (min-width: 700px) {
      .b-landing-form__agree label.head {
        display: inline-block; } }
    @media (min-width: 951px) {
      .b-landing-form__agree label.head {
        font-size: 14px;
        line-height: 18px; } }
    @media (min-width: 1281px) {
      .b-landing-form__agree label.head {
        font-size: 14px;
        line-height: 21px; } }
  .b-landing-form__agree label.checkbox {
    width: 32px;
    height: 30px;
    display: inline-block;
    position: relative; }
  .b-landing-form__agree input[type='checkbox'] + span {
    position: absolute;
    left: 0;
    top: 0;
    background: url("/images/icons/checkbox_back.png") left top no-repeat;
    border: none !important;
    width: 100%;
    height: 100%; }
    .b-landing-form__agree input[type='checkbox'] + span::before {
      border-color: #ff4c62 !important; }
  .b-landing-form__agree input[type="checkbox"]:checked + span {
    background: url("/images/icons/checkbox_ok.png") 6px 1px no-repeat, url("/images/icons/checkbox_back.png") left top no-repeat; }

.b-landing-form__required.register-required {
  margin: 10px 0;
  font-size: 12px; }
  @media (min-width: 951px) {
    .b-landing-form__required.register-required {
      font-size: 14px; } }

.b-landing-form__politic {
  margin: 25px auto;
  text-align: left;
  color: #252525;
  font-size: 12px;
  line-height: 18px;
  margin-left: 50px; }
  .b-landing-form__politic a {
    font-size: 12px;
    line-height: 18px;
    color: #252525;
    text-decoration: underline; }
    @media (min-width: 951px) {
      .b-landing-form__politic a {
        font-size: 14px;
        line-height: 21px; } }
  @media (min-width: 951px) {
    .b-landing-form__politic {
      font-size: 14px;
      line-height: 21px; } }

.b-landing-form__register-confirm {
  text-align: left;
  width: 100%; }

.b-landing-form__containerbutton {
  margin: 26px auto;
  width: 100%;
  text-align: center;
  padding-bottom: 30px; }
  .b-landing-form__containerbutton .before {
    display: none; }
  .b-landing-form__containerbutton.error .before {
    display: block;
    position: absolute;
    bottom: -26px;
    left: 0;
    width: 100%;
    height: 20px;
    color: #ff4c62;
    font-size: 12px;
    line-height: 12px; }
  .b-landing-form__containerbutton input[type=checkbox]:checked + span {
    background: url(/images/icons/checkbox_ok.png) 6px 1px no-repeat, url(/images/icons/checkbox_back.png) 0 0 no-repeat; }
  .b-landing-form__containerbutton input[type=checkbox] + span {
    position: absolute;
    left: 0;
    top: 0;
    background: url(/images/icons/checkbox_back.png) 0 0 no-repeat;
    border: none !important;
    width: 100%;
    height: 100%; }
  .b-landing-form__containerbutton label.checkbox {
    width: 32px;
    height: 30px;
    display: inline-block;
    position: relative;
    float: left; }
  @media (min-width: 661px) {
    .b-landing-form__containerbutton {
      padding-bottom: 35px; } }
  @media (min-width: 951px) {
    .b-landing-form__containerbutton {
      margin: 36px auto;
      padding-bottom: 50px; } }

.b-landing-form__error {
  position: absolute;
  top: -22px;
  width: 100%;
  height: 20px;
  color: #FF4C62;
  font-size: 14px;
  text-align: center; }

.b-landing-form__error-politicagree {
  position: relative;
  top: 0;
  font-size: 12px;
  text-align: left; }

.b-landing-form div.tao-error-field input.text {
  background-color: #FFEDEF;
  border: 1px solid #FF4C62; }

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/marketplace-form/marketplace-form.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-marketplace-form__label {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%; }
  @media (min-width: 451px) {
    .b-marketplace-form__label {
      width: 5rem;
      margin-bottom: 0;
      margin-right: 2rem; } }
  @media (min-width: 661px) {
    .b-marketplace-form__label {
      width: 11rem; } }

.b-marketplace-form__field {
  margin-bottom: 1.5rem !important;
  position: relative; }
  .b-marketplace-form__field:last-child {
    margin-bottom: 0 !important; }
  @media (min-width: 451px) {
    .b-marketplace-form__field {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }
  .b-marketplace-form__field .iti {
    width: 100%; }

.b-marketplace-form__input {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; }

.b-marketplace-form__form-submit {
  display: none; }

.b-marketplace-form__submit {
  margin-top: 3rem;
  text-align: center; }
  @media (min-width: 451px) {
    .b-marketplace-form__submit {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      text-align: start; } }
  .b-marketplace-form__submit-button {
    height: 2.5rem; }
    @media (min-width: 451px) {
      .b-marketplace-form__submit-button {
        margin-right: 1.5rem; } }
  .b-marketplace-form__submit-link {
    display: block;
    margin-top: 1rem;
    text-decoration: underline; }
    @media (min-width: 451px) {
      .b-marketplace-form__submit-link {
        margin-top: 0; } }

.b-marketplace-form .tao-form-errors {
  margin-bottom: 1.5rem !important;
  padding: 0 !important;
  border: none; }
  .b-marketplace-form .tao-form-errors li {
    padding: 0; }
    .b-marketplace-form .tao-form-errors li::before {
      display: none; }

.b-marketplace-form .ok-message {
  display: none; }

.b-marketplace-form__ok {
  display: none;
  text-align: center; }
  .b-marketplace-form__ok.active {
    display: block; }
  .b-marketplace-form__ok-title {
    display: block;
    margin-top: 3rem; }
  .b-marketplace-form__ok-desc {
    margin-top: 0.5rem; }

.b-marketplace-form__agree {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .b-marketplace-form__agree .little-head {
    margin-left: 16px; }
    @media (max-width: 450px) {
      .b-marketplace-form__agree .little-head {
        display: block;
        text-align: left; } }

.b-marketplace-form__containerbutton {
  color: #232323; }
  .b-marketplace-form__containerbutton .little-head {
    margin-left: 16px; }

.b-marketplace-form__register-confirm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.b-marketplace-form__containerbutton, .b-marketplace-form__agree {
  color: #232323;
  font-size: 14px;
  margin-top: 20px; }
  .b-marketplace-form__containerbutton a, .b-marketplace-form__agree a {
    color: #232323;
    text-decoration: underline; }
  .b-marketplace-form__containerbutton input[type=checkbox]:checked + span, .b-marketplace-form__agree input[type=checkbox]:checked + span {
    background: url(/images/icons/checkbox_ok.png) 6px 1px no-repeat, url(/images/icons/checkbox_back.png) 0 0 no-repeat; }
  .b-marketplace-form__containerbutton input[type=checkbox] + span, .b-marketplace-form__agree input[type=checkbox] + span {
    position: absolute;
    left: 0;
    top: 0;
    background: url(/images/icons/checkbox_back.png) 0 0 no-repeat;
    border: none !important;
    width: 100%;
    height: 100%;
    border-radius: 5px; }
  .b-marketplace-form__containerbutton label.checkbox, .b-marketplace-form__agree label.checkbox {
    width: 30px;
    height: 30px;
    display: inline-block;
    position: relative;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 30px;
            flex: 0 0 30px; }
    .b-marketplace-form__containerbutton label.checkbox span, .b-marketplace-form__agree label.checkbox span {
      width: 30px;
      height: 30px; }

.b-marketplace-form__error {
  position: absolute;
  width: 100%;
  height: 20px;
  color: #FF4C62;
  font-size: 14px;
  text-align: right;
  bottom: -22px;
  /*@include for-width('mobile') {
			top: -22px;
			text-align: center;
		}
		@include for-width('mobile', 'down') {
			bottom: -22px;
		}*/ }

.b-marketplace-form__error-politicagree {
  position: relative;
  top: 0;
  font-size: 12px;
  text-align: left; }

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/news-form/news-form.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-news-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 50px 95px; }
  @media (max-width: 950px) {
    .b-news-form {
      padding: 30px 40px; } }
  @media (max-width: 660px) {
    .b-news-form {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      gap: 20px; } }
  @media (max-width: 450px) {
    .b-news-form {
      padding: 40px 20px; } }
  .b-news-form__content-8 {
    margin: 0 auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-news-form__content-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-news-form__content-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-news-form__content-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-news-form__content-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-news-form__content-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-news-form__content-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-news-form__content-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-news-form__content-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-news-form__content-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-news-form__content-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-news-form__content-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-news-form__content-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-news-form__content-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-news-form__content-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
    @media (max-width: 1920px) {
      .b-news-form__content-8__cont-form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-news-form__content-8__cont-form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 6.25px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-news-form__content-8__cont-form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 7.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-news-form__content-8__cont-form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-news-form__content-8__cont-form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-news-form__content-8__cont-form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-news-form__content-8__cont-form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
  .b-news-form__cont-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 15px; }
    @media (max-width: 1920px) {
      .b-news-form__cont-text {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-news-form__cont-text {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 6.25px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-news-form__cont-text {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 7.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-news-form__cont-text {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-news-form__cont-text {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-news-form__cont-text {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-news-form__cont-text {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-news-form__cont-text {
        gap: 10px; } }
    @media (max-width: 660px) {
      .b-news-form__cont-text {
        width: 100%; } }
  @media (max-width: 660px) and (max-width: 1920px) {
    .b-news-form__cont-text {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 660px) and (max-width: 1280px) {
    .b-news-form__cont-text {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 660px) and (max-width: 950px) {
    .b-news-form__cont-text {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 660px) and (max-width: 660px) {
    .b-news-form__cont-text {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 660px) and (max-width: 450px) {
    .b-news-form__cont-text {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 660px) and (max-width: 320px) {
    .b-news-form__cont-text {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 660px) and (min-width: 1921px) {
    .b-news-form__cont-text {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  .b-news-form__cont-form {
    margin-left: auto; }
    @media (max-width: 1920px) {
      .b-news-form__cont-form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(41.66667% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-news-form__cont-form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(41.66667% - 6.25px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-news-form__cont-form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(41.66667% - 7.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-news-form__cont-form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(41.66667% - 5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-news-form__cont-form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(41.66667% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-news-form__cont-form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(41.66667% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-news-form__cont-form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(41.66667% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }

@media (max-width: 950px) and (max-width: 1920px) {
  .b-news-form__cont-form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (max-width: 950px) and (max-width: 1280px) {
  .b-news-form__cont-form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (max-width: 950px) and (max-width: 950px) {
  .b-news-form__cont-form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (max-width: 950px) and (max-width: 660px) {
  .b-news-form__cont-form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (max-width: 950px) and (max-width: 450px) {
  .b-news-form__cont-form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (max-width: 950px) and (max-width: 320px) {
  .b-news-form__cont-form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (max-width: 950px) and (min-width: 1921px) {
  .b-news-form__cont-form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
    @media (max-width: 660px) {
      .b-news-form__cont-form {
        width: 100%; } }
  .b-news-form.b-form input[type='text'] {
    width: 100%;
    max-width: 100%;
    height: 60px;
    color: rgba(50, 52, 62, 0.5);
    border-color: rgba(0, 0, 0, 0.3); }
    @media (max-width: 950px) {
      .b-news-form.b-form input[type='text'] {
        height: 51px;
        font-size: 13px; } }
    @media (max-width: 660px) {
      .b-news-form.b-form input[type='text'] {
        height: 36px; } }
  .b-news-form__title {
    color: #32343E;
    font-size: 30px;
    font-weight: 500;
    line-height: 36px; }
    @media (max-width: 950px) {
      .b-news-form__title {
        font-size: 20px;
        line-height: 28px; } }
  .b-news-form__description {
    color: #32343E;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px; }
    @media (max-width: 950px) {
      .b-news-form__description {
        font-size: 12px;
        line-height: 22px; } }
    @media (max-width: 660px) {
      .b-news-form__description {
        font-size: 15px;
        line-height: 25px; } }
  .b-news-form__field {
    margin-bottom: 15px !important;
    position: relative;
    width: 100%; }
    .b-news-form__field:last-child {
      margin-bottom: 0 !important; }
    @media (min-width: 451px) {
      .b-news-form__field {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; } }
  .b-news-form__input {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto; }
  .b-news-form__form-submit {
    display: none; }
  .b-news-form__submit {
    margin-top: 15px;
    text-align: center; }
    @media (min-width: 451px) {
      .b-news-form__submit {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        text-align: start; } }
    .b-news-form__submit-button {
      font-size: 17px;
      height: 60px;
      width: 100%;
      font-weight: 700; }
      @media (max-width: 950px) {
        .b-news-form__submit-button {
          height: 51px;
          font-weight: 500; }
          .b-news-form__submit-button .b-button__name {
            font-size: 13px; } }
      @media (max-width: 660px) {
        .b-news-form__submit-button {
          height: 36px; } }
    .b-news-form__submit-link {
      display: block;
      margin-top: 1rem;
      text-decoration: underline; }
      @media (min-width: 451px) {
        .b-news-form__submit-link {
          margin-top: 0; } }
  .b-news-form .tao-form-errors {
    margin-bottom: 1.5rem !important;
    padding: 0 !important;
    border: none; }
    .b-news-form .tao-form-errors li {
      padding: 0; }
      .b-news-form .tao-form-errors li::before {
        display: none; }
  .b-news-form .tao-form-field-agree,
  .b-news-form .tao-form-field-politicagree {
    margin-top: 32px; }
  .b-news-form .ok-message {
    display: none; }
  .b-news-form__ok {
    display: none;
    text-align: center;
    margin: 50px auto !important; }
    @media (max-width: 1920px) {
      .b-news-form__ok {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(66.66667% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-news-form__ok {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(66.66667% - 6.25px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-news-form__ok {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(66.66667% - 7.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-news-form__ok {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(66.66667% - 5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-news-form__ok {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(66.66667% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-news-form__ok {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(66.66667% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-news-form__ok {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(66.66667% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-news-form__ok {
        text-align: left;
        width: 100%; } }
    @media (max-width: 660px) {
      .b-news-form__ok {
        margin: 20px auto !important; } }
    .b-news-form__ok.active {
      display: block; }
    .b-news-form__ok-title {
      font-size: 30px;
      line-height: 36px;
      display: block; }
      @media (max-width: 950px) {
        .b-news-form__ok-title {
          font-size: 20px;
          line-height: 28px; } }
    .b-news-form__ok-desc {
      margin-top: 0.5rem;
      font-size: 16px;
      line-height: 28px; }
      @media (max-width: 950px) {
        .b-news-form__ok-desc {
          font-size: 12px;
          line-height: 22px; } }
  .b-news-form__required.register-required {
    margin: 10px 0;
    font-size: 12px; }
    @media (min-width: 951px) {
      .b-news-form__required.register-required {
        font-size: 14px; } }
  .b-news-form__containerbutton {
    width: 100%;
    text-align: center; }
    .b-news-form__containerbutton .before {
      display: none; }
    .b-news-form__containerbutton.error .before {
      display: block;
      position: absolute;
      bottom: -26px;
      left: 0;
      width: 100%;
      height: 20px;
      color: #ff4c62;
      font-size: 12px;
      line-height: 12px; }
  .b-news-form__error {
    position: absolute;
    top: -22px;
    width: 100%;
    color: #FF4C62;
    font-size: 14px;
    text-align: center; }
  .b-news-form div.tao-error-field input.text {
    background-color: #FFEDEF;
    border: 1px solid #FF4C62; }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/partner-form/partner-form.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-partner-form {
  width: 100%; }
  .b-partner-form__label {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-bottom: 1rem;
    width: 100%; }
    @media (min-width: 451px) {
      .b-partner-form__label {
        width: 5rem;
        margin-bottom: 0;
        margin-right: 2rem; } }
    @media (min-width: 661px) {
      .b-partner-form__label {
        margin-top: 0.5rem;
        width: 7.5rem; } }
  .b-partner-form__field {
    margin-bottom: 1.5rem !important;
    position: relative;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .b-partner-form__field:last-child {
      margin-bottom: 0 !important; }
    .b-partner-form__field input[type="text"],
    .b-partner-form__field textarea {
      border: none !important;
      width: 100%;
      padding-left: 1.75rem;
      background-color: #f4f4f4;
      outline: none;
      overflow: hidden; }
      .b-partner-form__field input[type="text"]::-webkit-input-placeholder, .b-partner-form__field textarea::-webkit-input-placeholder {
        color: #9e9d9d; }
      .b-partner-form__field input[type="text"]::-moz-placeholder, .b-partner-form__field textarea::-moz-placeholder {
        color: #9e9d9d; }
      .b-partner-form__field input[type="text"]:-ms-input-placeholder, .b-partner-form__field textarea:-ms-input-placeholder {
        color: #9e9d9d; }
      .b-partner-form__field input[type="text"]::-ms-input-placeholder, .b-partner-form__field textarea::-ms-input-placeholder {
        color: #9e9d9d; }
      .b-partner-form__field input[type="text"]::placeholder,
      .b-partner-form__field textarea::placeholder {
        color: #9e9d9d; }
    .b-partner-form__field input[type="text"] {
      height: 2.5rem;
      border-radius: 2.5rem; }
    .b-partner-form__field textarea {
      padding-top: 0.75rem;
      height: 5rem;
      resize: none;
      border-radius: 1.25rem; }
    .b-partner-form__field input[name="promo"] {
      background-color: #e1efff; }
    .b-partner-form__field.tao-error-field input,
    .b-partner-form__field.tao-error-field textarea,
    .b-partner-form__field.tao-error-field label::before {
      border: 1px solid #ff4c62 !important; }
    @media (min-width: 451px) {
      .b-partner-form__field {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; } }
    .b-partner-form__field .iti {
      width: 100%; }
  .b-partner-form__input {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto; }
  .b-partner-form__form-submit {
    display: none; }
  .b-partner-form__submit {
    height: 2.5rem;
    margin-top: 3rem; }
    @media (min-width: 451px) {
      .b-partner-form__submit {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
  .b-partner-form .tao-form-errors {
    margin-bottom: 1.5rem !important;
    padding: 0 !important;
    border: none; }
    .b-partner-form .tao-form-errors li {
      padding: 0; }
      .b-partner-form .tao-form-errors li::before {
        display: none; }
  .b-partner-form__error {
    position: absolute;
    top: 48px;
    width: 100%;
    color: #FF4C62;
    font-size: 14px;
    text-align: center; }
    .b-partner-form__error[data-field_name="politic_partner"] {
      position: relative;
      text-align: left;
      top: 0;
      margin-left: 30px; }
    .b-partner-form__error[data-field_name="politic"] {
      top: 45px; }
      @media (min-width: 451px) {
        .b-partner-form__error[data-field_name="politic"] {
          top: 40px; } }
      @media (min-width: 951px) {
        .b-partner-form__error[data-field_name="politic"] {
          top: 20px; } }
  .b-partner-form__ok {
    display: none;
    text-align: center; }
    .b-partner-form__ok.active {
      display: block; }
    .b-partner-form__ok-title {
      display: block;
      margin-top: 3rem; }
    .b-partner-form__ok-desc {
      margin-top: 0.5rem; }

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/recall-form/recall-form.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-recall-form {
  margin-top: 5rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 5px; }
  .b-recall-form__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 50px 10px; }
    @media (max-width: 1920px) {
      .b-recall-form__content {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-recall-form__content {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-recall-form__content {
        margin-left: -12.5px;
        margin-right: -12.5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-recall-form__content {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-recall-form__content {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-recall-form__content {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-recall-form__content {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-recall-form__content {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-recall-form__content {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-recall-form__content {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-recall-form__content {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-recall-form__content {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    .b-recall-form__content.dissable {
      display: none; }
  .b-recall-form__input-container {
    margin: 0 auto 2rem;
    width: 100%;
    position: relative;
    text-align: center; }
  .b-recall-form__form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 20px; }
    @media (max-width: 1920px) {
      .b-recall-form__form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-recall-form__form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-recall-form__form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-recall-form__form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-recall-form__form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-recall-form__form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-recall-form__form {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (min-width: 661px) {
      .b-recall-form__form {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-recall-form__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-recall-form__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-recall-form__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-recall-form__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-recall-form__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-recall-form__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-recall-form__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 661px) {
        .b-recall-form__form .b-recall-form__input-container {
          max-width: none;
          margin: 0;
          margin-right: 1.5rem; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-recall-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-recall-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-recall-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-recall-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-recall-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-recall-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-recall-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    @media (min-width: 951px) {
      .b-recall-form__form .b-recall-form__input-container {
        margin-right: 1.25rem; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-recall-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-recall-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-recall-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-recall-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-recall-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-recall-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-recall-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    @media (min-width: 1281px) {
      .b-recall-form__form .b-recall-form__input-container {
        margin-right: 2rem; } }
    .b-recall-form__form .iti {
      width: 100%;
      max-width: 17.5rem; }
      .b-recall-form__form .iti input[type='text'],
      .b-recall-form__form .iti input[type='tel'] {
        padding: 0 0.8rem 0 2.2rem; }
      @media (min-width: 661px) {
        .b-recall-form__form .iti {
          margin-right: 2rem; } }
  .b-recall-form__button {
    width: 100%;
    max-width: 17.5rem;
    height: 2.5rem;
    margin: 0 auto; }
    @media (min-width: 661px) {
      .b-recall-form__button {
        max-width: none;
        margin: 0; } }
  .b-recall-form__error {
    top: 55px;
    width: 100%;
    height: 20px;
    color: #FF4C62;
    font-size: 14px;
    display: none; }
    .b-recall-form__error.active {
      display: block; }
  .b-recall-form__comment {
    text-align: center;
    color: #9e9d9d; }
    @media (max-width: 1920px) {
      .b-recall-form__comment {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-recall-form__comment {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-recall-form__comment {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-recall-form__comment {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-recall-form__comment {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-recall-form__comment {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-recall-form__comment {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-recall-form__comment {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-recall-form__comment {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-recall-form__comment {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-recall-form__comment {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-recall-form__comment {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-recall-form__comment {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-recall-form__comment {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-recall-form__comment {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-recall-form__comment {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-recall-form__comment {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-recall-form__comment {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-recall-form__comment {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-recall-form__comment {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-recall-form__comment {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-recall-form__success {
    display: none;
    margin: 0;
    text-align: center;
    color: #00a;
    padding: 50px 10px; }
  .b-recall-form .tao-form {
    display: none; }
  .b-recall-form__containerbutton {
    margin: 0 auto 20px;
    width: 100%;
    text-align: center; }
    @media (max-width: 1920px) {
      .b-recall-form__containerbutton {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-recall-form__containerbutton {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-recall-form__containerbutton {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-recall-form__containerbutton {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-recall-form__containerbutton {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-recall-form__containerbutton {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-recall-form__containerbutton {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-recall-form__containerbutton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-recall-form__containerbutton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-recall-form__containerbutton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-recall-form__containerbutton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-recall-form__containerbutton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-recall-form__containerbutton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-recall-form__containerbutton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-recall-form__containerbutton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-recall-form__containerbutton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-recall-form__containerbutton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-recall-form__containerbutton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-recall-form__containerbutton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-recall-form__containerbutton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-recall-form__containerbutton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    .b-recall-form__containerbutton .before {
      display: none; }
    .b-recall-form__containerbutton.error .before {
      display: block;
      position: absolute;
      bottom: -26px;
      left: 0;
      width: 100%;
      height: 20px;
      color: #ff4c62;
      font-size: 12px;
      line-height: 12px; }
  .b-recall-form__register-confirm {
    text-align: left;
    width: 100%; }

/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/registration-form-small/registration-form-small.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-registration-form-small.error .b-registration-form-small__error {
  display: block; }

.b-registration-form-small p.before {
  display: none; }

.b-registration-form-small__error {
  display: none;
  text-align: center;
  margin: 0;
  padding: 40px 0 0;
  color: #ff4c62; }

.b-registration-form-small .tao-form {
  display: none; }

.b-registration-form-small__name {
  margin: 0 20px;
  padding: 50px 0 0; }
  @media (min-width: 451px) {
    .b-registration-form-small__name {
      margin: 0 39px; } }
  @media (min-width: 661px) {
    .b-registration-form-small__name {
      margin: 0 55px; } }
  @media (min-width: 951px) {
    .b-registration-form-small__name {
      margin: 0 109px;
      padding: 60px 0 0; } }
  @media (min-width: 1281px) {
    .b-registration-form-small__name {
      margin: 0 140px;
      padding: 80px 0 0; } }

.b-registration-form-small__phone, .b-registration-form-small__email, .b-registration-form-small__promocode {
  margin: 0 20px;
  padding: 20px 0 0; }
  @media (min-width: 451px) {
    .b-registration-form-small__phone, .b-registration-form-small__email, .b-registration-form-small__promocode {
      margin: 0 39px;
      padding: 30px 0 0; } }
  @media (min-width: 661px) {
    .b-registration-form-small__phone, .b-registration-form-small__email, .b-registration-form-small__promocode {
      margin: 0 50px; } }
  @media (min-width: 951px) {
    .b-registration-form-small__phone, .b-registration-form-small__email, .b-registration-form-small__promocode {
      margin: 0 109px;
      padding: 20px 0 0; } }
  @media (min-width: 1281px) {
    .b-registration-form-small__phone, .b-registration-form-small__email, .b-registration-form-small__promocode {
      margin: 0 140px; } }

.b-registration-form-small__name, .b-registration-form-small__phone, .b-registration-form-small__email, .b-registration-form-small__promocode {
  position: relative; }
  .b-registration-form-small__name label, .b-registration-form-small__phone label, .b-registration-form-small__email label, .b-registration-form-small__promocode label {
    display: block;
    font-size: 15px;
    line-height: 21px;
    color: #252525;
    width: 100%; }
    @media (min-width: 700px) {
      .b-registration-form-small__name label, .b-registration-form-small__phone label, .b-registration-form-small__email label, .b-registration-form-small__promocode label {
        display: inline-block;
        width: 250px;
        font-size: 15px;
        line-height: 21px; } }
    @media (min-width: 951px) {
      .b-registration-form-small__name label, .b-registration-form-small__phone label, .b-registration-form-small__email label, .b-registration-form-small__promocode label {
        font-size: 17px;
        line-height: 24px; } }
    @media (min-width: 1281px) {
      .b-registration-form-small__name label, .b-registration-form-small__phone label, .b-registration-form-small__email label, .b-registration-form-small__promocode label {
        font-size: 17px;
        line-height: 24px; } }
  .b-registration-form-small__name input, .b-registration-form-small__phone input, .b-registration-form-small__email input, .b-registration-form-small__promocode input {
    background: #f4f4f4;
    border: 1px solid #f4f4f4;
    border-radius: 60px;
    padding: 13px 15px;
    width: 100%;
    margin-top: 10px; }
    @media (min-width: 700px) {
      .b-registration-form-small__name input, .b-registration-form-small__phone input, .b-registration-form-small__email input, .b-registration-form-small__promocode input {
        display: inline-block;
        width: calc(100% - 280px); } }
    @media (min-width: 951px) {
      .b-registration-form-small__name input, .b-registration-form-small__phone input, .b-registration-form-small__email input, .b-registration-form-small__promocode input {
        padding: 17px 20px; } }
    .b-registration-form-small__name input:focus, .b-registration-form-small__phone input:focus, .b-registration-form-small__email input:focus, .b-registration-form-small__promocode input:focus {
      border: 1px solid #757373 !important;
      background: #f4f4f4 !important; }
  .b-registration-form-small__name .iti, .b-registration-form-small__phone .iti, .b-registration-form-small__email .iti, .b-registration-form-small__promocode .iti {
    margin-top: 10px; }
  .b-registration-form-small__name.ok input, .b-registration-form-small__phone.ok input, .b-registration-form-small__email.ok input, .b-registration-form-small__promocode.ok input {
    border: 1px solid #00a769 !important; }
  .b-registration-form-small__name.ok p.before, .b-registration-form-small__phone.ok p.before, .b-registration-form-small__email.ok p.before, .b-registration-form-small__promocode.ok p.before {
    display: none; }
  .b-registration-form-small__name.error input, .b-registration-form-small__phone.error input, .b-registration-form-small__email.error input, .b-registration-form-small__promocode.error input {
    border: 1px solid #ff4c62 !important;
    background: #ffedef !important; }
  .b-registration-form-small__name.error p.before, .b-registration-form-small__phone.error p.before, .b-registration-form-small__email.error p.before, .b-registration-form-small__promocode.error p.before {
    display: block;
    position: absolute;
    bottom: -26px;
    left: 0;
    width: 100%;
    height: 20px;
    color: #ff4c62;
    font-size: 12px;
    line-height: 12px; }
    @media (min-width: 700px) {
      .b-registration-form-small__name.error p.before, .b-registration-form-small__phone.error p.before, .b-registration-form-small__email.error p.before, .b-registration-form-small__promocode.error p.before {
        margin-left: 275px;
        width: calc(100% - 275px); } }
  .b-registration-form-small__name .b-button, .b-registration-form-small__phone .b-button, .b-registration-form-small__email .b-button, .b-registration-form-small__promocode .b-button {
    width: 246px;
    height: 40px;
    margin: 0 auto 10px; }
    @media (min-width: 700px) {
      .b-registration-form-small__name .b-button, .b-registration-form-small__phone .b-button, .b-registration-form-small__email .b-button, .b-registration-form-small__promocode .b-button {
        display: inline-block;
        width: 220px;
        margin-right: 30px; } }
  .b-registration-form-small__name .b-button .border, .b-registration-form-small__phone .b-button .border, .b-registration-form-small__email .b-button .border, .b-registration-form-small__promocode .b-button .border {
    border: 1px solid #979797;
    border-radius: 30px; }
  .b-registration-form-small__name .b-button .border .p, .b-registration-form-small__phone .b-button .border .p, .b-registration-form-small__email .b-button .border .p, .b-registration-form-small__promocode .b-button .border .p {
    color: #979797 !important;
    font-size: 13px; }
  .b-registration-form-small__name .b-button-green, .b-registration-form-small__phone .b-button-green, .b-registration-form-small__email .b-button-green, .b-registration-form-small__promocode .b-button-green {
    background-color: #00a769;
    border-radius: 30px; }
    .b-registration-form-small__name .b-button-green .border, .b-registration-form-small__phone .b-button-green .border, .b-registration-form-small__email .b-button-green .border, .b-registration-form-small__promocode .b-button-green .border {
      border: 1px solid #00a769;
      border-radius: 30px; }
    .b-registration-form-small__name .b-button-green .border .p, .b-registration-form-small__phone .b-button-green .border .p, .b-registration-form-small__email .b-button-green .border .p, .b-registration-form-small__promocode .b-button-green .border .p {
      color: #fff !important; }

.b-registration-form-small .b-button-blue {
  background-color: #00a;
  border-radius: 30px; }
  .b-registration-form-small .b-button-blue .b-button__content {
    background-color: #00a;
    border: 1px solid #00a;
    border-radius: 30px; }
  .b-registration-form-small .b-button-blue .b-button__content .h5 {
    color: #fff0e6 !important; }

.b-registration-form-small .noactive {
  opacity: 0.6;
  pointer-events: none; }

.b-registration-form-small__agree {
  margin: 0 20px;
  padding: 30px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media (min-width: 450px) {
    .b-registration-form-small__agree {
      margin: 10px 39px 0;
      padding: 40px 0; } }
  @media (min-width: 451px) {
    .b-registration-form-small__agree {
      margin: 10px 39px 0;
      padding: 40px 0; } }
  @media (min-width: 661px) {
    .b-registration-form-small__agree {
      margin: 10px 50px 0;
      padding: 30px 0; } }
  @media (min-width: 951px) {
    .b-registration-form-small__agree {
      margin: 10px 109px 0;
      padding: 30px 0; } }
  @media (min-width: 1281px) {
    .b-registration-form-small__agree {
      margin: 10px 140px 0;
      padding: 30px 0; } }
  .b-registration-form-small__agree label.head {
    font-size: 12px;
    line-height: 18px;
    color: #252525;
    margin-left: 10px; }
    @media (min-width: 700px) {
      .b-registration-form-small__agree label.head {
        display: inline-block; } }
    @media (min-width: 951px) {
      .b-registration-form-small__agree label.head {
        font-size: 12px;
        line-height: 18px; } }
    @media (min-width: 1281px) {
      .b-registration-form-small__agree label.head {
        font-size: 14px;
        line-height: 21px; } }
  .b-registration-form-small__agree label.checkbox {
    width: 32px;
    height: 30px;
    display: inline-block;
    position: relative; }
  .b-registration-form-small__agree input[type='checkbox'] + span {
    position: absolute;
    left: 0;
    top: 0;
    background: url("/images/icons/checkbox_back.png") left top no-repeat;
    border: none !important;
    width: 100%;
    height: 100%; }
    .b-registration-form-small__agree input[type='checkbox'] + span::before {
      border-color: #ff4c62 !important; }
  .b-registration-form-small__agree input[type="checkbox"]:checked + span {
    background: url("/images/icons/checkbox_ok.png") 6px 1px no-repeat, url("/images/icons/checkbox_back.png") left top no-repeat; }

.b-registration-form-small__containerbutton {
  margin: 26px auto;
  width: auto;
  text-align: center;
  padding-bottom: 30px; }
  .b-registration-form-small__containerbutton a {
    font-size: 12px;
    line-height: 18px;
    color: #9e9d9d;
    text-decoration: underline; }
    @media (min-width: 951px) {
      .b-registration-form-small__containerbutton a {
        font-size: 14px;
        line-height: 21px; } }
  @media (min-width: 661px) {
    .b-registration-form-small__containerbutton {
      padding-bottom: 35px; } }
  @media (min-width: 951px) {
    .b-registration-form-small__containerbutton {
      margin: 36px auto;
      padding-bottom: 50px; } }
  @media (min-width: 1281px) {
    .b-registration-form-small__containerbutton {
      margin: 0 140px !important; } }

.b-registration-form-small .register-confirm {
  margin-bottom: 20px;
  font-size: 0.6rem; }
  @media (min-width: 951px) {
    .b-registration-form-small .register-confirm {
      font-size: 0.7rem;
      line-height: 21px; } }

.b-registration-form-small__button {
  margin: 0 auto;
  width: 236px;
  height: 50px; }
  @media (min-width: 451px) {
    .b-registration-form-small__button {
      display: inline-block;
      width: 192px;
      height: 40px; } }
  @media (min-width: 661px) {
    .b-registration-form-small__button {
      display: inline-block; } }
  @media (min-width: 951px) {
    .b-registration-form-small__button {
      display: inline-block;
      width: 236px;
      height: 50px; } }
  @media (min-width: 1281px) {
    .b-registration-form-small__button {
      display: inline-block;
      width: 236px;
      height: 50px; } }

.b-registration-form-small__login {
  font-size: 14px;
  line-height: 21px;
  margin-top: 25px;
  color: #757373; }
  @media (min-width: 1281px) {
    .b-registration-form-small__login {
      margin-top: 35px; } }
  .b-registration-form-small__login a {
    color: #0000AA; }

.b-registration-form-small__politic {
  margin: 25px auto;
  text-align: center;
  color: #9e9d9d;
  font-size: 12px;
  line-height: 18px; }
  @media (min-width: 951px) {
    .b-registration-form-small__politic {
      font-size: 14px;
      line-height: 21px; } }

.b-registration-form-small__error {
  display: none;
  margin: 1rem 0;
  color: #ff4c62; }
  .b-registration-form-small__error.active {
    display: block; }

.b-registration-form-small__ok {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .b-registration-form-small__ok::before {
    content: '';
    display: block;
    width: 0.95rem;
    height: 1rem;
    margin-right: 0.5rem;
    background-image: url("/images/icons/checkbox.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f4f4f4;
    cursor: pointer; }

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/registration-form/registration-form.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-registration-form.error .b-registration-form__error {
  display: block; }

.b-registration-form__error {
  display: none;
  text-align: center;
  margin: 0;
  padding: 40px 0 0;
  color: #ff4c62; }

.b-registration-form .tao-form {
  display: none; }

.b-registration-form__name {
  margin: 0 20px;
  padding: 50px 0 0; }
  @media (min-width: 951px) {
    .b-registration-form__name {
      margin: 0 109px; } }
  @media (min-width: 1281px) {
    .b-registration-form__name {
      margin: 0 140px; } }

.b-registration-form__phone, .b-registration-form__email, .b-registration-form__promocode {
  margin: 0 20px;
  padding: 20px 0 0; }
  @media (min-width: 451px) {
    .b-registration-form__phone, .b-registration-form__email, .b-registration-form__promocode {
      margin: 0 39px;
      padding: 30px 0 0; } }
  @media (min-width: 661px) {
    .b-registration-form__phone, .b-registration-form__email, .b-registration-form__promocode {
      margin: 0 50px; } }
  @media (min-width: 951px) {
    .b-registration-form__phone, .b-registration-form__email, .b-registration-form__promocode {
      margin: 0 109px;
      padding: 20px 0 0; } }
  @media (min-width: 1281px) {
    .b-registration-form__phone, .b-registration-form__email, .b-registration-form__promocode {
      margin: 0 140px; } }

.b-registration-form__name, .b-registration-form__phone, .b-registration-form__email, .b-registration-form__promocode {
  position: relative; }
  .b-registration-form__name label, .b-registration-form__phone label, .b-registration-form__email label, .b-registration-form__promocode label {
    display: block;
    font-size: 15px;
    line-height: 21px;
    color: #252525;
    width: 100%; }
    @media (min-width: 700px) {
      .b-registration-form__name label, .b-registration-form__phone label, .b-registration-form__email label, .b-registration-form__promocode label {
        display: inline-block;
        width: 250px;
        font-size: 15px;
        line-height: 21px; } }
    @media (min-width: 951px) {
      .b-registration-form__name label, .b-registration-form__phone label, .b-registration-form__email label, .b-registration-form__promocode label {
        font-size: 17px;
        line-height: 24px; } }
    @media (min-width: 1281px) {
      .b-registration-form__name label, .b-registration-form__phone label, .b-registration-form__email label, .b-registration-form__promocode label {
        font-size: 17px;
        line-height: 24px; } }
  .b-registration-form__name input, .b-registration-form__phone input, .b-registration-form__email input, .b-registration-form__promocode input {
    background: #f4f4f4;
    border: 1px solid #757373 !important;
    border-radius: 60px;
    padding: 13px 15px;
    width: 100%;
    margin-top: 10px; }
    @media (min-width: 700px) {
      .b-registration-form__name input, .b-registration-form__phone input, .b-registration-form__email input, .b-registration-form__promocode input {
        display: inline-block;
        width: calc(100% - 280px); } }
    @media (min-width: 951px) {
      .b-registration-form__name input, .b-registration-form__phone input, .b-registration-form__email input, .b-registration-form__promocode input {
        padding: 17px 20px; } }
    .b-registration-form__name input:focus, .b-registration-form__phone input:focus, .b-registration-form__email input:focus, .b-registration-form__promocode input:focus {
      border: 1px solid #99cdf1 !important;
      background: #f4f4f4 !important; }
  .b-registration-form__name p.before, .b-registration-form__phone p.before, .b-registration-form__email p.before, .b-registration-form__promocode p.before {
    display: none; }
  .b-registration-form__name.ok input, .b-registration-form__phone.ok input, .b-registration-form__email.ok input, .b-registration-form__promocode.ok input {
    border: 1px solid #00a769 !important; }
  .b-registration-form__name.ok p.before, .b-registration-form__phone.ok p.before, .b-registration-form__email.ok p.before, .b-registration-form__promocode.ok p.before {
    display: none; }
  .b-registration-form__name.error input, .b-registration-form__phone.error input, .b-registration-form__email.error input, .b-registration-form__promocode.error input {
    border: 1px solid #ff4c62 !important;
    background: #ffedef !important; }
  .b-registration-form__name.error p.before, .b-registration-form__phone.error p.before, .b-registration-form__email.error p.before, .b-registration-form__promocode.error p.before {
    display: block;
    position: absolute;
    bottom: -26px;
    left: 0;
    width: 100%;
    height: 20px;
    color: #ff4c62;
    font-size: 12px;
    line-height: 12px; }
    @media (min-width: 700px) {
      .b-registration-form__name.error p.before, .b-registration-form__phone.error p.before, .b-registration-form__email.error p.before, .b-registration-form__promocode.error p.before {
        margin-left: 275px;
        width: calc(100% - 275px); } }
  .b-registration-form__name .b-button, .b-registration-form__phone .b-button, .b-registration-form__email .b-button, .b-registration-form__promocode .b-button {
    width: 246px;
    height: 40px;
    margin: 0 auto 10px; }
    @media (min-width: 700px) {
      .b-registration-form__name .b-button, .b-registration-form__phone .b-button, .b-registration-form__email .b-button, .b-registration-form__promocode .b-button {
        display: inline-block;
        width: 220px;
        margin-right: 30px; } }
  .b-registration-form__name .b-button .border, .b-registration-form__phone .b-button .border, .b-registration-form__email .b-button .border, .b-registration-form__promocode .b-button .border {
    border: 1px solid #979797;
    border-radius: 30px; }
  .b-registration-form__name .b-button .border .p, .b-registration-form__phone .b-button .border .p, .b-registration-form__email .b-button .border .p, .b-registration-form__promocode .b-button .border .p {
    color: #979797 !important;
    font-size: 13px; }
  .b-registration-form__name .b-button-green, .b-registration-form__phone .b-button-green, .b-registration-form__email .b-button-green, .b-registration-form__promocode .b-button-green {
    background-color: #00a769;
    border-radius: 30px; }
    .b-registration-form__name .b-button-green .border, .b-registration-form__phone .b-button-green .border, .b-registration-form__email .b-button-green .border, .b-registration-form__promocode .b-button-green .border {
      border: 1px solid #00a769;
      border-radius: 30px; }
    .b-registration-form__name .b-button-green .border .p, .b-registration-form__phone .b-button-green .border .p, .b-registration-form__email .b-button-green .border .p, .b-registration-form__promocode .b-button-green .border .p {
      color: #fff !important; }

.b-registration-form .b-button-blue {
  background-color: #00a;
  border-radius: 30px; }
  .b-registration-form .b-button-blue .b-button__content {
    background-color: #00a;
    border: 1px solid #00a;
    border-radius: 30px; }
  .b-registration-form .b-button-blue .b-button__content .h5 {
    color: #fff0e6 !important; }

.b-registration-form .noactive {
  opacity: 0.6;
  pointer-events: none; }

.b-registration-form__promocode input {
  display: none; }

.b-registration-form__promocode input.show {
  display: inline-block; }

.b-registration-form__containerbutton {
  margin: 26px auto;
  width: 100%;
  text-align: center;
  padding-bottom: 30px; }
  .b-registration-form__containerbutton a {
    font-size: 12px;
    line-height: 18px;
    color: #9e9d9d;
    text-decoration: underline; }
    @media (min-width: 951px) {
      .b-registration-form__containerbutton a {
        font-size: 14px;
        line-height: 21px; } }
  @media (min-width: 661px) {
    .b-registration-form__containerbutton {
      padding-bottom: 35px; } }
  @media (min-width: 951px) {
    .b-registration-form__containerbutton {
      margin: 36px auto;
      padding-bottom: 50px; } }

.b-registration-form .register-confirm {
  margin-bottom: 20px;
  font-size: 0.6rem; }
  @media (min-width: 951px) {
    .b-registration-form .register-confirm {
      font-size: 0.7rem;
      line-height: 21px; } }

.b-registration-form__button {
  margin: 0 auto;
  width: 236px;
  height: 50px; }
  @media (min-width: 451px) {
    .b-registration-form__button {
      display: inline-block;
      width: 192px;
      height: 40px; } }
  @media (min-width: 661px) {
    .b-registration-form__button {
      display: inline-block; } }
  @media (min-width: 951px) {
    .b-registration-form__button {
      display: inline-block;
      width: 236px;
      height: 50px; } }
  @media (min-width: 1281px) {
    .b-registration-form__button {
      display: inline-block;
      width: 236px;
      height: 50px; } }

.b-registration-form__login {
  font-size: 14px;
  line-height: 21px;
  margin-top: 25px;
  color: #757373; }
  @media (min-width: 1281px) {
    .b-registration-form__login {
      margin-top: 35px; } }
  .b-registration-form__login a {
    color: #0000AA; }

.b-registration-form__error {
  display: none;
  margin: 1rem 0;
  color: #ff4c62; }
  .b-registration-form__error.active {
    display: block; }

.b-registration-form__ok {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .b-registration-form__ok::before {
    content: '';
    display: block;
    width: 0.95rem;
    height: 1rem;
    margin-right: 0.5rem;
    background-image: url("/images/icons/checkbox.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f4f4f4;
    cursor: pointer; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/registration-request-small/registration-request-small.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-registration-request-small.error .b-registration-request-small__error {
  display: block; }

.b-registration-request-small p.before {
  display: none; }

.b-registration-request-small__error {
  display: none;
  text-align: center;
  margin: 0;
  padding: 40px 0 0;
  color: #ff4c62; }

.b-registration-request-small .tao-form {
  display: none; }

.b-registration-request-small__name {
  margin: 0 20px;
  padding: 50px 0 0; }
  @media (min-width: 451px) {
    .b-registration-request-small__name {
      margin: 0 39px; } }
  @media (min-width: 661px) {
    .b-registration-request-small__name {
      margin: 0 55px; } }
  @media (min-width: 951px) {
    .b-registration-request-small__name {
      margin: 0 109px;
      padding: 60px 0 0; } }
  @media (min-width: 1281px) {
    .b-registration-request-small__name {
      margin: 0 140px;
      padding: 80px 0 0; } }

.b-registration-request-small__phone, .b-registration-request-small__email, .b-registration-request-small__promocode {
  margin: 0 20px;
  padding: 20px 0 0; }
  @media (min-width: 451px) {
    .b-registration-request-small__phone, .b-registration-request-small__email, .b-registration-request-small__promocode {
      margin: 0 39px;
      padding: 30px 0 0; } }
  @media (min-width: 661px) {
    .b-registration-request-small__phone, .b-registration-request-small__email, .b-registration-request-small__promocode {
      margin: 0 50px; } }
  @media (min-width: 951px) {
    .b-registration-request-small__phone, .b-registration-request-small__email, .b-registration-request-small__promocode {
      margin: 0 109px;
      padding: 20px 0 0; } }
  @media (min-width: 1281px) {
    .b-registration-request-small__phone, .b-registration-request-small__email, .b-registration-request-small__promocode {
      margin: 0 140px; } }

.b-registration-request-small__name, .b-registration-request-small__phone, .b-registration-request-small__email, .b-registration-request-small__promocode {
  position: relative; }
  .b-registration-request-small__name label, .b-registration-request-small__phone label, .b-registration-request-small__email label, .b-registration-request-small__promocode label {
    display: block;
    font-size: 15px;
    line-height: 21px;
    color: #252525;
    width: 100%; }
    @media (min-width: 700px) {
      .b-registration-request-small__name label, .b-registration-request-small__phone label, .b-registration-request-small__email label, .b-registration-request-small__promocode label {
        display: inline-block;
        width: 250px;
        font-size: 15px;
        line-height: 21px; } }
    @media (min-width: 951px) {
      .b-registration-request-small__name label, .b-registration-request-small__phone label, .b-registration-request-small__email label, .b-registration-request-small__promocode label {
        font-size: 17px;
        line-height: 24px; } }
    @media (min-width: 1281px) {
      .b-registration-request-small__name label, .b-registration-request-small__phone label, .b-registration-request-small__email label, .b-registration-request-small__promocode label {
        font-size: 17px;
        line-height: 24px; } }
  .b-registration-request-small__name input, .b-registration-request-small__phone input, .b-registration-request-small__email input, .b-registration-request-small__promocode input {
    background: #f4f4f4;
    border: 1px solid #f4f4f4;
    border-radius: 60px;
    padding: 13px 15px;
    width: 100%;
    margin-top: 10px; }
    @media (min-width: 700px) {
      .b-registration-request-small__name input, .b-registration-request-small__phone input, .b-registration-request-small__email input, .b-registration-request-small__promocode input {
        display: inline-block;
        width: calc(100% - 280px); } }
    @media (min-width: 951px) {
      .b-registration-request-small__name input, .b-registration-request-small__phone input, .b-registration-request-small__email input, .b-registration-request-small__promocode input {
        padding: 17px 20px; } }
    .b-registration-request-small__name input:focus, .b-registration-request-small__phone input:focus, .b-registration-request-small__email input:focus, .b-registration-request-small__promocode input:focus {
      border: 1px solid #757373 !important;
      background: #f4f4f4 !important; }
  .b-registration-request-small__name .iti, .b-registration-request-small__phone .iti, .b-registration-request-small__email .iti, .b-registration-request-small__promocode .iti {
    margin-top: 10px; }
  .b-registration-request-small__name.ok input, .b-registration-request-small__phone.ok input, .b-registration-request-small__email.ok input, .b-registration-request-small__promocode.ok input {
    border: 1px solid #00a769 !important; }
  .b-registration-request-small__name.ok p.before, .b-registration-request-small__phone.ok p.before, .b-registration-request-small__email.ok p.before, .b-registration-request-small__promocode.ok p.before {
    display: none; }
  .b-registration-request-small__name.error input, .b-registration-request-small__phone.error input, .b-registration-request-small__email.error input, .b-registration-request-small__promocode.error input {
    border: 1px solid #ff4c62 !important;
    background: #ffedef !important; }
  .b-registration-request-small__name.error p.before, .b-registration-request-small__phone.error p.before, .b-registration-request-small__email.error p.before, .b-registration-request-small__promocode.error p.before {
    display: block;
    position: absolute;
    bottom: -26px;
    left: 0;
    width: 100%;
    height: 20px;
    color: #ff4c62;
    font-size: 12px;
    line-height: 12px; }
    @media (min-width: 700px) {
      .b-registration-request-small__name.error p.before, .b-registration-request-small__phone.error p.before, .b-registration-request-small__email.error p.before, .b-registration-request-small__promocode.error p.before {
        margin-left: 275px;
        width: calc(100% - 275px); } }
  .b-registration-request-small__name .b-button, .b-registration-request-small__phone .b-button, .b-registration-request-small__email .b-button, .b-registration-request-small__promocode .b-button {
    width: 246px;
    height: 40px;
    margin: 0 auto 10px; }
    @media (min-width: 700px) {
      .b-registration-request-small__name .b-button, .b-registration-request-small__phone .b-button, .b-registration-request-small__email .b-button, .b-registration-request-small__promocode .b-button {
        display: inline-block;
        width: 220px;
        margin-right: 30px; } }
  .b-registration-request-small__name .b-button .border, .b-registration-request-small__phone .b-button .border, .b-registration-request-small__email .b-button .border, .b-registration-request-small__promocode .b-button .border {
    border: 1px solid #979797;
    border-radius: 30px; }
  .b-registration-request-small__name .b-button .border .p, .b-registration-request-small__phone .b-button .border .p, .b-registration-request-small__email .b-button .border .p, .b-registration-request-small__promocode .b-button .border .p {
    color: #979797 !important;
    font-size: 13px; }
  .b-registration-request-small__name .b-button-green, .b-registration-request-small__phone .b-button-green, .b-registration-request-small__email .b-button-green, .b-registration-request-small__promocode .b-button-green {
    background-color: #00a769;
    border-radius: 30px; }
    .b-registration-request-small__name .b-button-green .border, .b-registration-request-small__phone .b-button-green .border, .b-registration-request-small__email .b-button-green .border, .b-registration-request-small__promocode .b-button-green .border {
      border: 1px solid #00a769;
      border-radius: 30px; }
    .b-registration-request-small__name .b-button-green .border .p, .b-registration-request-small__phone .b-button-green .border .p, .b-registration-request-small__email .b-button-green .border .p, .b-registration-request-small__promocode .b-button-green .border .p {
      color: #fff !important; }

.b-registration-request-small .b-button-blue {
  background-color: #00a;
  border-radius: 30px; }
  .b-registration-request-small .b-button-blue .b-button__content {
    background-color: #00a;
    border: 1px solid #00a;
    border-radius: 30px; }
  .b-registration-request-small .b-button-blue .b-button__content .h5 {
    color: #fff0e6 !important; }

.b-registration-request-small .noactive {
  opacity: 0.6;
  pointer-events: none; }

.b-registration-request-small__containerbutton {
  width: auto;
  text-align: center;
  padding-bottom: 35px; }
  .b-registration-request-small__containerbutton .before {
    display: none; }
  .b-registration-request-small__containerbutton a {
    font-size: 12px;
    line-height: 18px;
    color: #9e9d9d;
    text-decoration: underline; }
    @media (min-width: 951px) {
      .b-registration-request-small__containerbutton a {
        font-size: 14px;
        line-height: 21px; } }
  @media (min-width: 451px) {
    .b-registration-request-small__containerbutton {
      margin: 10px 39px 0; } }
  @media (min-width: 661px) {
    .b-registration-request-small__containerbutton {
      margin: 10px 50px 0; } }
  @media (min-width: 951px) {
    .b-registration-request-small__containerbutton {
      margin: 0 109px;
      padding-bottom: 90px; } }
  @media (min-width: 1281px) {
    .b-registration-request-small__containerbutton {
      margin: 0 140px; } }

.b-registration-request-small .register-confirm {
  margin-bottom: 20px;
  font-size: 0.6rem; }
  @media (min-width: 951px) {
    .b-registration-request-small .register-confirm {
      font-size: 0.7rem;
      line-height: 21px; } }

.b-registration-request-small__button {
  margin: 0 auto;
  width: 236px;
  height: 50px; }
  @media (min-width: 451px) {
    .b-registration-request-small__button {
      display: inline-block;
      width: 192px;
      height: 40px; } }
  @media (min-width: 661px) {
    .b-registration-request-small__button {
      display: inline-block; } }
  @media (min-width: 951px) {
    .b-registration-request-small__button {
      display: inline-block;
      width: 236px;
      height: 50px; } }
  @media (min-width: 1281px) {
    .b-registration-request-small__button {
      display: inline-block;
      width: 236px;
      height: 50px; } }

.b-registration-request-small__login {
  font-size: 14px;
  line-height: 21px;
  margin-top: 25px;
  color: #757373; }
  @media (min-width: 1281px) {
    .b-registration-request-small__login {
      margin-top: 35px; } }
  .b-registration-request-small__login a {
    color: #0000AA; }

.b-registration-request-small__error {
  display: none;
  margin: 1rem 0;
  color: #ff4c62; }
  .b-registration-request-small__error.active {
    display: block; }

.b-registration-request-small__ok {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .b-registration-request-small__ok::before {
    content: '';
    display: block;
    width: 0.95rem;
    height: 1rem;
    margin-right: 0.5rem;
    background-image: url("/images/icons/checkbox.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f4f4f4;
    cursor: pointer; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/registration-request/registration-request.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-registration-request.error .b-registration-request__error {
  display: block; }

.b-registration-request__error {
  display: none;
  text-align: center;
  margin: 0;
  padding: 40px 0 0;
  color: #ff4c62; }

.b-registration-request .tao-form {
  display: none; }

.b-registration-request__name {
  margin: 0 20px;
  padding: 50px 0 0; }
  @media (min-width: 951px) {
    .b-registration-request__name {
      margin: 0 109px; } }
  @media (min-width: 1281px) {
    .b-registration-request__name {
      margin: 0 140px; } }

.b-registration-request__phone, .b-registration-request__email, .b-registration-request__promocode {
  margin: 0 20px;
  padding: 20px 0 0; }
  @media (min-width: 451px) {
    .b-registration-request__phone, .b-registration-request__email, .b-registration-request__promocode {
      margin: 0 39px;
      padding: 30px 0 0; } }
  @media (min-width: 661px) {
    .b-registration-request__phone, .b-registration-request__email, .b-registration-request__promocode {
      margin: 0 50px; } }
  @media (min-width: 951px) {
    .b-registration-request__phone, .b-registration-request__email, .b-registration-request__promocode {
      margin: 0 109px;
      padding: 20px 0 0; } }
  @media (min-width: 1281px) {
    .b-registration-request__phone, .b-registration-request__email, .b-registration-request__promocode {
      margin: 0 140px; } }

.b-registration-request__name, .b-registration-request__phone, .b-registration-request__email, .b-registration-request__promocode {
  position: relative; }
  .b-registration-request__name label, .b-registration-request__phone label, .b-registration-request__email label, .b-registration-request__promocode label {
    display: block;
    font-size: 15px;
    line-height: 21px;
    color: #252525;
    width: 100%; }
    @media (min-width: 700px) {
      .b-registration-request__name label, .b-registration-request__phone label, .b-registration-request__email label, .b-registration-request__promocode label {
        display: inline-block;
        width: 250px;
        font-size: 15px;
        line-height: 21px; } }
    @media (min-width: 951px) {
      .b-registration-request__name label, .b-registration-request__phone label, .b-registration-request__email label, .b-registration-request__promocode label {
        font-size: 17px;
        line-height: 24px; } }
    @media (min-width: 1281px) {
      .b-registration-request__name label, .b-registration-request__phone label, .b-registration-request__email label, .b-registration-request__promocode label {
        font-size: 17px;
        line-height: 24px; } }
  .b-registration-request__name input, .b-registration-request__phone input, .b-registration-request__email input, .b-registration-request__promocode input {
    background: #f4f4f4;
    border: 1px solid #757373 !important;
    border-radius: 60px;
    padding: 13px 15px;
    width: 100%;
    margin-top: 10px; }
    @media (min-width: 700px) {
      .b-registration-request__name input, .b-registration-request__phone input, .b-registration-request__email input, .b-registration-request__promocode input {
        display: inline-block;
        width: calc(100% - 280px); } }
    @media (min-width: 951px) {
      .b-registration-request__name input, .b-registration-request__phone input, .b-registration-request__email input, .b-registration-request__promocode input {
        padding: 17px 20px; } }
    .b-registration-request__name input:focus, .b-registration-request__phone input:focus, .b-registration-request__email input:focus, .b-registration-request__promocode input:focus {
      border: 1px solid #99cdf1 !important;
      background: #f4f4f4 !important; }
  .b-registration-request__name p.before, .b-registration-request__phone p.before, .b-registration-request__email p.before, .b-registration-request__promocode p.before {
    display: none; }
  .b-registration-request__name.ok input, .b-registration-request__phone.ok input, .b-registration-request__email.ok input, .b-registration-request__promocode.ok input {
    border: 1px solid #00a769 !important; }
  .b-registration-request__name.ok p.before, .b-registration-request__phone.ok p.before, .b-registration-request__email.ok p.before, .b-registration-request__promocode.ok p.before {
    display: none; }
  .b-registration-request__name.error input, .b-registration-request__phone.error input, .b-registration-request__email.error input, .b-registration-request__promocode.error input {
    border: 1px solid #ff4c62 !important;
    background: #ffedef !important; }
  .b-registration-request__name.error p.before, .b-registration-request__phone.error p.before, .b-registration-request__email.error p.before, .b-registration-request__promocode.error p.before {
    display: block;
    position: absolute;
    bottom: -26px;
    left: 0;
    width: 100%;
    height: 20px;
    color: #ff4c62;
    font-size: 12px;
    line-height: 12px; }
    @media (min-width: 700px) {
      .b-registration-request__name.error p.before, .b-registration-request__phone.error p.before, .b-registration-request__email.error p.before, .b-registration-request__promocode.error p.before {
        margin-left: 275px;
        width: calc(100% - 275px); } }
  .b-registration-request__name .b-button, .b-registration-request__phone .b-button, .b-registration-request__email .b-button, .b-registration-request__promocode .b-button {
    width: 246px;
    height: 40px;
    margin: 0 auto 10px; }
    @media (min-width: 700px) {
      .b-registration-request__name .b-button, .b-registration-request__phone .b-button, .b-registration-request__email .b-button, .b-registration-request__promocode .b-button {
        display: inline-block;
        width: 220px;
        margin-right: 30px; } }
  .b-registration-request__name .b-button .border, .b-registration-request__phone .b-button .border, .b-registration-request__email .b-button .border, .b-registration-request__promocode .b-button .border {
    border: 1px solid #979797;
    border-radius: 30px; }
  .b-registration-request__name .b-button .border .p, .b-registration-request__phone .b-button .border .p, .b-registration-request__email .b-button .border .p, .b-registration-request__promocode .b-button .border .p {
    color: #979797 !important;
    font-size: 13px; }
  .b-registration-request__name .b-button-green, .b-registration-request__phone .b-button-green, .b-registration-request__email .b-button-green, .b-registration-request__promocode .b-button-green {
    background-color: #00a769;
    border-radius: 30px; }
    .b-registration-request__name .b-button-green .border, .b-registration-request__phone .b-button-green .border, .b-registration-request__email .b-button-green .border, .b-registration-request__promocode .b-button-green .border {
      border: 1px solid #00a769;
      border-radius: 30px; }
    .b-registration-request__name .b-button-green .border .p, .b-registration-request__phone .b-button-green .border .p, .b-registration-request__email .b-button-green .border .p, .b-registration-request__promocode .b-button-green .border .p {
      color: #fff !important; }

.b-registration-request .b-button-blue {
  background-color: #00a;
  border-radius: 30px; }
  .b-registration-request .b-button-blue .b-button__content {
    background-color: #00a;
    border: 1px solid #00a;
    border-radius: 30px; }
  .b-registration-request .b-button-blue .b-button__content .h5 {
    color: #fff0e6 !important; }

.b-registration-request .noactive {
  opacity: 0.6;
  pointer-events: none; }

.b-registration-request__promocode input {
  display: none; }

.b-registration-request__promocode input.show {
  display: inline-block; }

.b-registration-request__containerbutton {
  width: auto;
  text-align: center;
  padding-bottom: 35px; }
  .b-registration-request__containerbutton .before {
    display: none; }
  .b-registration-request__containerbutton a {
    font-size: 12px;
    line-height: 18px;
    color: #9e9d9d;
    text-decoration: underline; }
    @media (min-width: 951px) {
      .b-registration-request__containerbutton a {
        font-size: 14px;
        line-height: 21px; } }
  @media (min-width: 451px) {
    .b-registration-request__containerbutton {
      margin: 10px 39px 0; } }
  @media (min-width: 661px) {
    .b-registration-request__containerbutton {
      margin: 10px 50px 0; } }
  @media (min-width: 951px) {
    .b-registration-request__containerbutton {
      margin: 0 109px;
      padding-bottom: 90px; } }
  @media (min-width: 1281px) {
    .b-registration-request__containerbutton {
      margin: 0 140px; } }

.b-registration-request .register-confirm {
  margin-bottom: 20px;
  font-size: 0.6rem; }
  @media (min-width: 951px) {
    .b-registration-request .register-confirm {
      font-size: 0.7rem;
      line-height: 21px; } }

.b-registration-request__button {
  margin: 0 auto;
  width: 236px;
  height: 50px; }
  @media (min-width: 451px) {
    .b-registration-request__button {
      display: inline-block;
      width: 192px;
      height: 40px; } }
  @media (min-width: 661px) {
    .b-registration-request__button {
      display: inline-block; } }
  @media (min-width: 951px) {
    .b-registration-request__button {
      display: inline-block;
      width: 236px;
      height: 50px; } }
  @media (min-width: 1281px) {
    .b-registration-request__button {
      display: inline-block;
      width: 236px;
      height: 50px; } }

.b-registration-request__login {
  font-size: 14px;
  line-height: 21px;
  margin-top: 25px;
  color: #757373; }
  @media (min-width: 1281px) {
    .b-registration-request__login {
      margin-top: 35px; } }
  .b-registration-request__login a {
    color: #0000AA; }

.b-registration-request__error {
  display: none;
  margin: 1rem 0;
  color: #ff4c62; }
  .b-registration-request__error.active {
    display: block; }

.b-registration-request__ok {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .b-registration-request__ok::before {
    content: '';
    display: block;
    width: 0.95rem;
    height: 1rem;
    margin-right: 0.5rem;
    background-image: url("/images/icons/checkbox.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f4f4f4;
    cursor: pointer; }

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/review-form/review-form.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-review-form__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.b-review-form__image {
  display: none;
  margin-left: auto !important; }
  @media (min-width: 661px) {
    .b-review-form__image {
      display: block; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-review-form__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(190px - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-review-form__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(190px - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-review-form__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(190px - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-review-form__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(190px - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-review-form__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(190px - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-review-form__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(190px - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-review-form__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(190px - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-review-form__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(286px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-review-form__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(286px - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-review-form__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(286px - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-review-form__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(286px - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-review-form__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(286px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-review-form__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(286px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-review-form__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(286px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-review-form__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(280px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-review-form__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(280px - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-review-form__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(280px - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-review-form__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(280px - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-review-form__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(280px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-review-form__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(280px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-review-form__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(280px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-review-form__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media (min-width: 451px) {
    .b-review-form__buttons {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }
  @media (min-width: 661px) {
    .b-review-form__buttons {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: start; } }

.b-review-form__button {
  display: inline-block;
  height: 2.5rem; }
  .b-review-form__button:first-child {
    margin-right: 0;
    margin-bottom: 1rem; }
    @media (min-width: 451px) {
      .b-review-form__button:first-child {
        margin-right: 1rem;
        margin-bottom: 0; } }
  .b-review-form__button.active {
    pointer-events: none;
    opacity: 0.5; }

.b-review-form__complain {
  display: none; }

.b-review-form__form {
  width: 100%; }
  @media (min-width: 661px) {
    .b-review-form__form {
      -webkit-box-flex: 1 !important;
          -ms-flex: 1 1 auto !important;
              flex: 1 1 auto !important;
      margin-right: auto !important; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-review-form__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(660px - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-review-form__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(660px - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-review-form__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(660px - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-review-form__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(660px - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-review-form__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(660px - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-review-form__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(660px - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-review-form__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(660px - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-review-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(573px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-review-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(573px - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-review-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(573px - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-review-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(573px - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-review-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(573px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-review-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(573px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-review-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(573px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-review-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(560px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-review-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(560px - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-review-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(560px - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-review-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(560px - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-review-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(560px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-review-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(560px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-review-form__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(560px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-review-form__fields {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.b-review-form__field-container {
  width: 100%;
  margin: 0 !important;
  margin-bottom: 0.75rem !important; }
  @media (min-width: 451px) {
    .b-review-form__field-container.tao-form-field-company {
      width: calc(50% - 15px); } }
  .b-review-form__field-container.tao-error-field input[type="text"] {
    border: 1px solid #ff4c62 !important; }
  .b-review-form__field-container.tao-error-field textarea {
    border: 1px solid #ff4c62 !important; }
  .b-review-form__field-container.tao-error-field input[type='checkbox'] + label::before {
    border-color: #ff4c62 !important; }

.b-review-form__field {
  width: 100%; }

.b-review-form textarea {
  outline: none;
  border-radius: 5px;
  border: 1px solid #9e9d9d !important;
  padding: 1.5rem 0 0.5rem 1.5rem;
  width: 100%;
  height: 7.5rem;
  resize: none; }

.b-review-form input[type="text"] {
  padding-left: 1.5rem;
  border-radius: 5px;
  border: 1px solid #9e9d9d !important;
  width: 100%;
  height: 2.5rem; }

.b-review-form select {
  position: relative;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-radius: 5px;
  border: 1px solid #9e9d9d !important;
  width: 100%;
  height: 2.5rem;
  color: #9e9d9d;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }

.b-review-form__custom-select-arrow {
  position: relative; }
  .b-review-form__custom-select-arrow::before {
    content: "";
    width: 11px;
    height: 7px;
    top: 22px;
    right: 1.5rem;
    background-image: url("/images/arrow-select.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 1; }

.b-review-form__error {
  color: #ff4c62 !important; }

.b-review-form__errors {
  border-radius: 5px;
  border-color: #ff4c62 !important; }
  .b-review-form__errors li {
    color: #ff4c62 !important;
    font-size: inherit !important;
    line-height: inherit !important; }

.b-review-form__review-success, .b-review-form__complain-success {
  display: none;
  margin-top: 2rem;
  height: 3rem;
  pointer-events: none; }

.b-review-form__form-submit {
  height: 1.5rem;
  margin-top: 0.5rem; }
  .b-review-form__form-submit input {
    color: #9e9d9d !important;
    border: 1px solid #9e9d9d !important;
    background-color: #fff !important; }
  .b-review-form__form-submit:hover input {
    color: #00a769 !important;
    border-color: #00a769 !important; }

.b-review-form__ok {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .b-review-form__ok::before {
    content: '';
    display: none;
    width: 0.95rem;
    height: 1rem;
    margin-right: 0.5rem;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/subscribe-form/subscribe-form.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-subscribe-form {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: -70px;
  position: relative;
  z-index: 100; }
  @media (max-width: 1920px) {
    .b-subscribe-form {
      padding-left: 7rem;
      padding-right: 7rem; } }
  @media (max-width: 1280px) {
    .b-subscribe-form {
      padding-left: 4rem;
      padding-right: 4rem; } }
  @media (max-width: 950px) {
    .b-subscribe-form {
      padding-left: 2.5rem;
      padding-right: 2.5rem; } }
  @media (max-width: 660px) {
    .b-subscribe-form {
      padding-left: 1.5rem;
      padding-right: 1.5rem; } }
  @media (max-width: 450px) {
    .b-subscribe-form {
      padding-left: 1rem;
      padding-right: 1rem; } }
  @media (max-width: 320px) {
    .b-subscribe-form {
      padding-left: 1rem;
      padding-right: 1rem; } }
  @media (min-width: 1920px) {
    .b-subscribe-form {
      padding-left: 7rem;
      padding-right: 7rem; } }
  .b-subscribe-form.success .b-subscribe-form__item {
    display: none; }
  .b-subscribe-form__success {
    display: none;
    text-align: center;
    padding: 5rem 0; }
  .b-subscribe-form__container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: 1rem; }
  .b-subscribe-form__icon {
    position: absolute;
    top: -3rem;
    right: -1rem;
    width: 50%;
    height: auto;
    max-width: 200px; }
    @media (min-width: 951px) {
      .b-subscribe-form__icon {
        top: -2rem;
        right: -2rem;
        max-width: 260px; } }
    @media (min-width: 1281px) {
      .b-subscribe-form__icon {
        top: -4rem;
        right: -4rem;
        max-width: 400px; } }
  .b-subscribe-form__content {
    position: relative;
    width: 100%;
    padding: 4.6rem 1rem 1rem;
    z-index: 2; }
    @media (min-width: 951px) {
      .b-subscribe-form__content {
        padding: 4.6rem 2rem 2rem; } }
    @media (min-width: 1281px) {
      .b-subscribe-form__content {
        padding: 2rem 4rem; } }
  .b-subscribe-form__untitle {
    margin-bottom: 2rem; }
  .b-subscribe-form .policy-form {
    max-width: 46rem; }
  .b-subscribe-form .policy-form.error {
    margin-top: 32px; }
  .b-subscribe-form__input-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    max-width: 24rem;
    margin-bottom: 1rem; }
    @media (min-width: 1281px) {
      .b-subscribe-form__input-row {
        max-width: 28rem; } }
  .b-subscribe-form__input {
    padding: 0 1rem;
    height: 2.5rem;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    margin-bottom: .5rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    width: 100%;
    border: none;
    outline: none;
    font-size: 0.75rem;
    border-radius: 999px;
    background-color: #454545; }
    @media (min-width: 661px) {
      .b-subscribe-form__input {
        border-radius: 999px 0 0 999px;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        height: 2.9rem; } }
    @media (min-width: 951px) {
      .b-subscribe-form__input {
        font-size: 0.85rem; } }
  .b-subscribe-form__button {
    height: 2.5rem;
    white-space: nowrap;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    width: 100%; }
    @media (min-width: 661px) {
      .b-subscribe-form__button {
        padding: .2rem;
        height: 2.9rem;
        border-radius: 0 999px 999px 0;
        background-color: #454545;
        width: auto;
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none; } }
    .b-subscribe-form__button .b-button__name {
      font-size: 0.75rem; }
      @media (min-width: 951px) {
        .b-subscribe-form__button .b-button__name {
          font-size: 0.85rem; } }
  .b-subscribe-form__agree label.head {
    font-size: 12px;
    line-height: 18px;
    color: #888787;
    margin-left: 14px; }
    .b-subscribe-form__agree label.head a {
      color: inherit;
      text-decoration: underline; }
      .b-subscribe-form__agree label.head a:hover {
        color: #686767; }
    @media (min-width: 700px) {
      .b-subscribe-form__agree label.head {
        display: inline-block; } }
    @media (min-width: 951px) {
      .b-subscribe-form__agree label.head {
        font-size: 14px;
        line-height: 18px; } }
    @media (min-width: 1281px) {
      .b-subscribe-form__agree label.head {
        font-size: 14px;
        line-height: 21px; } }
  .b-subscribe-form__agree label.checkbox {
    width: 32px;
    height: 30px;
    display: inline-block;
    position: relative; }
  .b-subscribe-form__agree input[type='checkbox'] + span {
    position: absolute;
    left: 0;
    top: 0;
    background: #FFFFFF;
    border: none !important;
    width: 100%;
    height: 100%; }
    .b-subscribe-form__agree input[type='checkbox'] + span::before {
      border-color: #ff4c62 !important; }
  .b-subscribe-form__agree input[type="checkbox"]:checked + span {
    background: url("/images/icons/checkbox_ok.png") 6px 1px no-repeat, #FFFFFF; }
  .b-subscribe-form__error {
    display: none;
    color: #ff4c62;
    margin-bottom: .5rem;
    font-size: 0.7rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    width: 100%;
    text-align: center; }
    @media (min-width: 661px) {
      .b-subscribe-form__error {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1; } }
  .b-subscribe-form__politic {
    margin: 25px auto;
    text-align: left;
    color: #888787;
    font-size: 12px;
    line-height: 18px;
    margin-left: 50px; }
    .b-subscribe-form__politic a {
      font-size: 12px;
      line-height: 18px;
      color: #888787;
      text-decoration: underline; }
      .b-subscribe-form__politic a:hover {
        color: #686767; }
      @media (min-width: 951px) {
        .b-subscribe-form__politic a {
          font-size: 14px;
          line-height: 21px; } }
    @media (min-width: 951px) {
      .b-subscribe-form__politic {
        font-size: 14px;
        line-height: 21px; } }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/support-form/support-form.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-support-form__submit {
  display: inline-block;
  margin-top: 1rem;
  height: 3rem; }
  @media (min-width: 951px) {
    .b-support-form__submit {
      margin-top: 2rem; } }

.b-support-form__success {
  display: none;
  margin-top: 2rem;
  min-height: 3rem;
  pointer-events: none; }

.b-support-form__button {
  height: 2.5rem; }

.b-support-form.ok-message {
  display: none; }

.b-support-form .b-button__content {
  padding: 0 1rem !important; }
  @media (min-width: 951px) {
    .b-support-form .b-button__content {
      padding: 0 2rem !important; } }

.b-support-form .b-button__name {
  font-size: 15px !important; }
  @media (min-width: 951px) {
    .b-support-form .b-button__name {
      font-size: 17px !important; } }

.b-support-form.field-description::-webkit-input-placeholder {
  width: 100px; }

.b-support-form.field-description::-moz-placeholder {
  width: 100px; }

.b-support-form.field-description:-ms-input-placeholder {
  width: 100px; }

.b-support-form.field-description::-ms-input-placeholder {
  width: 100px; }

.b-support-form.field-description::placeholder {
  width: 100px; }

.b-support-form .tao-form {
  margin: 0 !important; }

.b-support-form .tao-form-errors {
  margin-bottom: 1.5rem !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid #ff4c62;
  background-color: #fff; }
  .b-support-form .tao-form-errors li {
    padding: 0; }
    .b-support-form .tao-form-errors li::before {
      display: none; }

.b-support-form__field {
  margin-bottom: 1.5rem !important;
  position: relative; }
  .b-support-form__field:last-child {
    margin-bottom: 0 !important; }
  .b-support-form__field input[type="text"],
  .b-support-form__field textarea {
    border: none !important;
    width: 100%;
    padding-left: 1.75rem;
    background-color: #f4f4f4;
    outline: none;
    overflow: hidden; }
    .b-support-form__field input[type="text"]::-webkit-input-placeholder, .b-support-form__field textarea::-webkit-input-placeholder {
      color: #9e9d9d;
      opacity: 1; }
    .b-support-form__field input[type="text"]::-moz-placeholder, .b-support-form__field textarea::-moz-placeholder {
      color: #9e9d9d;
      opacity: 1; }
    .b-support-form__field input[type="text"]:-ms-input-placeholder, .b-support-form__field textarea:-ms-input-placeholder {
      color: #9e9d9d;
      opacity: 1; }
    .b-support-form__field input[type="text"]::-ms-input-placeholder, .b-support-form__field textarea::-ms-input-placeholder {
      color: #9e9d9d;
      opacity: 1; }
    .b-support-form__field input[type="text"]::placeholder,
    .b-support-form__field textarea::placeholder {
      color: #9e9d9d;
      opacity: 1; }
  .b-support-form__field input[type="text"] {
    height: 2.5rem;
    border-radius: 2.5rem; }
  .b-support-form__field textarea {
    padding-top: 0.75rem;
    height: 5rem;
    resize: none;
    border-radius: 1.25rem; }
  .b-support-form__field input[name="promo"] {
    background-color: #e1efff; }
  .b-support-form__field.tao-error-field input[type="text"],
  .b-support-form__field.tao-error-field textarea,
  .b-support-form__field.tao-error-field label::before {
    border: 1px solid #ff4c62 !important; }
  @media (min-width: 451px) {
    .b-support-form__field {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }
  .b-support-form__field .iti {
    width: 100%; }

.b-support-form__input {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; }

.b-support-form__error {
  position: absolute;
  width: 100%;
  height: 20px;
  color: #FF4C62;
  font-size: 14px;
  text-align: right;
  bottom: -22px; }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/univers-form/univers-form.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-univers-form {
  position: relative; }
  .b-univers-form__back {
    position: absolute;
    border-radius: 5px;
    height: 100%;
    z-index: -1; }
    @media (max-width: 1700px) {
      .b-univers-form__back {
        width: 100vw !important;
        margin-left: calc((50vw - 50%) * -1) !important;
        margin-right: calc((50vw - 50%) * -1) !important; } }
    @media (max-width: 1280px) {
      .b-univers-form__back {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important; } }
    @media (max-width: 950px) {
      .b-univers-form__back {
        width: 100vw !important;
        margin-left: calc((50vw - 50%) * -1) !important;
        margin-right: calc((50vw - 50%) * -1) !important; } }
    @media (min-width: 1700px) {
      .b-univers-form__back {
        width: 100%; } }
  .b-univers-form__main {
    padding: 2rem 0;
    margin-left: auto !important;
    margin-right: auto !important; }
    @media (min-width: 951px) {
      .b-univers-form__main {
        padding: 4rem 0; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-univers-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-univers-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-univers-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-univers-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-univers-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-univers-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-univers-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
    @media (min-width: 1281px) {
      .b-univers-form__main {
        padding: 4rem 0; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-univers-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-univers-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-univers-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-univers-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-univers-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-univers-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-univers-form__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-univers-form__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-univers-form__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-univers-form__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-univers-form__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-univers-form__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-univers-form__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-univers-form__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
  .b-univers-form__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  @media (min-width: 1281px) {
    .b-univers-form__content {
      text-align: start; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-univers-form__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-univers-form__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-univers-form__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-univers-form__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-univers-form__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-univers-form__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-univers-form__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-univers-form__image-container {
    display: none; }
    @media (min-width: 1281px) {
      .b-univers-form__image-container {
        display: block; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-univers-form__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-univers-form__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-univers-form__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-univers-form__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-univers-form__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-univers-form__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-univers-form__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-univers-form__title {
    font-weight: 700; }
  .b-univers-form__desc {
    margin-top: 1rem; }
  .b-univers-form__form {
    display: block;
    margin: 2rem auto 0;
    max-width: 23.5rem; }
    @media (min-width: 1281px) {
      .b-univers-form__form {
        margin: 2rem 0 0; } }
  .b-univers-form__submit {
    display: inline-block;
    margin-top: 1rem;
    height: 3rem; }
    @media (min-width: 951px) {
      .b-univers-form__submit {
        margin-top: 2rem; } }
  .b-univers-form__success {
    display: none;
    margin-top: 2rem;
    min-height: 3rem; }
    .b-univers-form__success .h2 {
      margin-bottom: 1rem; }
  .b-univers-form__button {
    height: 2.5rem; }
  .b-univers-form.ok-message {
    display: none; }
  .b-univers-form .b-button__content {
    padding: 0 1rem !important; }
    @media (min-width: 951px) {
      .b-univers-form .b-button__content {
        padding: 0 2rem !important; } }
  .b-univers-form .b-button__name {
    font-size: 15px !important; }
    @media (min-width: 951px) {
      .b-univers-form .b-button__name {
        font-size: 17px !important; } }
  .b-univers-form .tao-form {
    margin: 0 !important; }
  .b-univers-form .custom-select {
    color: #252525;
    position: relative;
    z-index: 100; }
    .b-univers-form .custom-select--label {
      padding: 0 3rem 0 1.75rem;
      height: 2.5rem;
      border-radius: 24px;
      background-color: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      cursor: pointer;
      position: relative; }
      .b-univers-form .custom-select--label:after {
        content: '';
        background: url("data:image/svg+xml,%3Csvg width='21' height='13' viewBox='0 0 21 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L10.5025 11L20 0.999997' stroke='%23252525' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat;
        width: 21px;
        height: 13px;
        position: absolute;
        right: 1.75rem;
        top: 1rem; }
    .b-univers-form .custom-select--list {
      display: none;
      background-color: #fff;
      border-radius: 0 0 24px 24px;
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      padding: 0 1.75rem 1.75rem 1.75rem;
      max-height: 200px;
      overflow: hidden;
      overflow-y: auto; }
      .b-univers-form .custom-select--list-item {
        cursor: pointer;
        padding: .5rem 0; }
        .b-univers-form .custom-select--list-item:not(:last-child) {
          border-bottom: 1px solid #C4C4C4; }
      .b-univers-form .custom-select--list::-webkit-scrollbar {
        width: 8px; }
      .b-univers-form .custom-select--list::-webkit-scrollbar-thumb {
        background: #0000AA;
        border-right: 4px transparent solid;
        border-bottom: 10px solid transparent;
        background-clip: padding-box; }
    .b-univers-form .custom-select--opened .custom-select--label {
      border-radius: 24px 24px 0 0; }
      .b-univers-form .custom-select--opened .custom-select--label:after {
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg); }
    .b-univers-form .custom-select--opened .custom-select--list {
      display: block; }
  .b-univers-form .select {
    opacity: 0;
    position: absolute;
    visibility: hidden; }
  .select:has(> option[selected]) ~ .b-univers-form__placeholder {
    display: none !important; }
  .b-univers-form .tao-form-errors {
    margin-bottom: 1.5rem !important;
    padding: 0.5rem 1rem !important;
    border: 1px solid #ff4c62;
    background-color: #fff; }
    .b-univers-form .tao-form-errors li {
      padding: 0; }
      .b-univers-form .tao-form-errors li::before {
        display: none; }
  .b-univers-form__placeholder {
    position: absolute;
    z-index: 101;
    left: 0;
    right: 0;
    top: 0;
    padding-left: 1.75rem;
    height: 2.5rem;
    padding-right: 1.75rem;
    color: #9E9D9D;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    .b-univers-form__placeholder span {
      color: #FF454F; }
  .b-univers-form__field {
    display: block;
    margin-bottom: 1.5rem !important;
    position: relative; }
    .b-univers-form__field.tao-error-field {
      margin-bottom: .75rem !important; }
    .b-univers-form__field:last-child {
      margin-bottom: 0 !important; }
    .b-univers-form__field input:not([type="checkbox"]),
    .b-univers-form__field textarea,
    .b-univers-form__field select {
      border: none !important;
      width: 100%;
      padding-left: 1.75rem;
      padding-right: 1.75rem;
      background-color: #fff;
      outline: none;
      overflow: hidden; }
      .b-univers-form__field input:not([type="checkbox"])::-webkit-input-placeholder, .b-univers-form__field textarea::-webkit-input-placeholder, .b-univers-form__field select::-webkit-input-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-univers-form__field input:not([type="checkbox"])::-moz-placeholder, .b-univers-form__field textarea::-moz-placeholder, .b-univers-form__field select::-moz-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-univers-form__field input:not([type="checkbox"]):-ms-input-placeholder, .b-univers-form__field textarea:-ms-input-placeholder, .b-univers-form__field select:-ms-input-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-univers-form__field input:not([type="checkbox"])::-ms-input-placeholder, .b-univers-form__field textarea::-ms-input-placeholder, .b-univers-form__field select::-ms-input-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-univers-form__field input:not([type="checkbox"])::placeholder,
      .b-univers-form__field textarea::placeholder,
      .b-univers-form__field select::placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-univers-form__field input:not([type="checkbox"]):valid + .b-univers-form__placeholder,
      .b-univers-form__field textarea:valid + .b-univers-form__placeholder,
      .b-univers-form__field select:valid + .b-univers-form__placeholder {
        opacity: 0; }
    .b-univers-form__field.required input:not([type="checkbox"])::-webkit-input-placeholder, .b-univers-form__field.required textarea::-webkit-input-placeholder, .b-univers-form__field.required select::-webkit-input-placeholder {
      opacity: 0; }
    .b-univers-form__field.required input:not([type="checkbox"])::-moz-placeholder, .b-univers-form__field.required textarea::-moz-placeholder, .b-univers-form__field.required select::-moz-placeholder {
      opacity: 0; }
    .b-univers-form__field.required input:not([type="checkbox"]):-ms-input-placeholder, .b-univers-form__field.required textarea:-ms-input-placeholder, .b-univers-form__field.required select:-ms-input-placeholder {
      opacity: 0; }
    .b-univers-form__field.required input:not([type="checkbox"])::-ms-input-placeholder, .b-univers-form__field.required textarea::-ms-input-placeholder, .b-univers-form__field.required select::-ms-input-placeholder {
      opacity: 0; }
    .b-univers-form__field.required input:not([type="checkbox"])::placeholder,
    .b-univers-form__field.required textarea::placeholder,
    .b-univers-form__field.required select::placeholder {
      opacity: 0; }
    .b-univers-form__field input:not([type="checkbox"]),
    .b-univers-form__field select {
      height: 2.5rem;
      border-radius: 2.5rem; }
    .b-univers-form__field textarea {
      padding-top: 0.75rem;
      height: 6.75rem;
      resize: none;
      border-radius: 1.25rem; }
      .b-univers-form__field textarea::-webkit-input-placeholder {
        max-width: 350px; }
      .b-univers-form__field textarea::-moz-placeholder {
        max-width: 350px; }
      .b-univers-form__field textarea:-ms-input-placeholder {
        max-width: 350px; }
      .b-univers-form__field textarea::-ms-input-placeholder {
        max-width: 350px; }
      .b-univers-form__field textarea::placeholder {
        max-width: 350px; }
    .b-univers-form__field .iti {
      width: 100%; }
      .b-univers-form__field .iti + .b-univers-form__placeholder {
        padding-left: 2.25rem; }
    .b-univers-form__field .iti__country-list {
      z-index: 102; }
  .b-univers-form__error {
    color: #FF4C62;
    font-size: 14px;
    padding-left: 22px;
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_12516_18690)'%3E%3Cpath d='M7.99967 14.6668C11.6816 14.6668 14.6663 11.6821 14.6663 8.00016C14.6663 4.31826 11.6816 1.3335 7.99967 1.3335C4.31778 1.3335 1.33301 4.31826 1.33301 8.00016C1.33301 11.6821 4.31778 14.6668 7.99967 14.6668Z' fill='black' fill-opacity='0.1' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 6L6 10' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 6L10 10' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_12516_18690'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat left center; }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/forms/vebinar-form/vebinar-form.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-vebinar-form {
  width: 100%; }
  .b-vebinar-form .tao-form {
    margin: 0 !important; }
  .b-vebinar-form .ok-message {
    display: none !important; }
  .b-vebinar-form__label {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-bottom: 1rem;
    width: 100%; }
    @media (min-width: 451px) {
      .b-vebinar-form__label {
        width: 5rem;
        margin-bottom: 0;
        margin-right: 2rem; } }
    @media (min-width: 661px) {
      .b-vebinar-form__label {
        margin-top: 0.5rem;
        width: 7.5rem; } }
  .b-vebinar-form__field {
    margin-bottom: 1.5rem !important;
    position: relative; }
    .b-vebinar-form__field:last-child {
      margin-bottom: 0 !important; }
    .b-vebinar-form__field input[type="text"],
    .b-vebinar-form__field textarea {
      border: none !important;
      width: 100%;
      padding-left: 1.75rem;
      background-color: #f4f4f4;
      outline: none;
      overflow: hidden; }
      .b-vebinar-form__field input[type="text"]::-webkit-input-placeholder, .b-vebinar-form__field textarea::-webkit-input-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-vebinar-form__field input[type="text"]::-moz-placeholder, .b-vebinar-form__field textarea::-moz-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-vebinar-form__field input[type="text"]:-ms-input-placeholder, .b-vebinar-form__field textarea:-ms-input-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-vebinar-form__field input[type="text"]::-ms-input-placeholder, .b-vebinar-form__field textarea::-ms-input-placeholder {
        color: #9e9d9d;
        opacity: 1; }
      .b-vebinar-form__field input[type="text"]::placeholder,
      .b-vebinar-form__field textarea::placeholder {
        color: #9e9d9d;
        opacity: 1; }
    .b-vebinar-form__field input[type="text"] {
      height: 2.5rem;
      border-radius: 2.5rem; }
    .b-vebinar-form__field textarea {
      padding-top: 0.75rem;
      height: 5rem;
      resize: none;
      border-radius: 1.25rem; }
    .b-vebinar-form__field input[name="promo"] {
      background-color: #e1efff; }
    .b-vebinar-form__field.tao-error-field input[type="text"],
    .b-vebinar-form__field.tao-error-field textarea,
    .b-vebinar-form__field.tao-error-field label::before {
      border: 1px solid #ff4c62 !important; }
    @media (min-width: 451px) {
      .b-vebinar-form__field {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; } }
    .b-vebinar-form__field .iti {
      width: 100%; }
  .b-vebinar-form__input {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto; }
  .b-vebinar-form__form-submit {
    display: none; }
  .b-vebinar-form__submit {
    display: inline-block;
    margin-top: 1rem;
    height: 3rem; }
    @media (min-width: 951px) {
      .b-vebinar-form__submit {
        margin-top: 2rem; } }
  .b-vebinar-form__success {
    display: none;
    margin-top: 2rem;
    min-height: 3rem;
    pointer-events: none; }
  .b-vebinar-form__button {
    height: 2.5rem; }
  .b-vebinar-form .tao-form-errors {
    margin-bottom: 1.5rem !important;
    padding: 0.5rem 1rem !important;
    border: 1px solid #ff4c62;
    background-color: #fff; }
    .b-vebinar-form .tao-form-errors li {
      padding: 0; }
      .b-vebinar-form .tao-form-errors li::before {
        display: none; }
  .b-vebinar-form__ok {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    display: none;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100%; }
    .b-vebinar-form__ok-back {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #232323;
      opacity: 0.6;
      z-index: -1; }
    .b-vebinar-form__ok-content {
      text-align: center;
      width: 16rem;
      padding: 0.75rem 1rem 2rem;
      background-color: #fff; }
    .b-vebinar-form__ok-close {
      display: block;
      margin-bottom: 0.75rem;
      margin-left: auto;
      width: 0.6rem;
      height: 0.6rem;
      -webkit-mask-image: url("/images/icons/exit.svg");
              mask-image: url("/images/icons/exit.svg");
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-position: center;
              mask-position: center;
      background-color: #979797;
      cursor: pointer; }
      .b-vebinar-form__ok-close:hover {
        opacity: 0.6; }
    .b-vebinar-form__ok-icon {
      display: block;
      width: 2.5rem;
      height: 2.5rem;
      background-image: url("/images/icons/success.svg");
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 1.5rem; }
    .b-vebinar-form__ok-title {
      margin-bottom: 0.75rem;
      text-align: center; }
    .b-vebinar-form__ok-desc {
      margin-bottom: 2rem;
      text-align: center; }
    .b-vebinar-form__ok-continue {
      display: inline-block;
      margin-left: auto;
      margin-right: auto;
      border-bottom: 1px solid #232323;
      cursor: pointer; }
      .b-vebinar-form__ok-continue:hover {
        border: none; }
  .b-vebinar-form__containerbutton {
    float: left; }
    .b-vebinar-form__containerbutton .little-head a {
      color: inherit; }
  .b-vebinar-form__error {
    position: absolute;
    width: 100%;
    height: 20px;
    color: #FF4C62;
    font-size: 14px;
    text-align: right;
    bottom: -22px; }

/*!********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/grid/grid.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-grid {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  z-index: 100000; }
  .b-grid__content {
    height: 100%; }
  .b-grid__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    @media (max-width: 1920px) {
      .b-grid__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-grid__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-grid__items {
        margin-left: -12.5px;
        margin-right: -12.5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-grid__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-grid__items {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-grid__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-grid__items {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-grid__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-grid__items {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-grid__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-grid__items {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-grid__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
  .b-grid__item {
    background-color: gray;
    opacity: 0.1;
    height: 100%; }
    @media (max-width: 1920px) {
      .b-grid__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(25% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-grid__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(25% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-grid__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(25% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-grid__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(25% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-grid__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(25% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-grid__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(25% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-grid__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(25% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(12.5% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(12.5% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(12.5% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(12.5% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(12.5% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(12.5% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(12.5% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(8.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(8.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(8.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(8.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(8.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(8.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-grid__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(8.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/and-what-is-the-result/and-what-is-the-result.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-and-what-is-the-result__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  gap: 15px; }
  @media (min-width: 451px) {
    .b-and-what-is-the-result__main {
      gap: 30px;
      border-radius: 10px; } }
  @media (min-width: 661px) {
    .b-and-what-is-the-result__main {
      gap: 50px;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }
  @media (min-width: 951px) {
    .b-and-what-is-the-result__main {
      gap: 70px; } }
  @media (min-width: 1281px) {
    .b-and-what-is-the-result__main {
      gap: 180px; } }
  .b-and-what-is-the-result__main_only-text {
    gap: 0; }
  .b-and-what-is-the-result__main_padding {
    padding: 40px 20px; }
    @media (min-width: 451px) {
      .b-and-what-is-the-result__main_padding {
        padding: 40px;
        border-radius: 10px; } }
    @media (min-width: 661px) {
      .b-and-what-is-the-result__main_padding {
        padding: 80px 60px; } }
    @media (min-width: 951px) {
      .b-and-what-is-the-result__main_padding {
        padding: 95px 60px; } }
  .b-and-what-is-the-result__main_content {
    margin-left: auto !important;
    margin-right: auto !important; }
    @media (min-width: 451px) {
      .b-and-what-is-the-result__main_content {
        gap: 10px; } }
    @media (min-width: 661px) {
      .b-and-what-is-the-result__main_content {
        gap: 20px; } }
    @media (min-width: 951px) {
      .b-and-what-is-the-result__main_content {
        gap: 30px; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-and-what-is-the-result__main_content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-and-what-is-the-result__main_content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-and-what-is-the-result__main_content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-and-what-is-the-result__main_content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-and-what-is-the-result__main_content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-and-what-is-the-result__main_content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-and-what-is-the-result__main_content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
    @media (min-width: 1281px) {
      .b-and-what-is-the-result__main_content {
        gap: 60px; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-and-what-is-the-result__main_content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-and-what-is-the-result__main_content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-and-what-is-the-result__main_content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-and-what-is-the-result__main_content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-and-what-is-the-result__main_content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-and-what-is-the-result__main_content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-and-what-is-the-result__main_content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
    .b-and-what-is-the-result__main_content .b-and-what-is-the-result__cont-image {
      width: 100%; }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-and-what-is-the-result__main_content .b-and-what-is-the-result__cont-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-and-what-is-the-result__main_content .b-and-what-is-the-result__cont-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-and-what-is-the-result__main_content .b-and-what-is-the-result__cont-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-and-what-is-the-result__main_content .b-and-what-is-the-result__cont-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-and-what-is-the-result__main_content .b-and-what-is-the-result__cont-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-and-what-is-the-result__main_content .b-and-what-is-the-result__cont-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-and-what-is-the-result__main_content .b-and-what-is-the-result__cont-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
      .b-and-what-is-the-result__main_content .b-and-what-is-the-result__cont-image img {
        width: 100%; }

.b-and-what-is-the-result__cont-text {
  border-left: 5px solid #0000AA;
  padding-left: 20px;
  width: 100%; }
  @media (min-width: 860) {
    .b-and-what-is-the-result__cont-text {
      width: calc(100% / 3 * 2); } }
  .b-and-what-is-the-result__cont-text_only-text {
    width: 100%; }

.b-and-what-is-the-result__title {
  color: #252525;
  font-size: 26px;
  line-height: 45px;
  font-weight: 500;
  margin-bottom: 20px; }
  @media (min-width: 451px) {
    .b-and-what-is-the-result__title {
      font-size: 30px; } }
  @media (min-width: 951px) {
    .b-and-what-is-the-result__title {
      font-size: 35px;
      margin-bottom: 35px; } }
  @media (min-width: 1281px) {
    .b-and-what-is-the-result__title {
      margin-bottom: 20px; } }

.b-and-what-is-the-result__description {
  color: #32343E;
  font-size: 15px;
  margin-bottom: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px; }
  .b-and-what-is-the-result__description ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px; }
  .b-and-what-is-the-result__description ol li {
    margin-left: 6px; }
  @media (min-width: 951px) {
    .b-and-what-is-the-result__description {
      font-size: 16px;
      margin-bottom: 55px; } }
  @media (min-width: 1281px) {
    .b-and-what-is-the-result__description {
      margin-bottom: 40px; } }

.b-and-what-is-the-result__button {
  background: #0000AA;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  border-radius: 33px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 25px;
  font-size: 16px;
  color: #fff0e6;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s; }
  .b-and-what-is-the-result__button:hover {
    color: #fff; }
  @media (min-width: 451px) {
    .b-and-what-is-the-result__button {
      font-size: 13px; } }
  @media (min-width: 951px) {
    .b-and-what-is-the-result__button {
      padding: 17px 49px;
      font-size: 16px; } }
  @media (min-width: 1281px) {
    .b-and-what-is-the-result__button {
      font-weight: 700; } }

.b-and-what-is-the-result__cont-image {
  width: 100%; }
  @media (min-width: 661px) {
    .b-and-what-is-the-result__cont-image {
      width: calc(100% / 3); } }
  .b-and-what-is-the-result__cont-image img {
    width: 100%; }

.ul-ticks li {
  list-style-type: none;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  margin-left: 0; }
  .ul-ticks li:before {
    content: "";
    height: 20px;
    width: 26px;
    background-image: url("/images/ticks.svg");
    background-size: 100% 100%;
    display: inline-block;
    margin-top: 4px; }
    @media (max-width: 950px) {
      .ul-ticks li:before {
        height: 15px;
        width: 20px; } }

/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/arrow-info/arrow-info.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-arrow-info--position_right .b-arrow-info__main {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse; }

@media (min-width: 661px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    margin-bottom: 0; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-arrow-info--position_right .b-arrow-info__arrow {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-arrow-info--position_right .b-arrow-info__arrow {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-arrow-info--position_right .b-arrow-info__arrow {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-arrow-info--position_right .b-arrow-info__arrow {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-arrow-info--position_right .b-arrow-info__arrow {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-arrow-info--position_right .b-arrow-info__arrow {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-arrow-info--position_right .b-arrow-info__arrow {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-arrow-info--position_right .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-arrow-info--position_right .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-arrow-info--position_right .b-arrow-info__arrow-content {
  max-width: 27.5rem; }

@media (min-width: 661px) {
  .b-arrow-info__main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-arrow-info__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-arrow-info__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-arrow-info__main {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-arrow-info__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-arrow-info__main {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-arrow-info__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-arrow-info__main {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-arrow-info__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-arrow-info__main {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-arrow-info__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-arrow-info__main {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-arrow-info__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-arrow-info__arrow {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 1rem;
  height: 10.5rem;
  margin-bottom: 1.5rem; }
  @media (min-width: 451px) {
    .b-arrow-info__arrow {
      padding: 0 2rem; } }
  @media (min-width: 661px) {
    .b-arrow-info__arrow {
      margin-bottom: 0; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-arrow-info__arrow {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-arrow-info__arrow {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-arrow-info__arrow {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-arrow-info__arrow {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-arrow-info__arrow {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-arrow-info__arrow {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-arrow-info__arrow {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-arrow-info__arrow {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-arrow-info__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("/images/arrow-info/arrow.svg");
          mask-image: url("/images/arrow-info/arrow.svg");
  -webkit-mask-position: right center;
          mask-position: right center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: cover;
          mask-size: cover;
  z-index: -1; }

.b-arrow-info__image-container {
  display: none;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 3rem;
  margin-right: 1.5rem; }
  @media (min-width: 451px) {
    .b-arrow-info__image-container {
      display: block; } }
  @media (min-width: 951px) {
    .b-arrow-info__image-container {
      width: 4.5rem; } }
  .b-arrow-info__image-container-mobile {
    display: inline-block;
    width: 1.5rem; }
    @media (min-width: 451px) {
      .b-arrow-info__image-container-mobile {
        display: none; } }

.b-arrow-info__arrow-content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  max-width: 20rem; }
  .b-arrow-info__arrow-content h1,
  .b-arrow-info__arrow-content h2,
  .b-arrow-info__arrow-content h3,
  .b-arrow-info__arrow-content h4,
  .b-arrow-info__arrow-content h5,
  .b-arrow-info__arrow-content p,
  .b-arrow-info__arrow-content .p,
  .b-arrow-info__arrow-content .little,
  .b-arrow-info__arrow-content div {
    margin-bottom: 0.5rem !important; }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-arrow-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-arrow-info__content h1,
.b-arrow-info__content h2,
.b-arrow-info__content h3,
.b-arrow-info__content h4,
.b-arrow-info__content h5,
.b-arrow-info__content p,
.b-arrow-info__content .p,
.b-arrow-info__content .little,
.b-arrow-info__content div {
  margin-bottom: 0.5rem !important; }

/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/characteristics/characteristics.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-characteristics__title {
  font-size: 26px;
  line-height: 45px;
  font-weight: 500;
  text-align: center; }
  @media (min-width: 951px) {
    .b-characteristics__title {
      font-size: 35px; } }
  @media (min-width: 451px) {
    .b-characteristics__title {
      font-size: 30px; } }

.b-characteristics__table {
  margin-top: 40px; }
  .b-characteristics__table table {
    border-spacing: 0;
    min-width: 10rem; }
    @media (min-width: modile2) {
      .b-characteristics__table table {
        table-layout: fixed; } }
  .b-characteristics__table tr {
    height: 65px;
    background-color: #ffffff; }
    .b-characteristics__table tr:nth-of-type(2n) {
      background-color: #f4f4f4; }
  .b-characteristics__table td {
    font-size: 13px;
    line-height: 29px;
    padding: 0;
    background-color: inherit;
    padding-left: 18px; }
    @media (min-width: 1281px) {
      .b-characteristics__table td {
        font-size: 17px; } }
    @media (min-width: modile2) {
      .b-characteristics__table td {
        font-size: 15px; } }
    @media (min-width: 1281px) {
      .b-characteristics__table td:nth-of-type(1) {
        padding-left: 140px; } }
    @media (min-width: 951px) {
      .b-characteristics__table td:nth-of-type(1) {
        padding-left: 80px; } }
    @media (min-width: modile2) {
      .b-characteristics__table td:nth-of-type(1) {
        padding-left: 40px; } }

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/columns-tariffs-info/columns-tariffs-info.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-columns-tariffs-info__title {
  text-align: center; }

.b-columns-tariffs-info__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media (max-width: 1920px) {
    .b-columns-tariffs-info__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-columns-tariffs-info__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-columns-tariffs-info__container {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-columns-tariffs-info__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-columns-tariffs-info__container {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-columns-tariffs-info__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-columns-tariffs-info__container {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-columns-tariffs-info__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-columns-tariffs-info__container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-columns-tariffs-info__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-columns-tariffs-info__container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-columns-tariffs-info__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) {
    .b-columns-tariffs-info__container {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start; } }

.b-columns-tariffs-info__side {
  padding: 2.5rem 0;
  text-align: center;
  margin-bottom: 1rem; }
  @media (max-width: 1920px) {
    .b-columns-tariffs-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-columns-tariffs-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-columns-tariffs-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-columns-tariffs-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-columns-tariffs-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-columns-tariffs-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-columns-tariffs-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-columns-tariffs-info__side:last-child {
    margin-bottom: 0; }
  .b-columns-tariffs-info__side-desc {
    max-width: 16rem;
    margin-left: auto;
    margin-right: auto; }
  .b-columns-tariffs-info__side-title {
    max-width: 16rem;
    margin-left: auto;
    margin-right: auto; }
  @media (min-width: 661px) {
    .b-columns-tariffs-info__side {
      margin-bottom: 0; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-columns-tariffs-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-columns-tariffs-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-columns-tariffs-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-columns-tariffs-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-columns-tariffs-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-columns-tariffs-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-columns-tariffs-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

.b-columns-tariffs-info__price {
  margin-top: 2rem; }

.b-columns-tariffs-info__button {
  display: inline-block;
  height: 2.5rem;
  margin: 1.5rem auto 0; }
  .b-columns-tariffs-info__button .b-button__content div {
    white-space: normal;
    line-height: 17px; }
  @media (min-width: 1281px) {
    .b-columns-tariffs-info__button .b-button__content {
      padding: 0 2rem; }
      .b-columns-tariffs-info__button .b-button__content div {
        white-space: nowrap; } }

.b-columns-tariffs-info__image {
  max-width: 16rem;
  text-align: center;
  width: 100%;
  height: auto; }

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/contacts-info/contacts-info.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-contacts-info {
  padding: 1.5rem 1rem;
  background-color: #fff; }
  @media (min-width: 451px) {
    .b-contacts-info {
      padding: 2rem 1.5rem; } }
  @media (min-width: 1281px) {
    .b-contacts-info {
      padding: 2.5rem 2rem; } }
  .b-contacts-info--type_blue {
    background-color: #00a;
    color: #fff; }
    .b-contacts-info--type_blue .b-contacts-info__phones-item {
      color: #fff; }
    .b-contacts-info--type_blue .b-contacts-info__emails-item {
      color: #fff; }
  .b-contacts-info__main {
    width: 100%; }
    .b-contacts-info__main div:last-child {
      margin-bottom: 0 !important; }
  .b-contacts-info__content {
    width: 100%; }
  .b-contacts-info__address {
    margin-bottom: 1rem; }
    .b-contacts-info__address-name {
      color: #9e9d9d; }
    .b-contacts-info__address:last-child {
      margin-bottom: 0; }
  .b-contacts-info__hidden-icon {
    display: inline-block;
    position: relative;
    top: 5px;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.25rem;
    background-image: url("/images/icons/warning.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
  .b-contacts-info__hidden-title {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    color: #00a;
    cursor: pointer;
    border-bottom: 1px dashed #00a; }
    .b-contacts-info__hidden-title:hover {
      border-bottom: none; }
  .b-contacts-info__hidden-content {
    display: none;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: fixed;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000; }
    .b-contacts-info__hidden-content.active {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    .b-contacts-info__hidden-content::before {
      content: '';
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: #232323;
      opacity: 0.6;
      left: 0;
      top: 0; }
  .b-contacts-info__hidden-desc {
    padding: 0 2rem 2.5rem;
    position: relative;
    overflow: auto;
    background-color: #fff;
    max-width: 33rem;
    max-height: 21rem; }
  .b-contacts-info__hidden-header {
    position: relative;
    max-width: 33rem;
    width: 100%;
    height: 2.5rem;
    background-color: #fff; }
  .b-contacts-info__hidden-exit {
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 0.7rem;
    height: 0.7rem;
    -webkit-mask-image: url("/images/icons/exit.svg");
            mask-image: url("/images/icons/exit.svg");
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    background-color: #9e9d9d;
    cursor: pointer; }
    .b-contacts-info__hidden-exit:hover {
      background-color: #232323; }
  .b-contacts-info__phones {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 1rem; }
    .b-contacts-info__phones-name {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      min-width: 5rem;
      margin-right: 0.5rem; }
      @media (min-width: 451px) {
        .b-contacts-info__phones-name {
          margin-right: 1rem; } }
    .b-contacts-info__phones-items {
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; }
    .b-contacts-info__phones-item {
      display: inline-block;
      font-weight: 700;
      color: inherit;
      margin-bottom: 0.5rem; }
      .b-contacts-info__phones-item:last-child {
        margin-bottom: 0; }
  .b-contacts-info__emails {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .b-contacts-info__emails-name {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      min-width: 5rem;
      margin-right: 0.5rem; }
      @media (min-width: 451px) {
        .b-contacts-info__emails-name {
          margin-right: 1rem; } }
    .b-contacts-info__emails-items {
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; }
    .b-contacts-info__emails-item {
      display: inline-block;
      margin-bottom: 0.5rem;
      text-decoration: underline; }
      .b-contacts-info__emails-item:hover {
        text-decoration: none; }
      .b-contacts-info__emails-item:last-child {
        margin-bottom: 0; }
  .b-contacts-info__days {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .b-contacts-info__work-days {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 1rem;
    margin-bottom: 0.5rem; }
  .b-contacts-info__work-day {
    color: #9e9d9d;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 0.6rem;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.45rem;
    border: 1px solid #9e9d9d;
    margin-left: 0.25rem; }
    .b-contacts-info__work-day--active {
      color: #00a;
      border-color: #00a; }
    .b-contacts-info__work-day:first-child {
      margin-left: 0; }
  .b-contacts-info__time {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto; }

/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/content/content.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-content {
  position: relative; }
  .b-content.main .b-content__content {
    margin-left: auto !important;
    margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-content.main .b-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-content.main .b-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-content.main .b-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-content.main .b-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-content.main .b-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-content.main .b-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-content.main .b-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-content.main .b-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-content.main .b-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-content.main .b-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-content.main .b-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-content.main .b-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-content.main .b-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-content.main .b-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
  .b-content.back {
    padding: 4rem 0; }
  .b-content__back {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto !important;
    width: 100%;
    height: 100%;
    background-color: #fff; }
    @media (max-width: 950px) {
      .b-content__back {
        width: 100vw !important;
        margin-left: calc((50vw - 50%) * -1) !important;
        margin-right: calc((50vw - 50%) * -1) !important; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-content__back {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-content__back {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-content__back {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-content__back {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-content__back {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-content__back {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-content__back {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
  .b-content__content {
    position: relative;
    z-index: 2; }

/*!****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/perfect-scrollbar/css/perfect-scrollbar.css ***!
  \****************************************************************************************************************************************/
/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/component/perfect-scrollbar/perfect-scrollbar.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-page-winners__content-table .ps__rail-y {
  opacity: 1; }

.ps__thumb-y,
.ps__thumb-x {
  background-color: #00a; }

.ps__thumb-x {
  border-radius: 20px;
  opacity: 0.5;
  bottom: 0;
  height: 20px; }

.ps__rail-x {
  background-color: #d6def4 !important;
  border-radius: 20px;
  opacity: 1 !important;
  height: 20px; }
  .ps__rail-x::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 100%;
    -webkit-transform: rotate(0.25turn);
            transform: rotate(0.25turn);
    left: 8px;
    background-image: url("/images/arrow-select.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; }
  .ps__rail-x::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 100%;
    -webkit-transform: rotate(-0.25turn);
            transform: rotate(-0.25turn);
    right: 8px;
    background-image: url("/images/arrow-select.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; }

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y,
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #00a;
  height: 20px;
  border-radius: 20px; }

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #d6def4;
  height: 20px;
  border-radius: 20px; }

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/copy-content/copy-content.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-copy-content {
  position: relative;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: end; }
  @media (min-width: 951px) {
    .b-copy-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 80px);
      margin-left: 40px;
      margin-right: 40px; } }
  .b-copy-content code {
    display: block;
    width: 100%;
    font-family: inherit !important;
    text-align: start; }
  .b-copy-content__main {
    position: relative;
    background-color: #fff;
    -webkit-box-shadow: 30px 10px 25px rgba(71, 41, 21, 0.1);
            box-shadow: 30px 10px 25px rgba(71, 41, 21, 0.1);
    border-radius: 20px;
    padding: 3.5rem 1.25rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .b-copy-content__content {
    margin: 0;
    font-family: "Roboto Mono", monospace;
    position: relative;
    display: block;
    overflow: auto;
    font-size: .65rem; }
    @media (min-width: 951px) {
      .b-copy-content__content {
        font-size: .7rem; } }
    @media (min-width: 1281px) {
      .b-copy-content__content {
        font-size: .8rem; } }
  .b-copy-content__copy {
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: .7rem;
    padding: .4rem 1.2rem;
    color: #232323;
    margin-bottom: 0.75rem;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid #232323;
    z-index: 100; }
    .b-copy-content__copy:hover {
      color: #0000AA;
      border-color: #0000AA; }
    .b-copy-content__copy.active {
      pointer-events: none;
      border-color: #00a769;
      color: #00a769; }

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/first-screen/first-screen.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-first-screen {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media (min-width: 951px) {
    .b-first-screen {
      -ms-flex-pack: distribute;
          justify-content: space-around;
      gap: 0; } }
  @media (min-width: 661px) {
    .b-first-screen {
      gap: 16px;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }
  .b-first-screen__image-container {
    display: none; }
    @media (max-width: 1920px) {
      .b-first-screen__image-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-first-screen__image-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 6.25px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-first-screen__image-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 7.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-first-screen__image-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-first-screen__image-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-first-screen__image-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-first-screen__image-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (min-width: 661px) {
      .b-first-screen__image-container {
        display: block; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-first-screen__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-first-screen__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-first-screen__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-first-screen__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-first-screen__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-first-screen__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-first-screen__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-first-screen__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-first-screen__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-first-screen__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-first-screen__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-first-screen__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-first-screen__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-first-screen__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-first-screen__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-first-screen__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-first-screen__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-first-screen__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-first-screen__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-first-screen__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-first-screen__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
    .b-first-screen__image-container_mob {
      display: block; }
      @media (min-width: 661px) {
        .b-first-screen__image-container_mob {
          display: none; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-first-screen__image-container_mob {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-first-screen__image-container_mob {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-first-screen__image-container_mob {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-first-screen__image-container_mob {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-first-screen__image-container_mob {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-first-screen__image-container_mob {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-first-screen__image-container_mob {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  .b-first-screen__info-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 15px; }
    @media (max-width: 1920px) {
      .b-first-screen__info-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-first-screen__info-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 6.25px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-first-screen__info-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 7.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-first-screen__info-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-first-screen__info-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-first-screen__info-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-first-screen__info-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (min-width: 661px) {
      .b-first-screen__info-container {
        gap: 30px; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-first-screen__info-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-first-screen__info-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-first-screen__info-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-first-screen__info-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-first-screen__info-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-first-screen__info-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-first-screen__info-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  .b-first-screen__title {
    font-size: 26px;
    line-height: 50px;
    font-weight: 500;
    text-align: center; }
    @media (min-width: 451px) {
      .b-first-screen__title {
        font-size: 30px; } }
    @media (min-width: 661px) {
      .b-first-screen__title {
        text-align: left;
        font-size: 30px; } }
    @media (min-width: 951px) {
      .b-first-screen__title {
        font-size: 35px; } }
  .b-first-screen__content {
    font-size: 13px;
    line-height: 20px;
    text-align: center; }
    @media (min-width: 1281px) {
      .b-first-screen__content {
        text-align: left;
        font-size: 17px; } }
    @media (min-width: modile2) {
      .b-first-screen__content {
        font-size: 15px; } }
  .b-first-screen__info-line {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 20px; }
    @media (min-width: 951px) {
      .b-first-screen__info-line {
        gap: 40px; } }
    @media (min-width: 661px) {
      .b-first-screen__info-line {
        gap: 30px; } }
  .b-first-screen__price {
    font-size: 30px;
    line-height: 50px;
    font-weight: 500; }
    @media (min-width: 951px) {
      .b-first-screen__price {
        font-size: 42px; } }
    @media (min-width: 451px) {
      .b-first-screen__price {
        font-size: 35px; } }
  .b-first-screen__button {
    padding: 9px 30px;
    cursor: pointer;
    border-radius: 30px;
    /*&:hover {
            background-color: $color-blue-light;
        }*/ }
    @media (min-width: 951px) {
      .b-first-screen__button {
        padding: 15px 40px; } }
  .b-first-screen__button-text {
    font-size: 13px;
    line-height: 29px;
    color: #fff0e6;
    font-weight: 700; }
    @media (min-width: 951px) {
      .b-first-screen__button-text {
        font-size: 15px; } }

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/image-with-content-margin/image-with-content-margin.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
@media (min-width: 951px) {
  .b-image-with-content-margin--position_right .b-image-with-content-margin__main {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse; } }

@media (min-width: 1700px) {
  .b-image-with-content-margin {
    margin-left: auto !important;
    margin-right: auto !important; } }
  @media (min-width: 1700px) and (max-width: 1920px) {
    .b-image-with-content-margin {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 1280px) {
    .b-image-with-content-margin {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 950px) {
    .b-image-with-content-margin {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 660px) {
    .b-image-with-content-margin {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 450px) {
    .b-image-with-content-margin {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 320px) {
    .b-image-with-content-margin {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (min-width: 1921px) {
    .b-image-with-content-margin {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }

@media (max-width: 1920px) {
  .b-image-with-content-margin--type_full {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (max-width: 1280px) {
  .b-image-with-content-margin--type_full {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (max-width: 950px) {
  .b-image-with-content-margin--type_full {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (max-width: 660px) {
  .b-image-with-content-margin--type_full {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (max-width: 450px) {
  .b-image-with-content-margin--type_full {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (max-width: 320px) {
  .b-image-with-content-margin--type_full {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1921px) {
  .b-image-with-content-margin--type_full {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__margin {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(8.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__margin {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(8.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__margin {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(8.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__margin {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(8.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__margin {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(8.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__margin {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(8.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__margin {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(8.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-with-content-margin--type_full .b-image-with-content-margin__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(41.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

.b-image-with-content-margin__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media (max-width: 1920px) {
    .b-image-with-content-margin__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-image-with-content-margin__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-image-with-content-margin__main {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-image-with-content-margin__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-image-with-content-margin__main {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-image-with-content-margin__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-image-with-content-margin__main {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-image-with-content-margin__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-image-with-content-margin__main {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-image-with-content-margin__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-image-with-content-margin__main {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-image-with-content-margin__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 951px) {
    .b-image-with-content-margin__main {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

.b-image-with-content-margin__title {
  display: none; }
  @media (min-width: 951px) {
    .b-image-with-content-margin__title {
      display: block; } }
  .b-image-with-content-margin__title.mobile {
    display: block; }
    @media (max-width: 1920px) {
      .b-image-with-content-margin__title.mobile {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 40px; } }
    @media (max-width: 1280px) {
      .b-image-with-content-margin__title.mobile {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 25px; } }
    @media (max-width: 950px) {
      .b-image-with-content-margin__title.mobile {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 30px; } }
    @media (max-width: 660px) {
      .b-image-with-content-margin__title.mobile {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px; } }
    @media (max-width: 450px) {
      .b-image-with-content-margin__title.mobile {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px; } }
    @media (max-width: 320px) {
      .b-image-with-content-margin__title.mobile {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px; } }
    @media (min-width: 1921px) {
      .b-image-with-content-margin__title.mobile {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 40px; } }
    @media (min-width: 951px) {
      .b-image-with-content-margin__title.mobile {
        display: none; } }

.b-image-with-content-margin__image-container {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1; }
  @media (max-width: 1920px) {
    .b-image-with-content-margin__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-image-with-content-margin__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-image-with-content-margin__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-image-with-content-margin__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-image-with-content-margin__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-image-with-content-margin__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-image-with-content-margin__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-image-with-content-margin__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(40% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-image-with-content-margin__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(40% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-image-with-content-margin__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(40% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-image-with-content-margin__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(40% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-image-with-content-margin__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(40% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-image-with-content-margin__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(40% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-with-content-margin__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(40% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

.b-image-with-content-margin__margin {
  display: none; }
  @media (min-width: 951px) {
    .b-image-with-content-margin__margin {
      display: block;
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-image-with-content-margin__margin {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(10% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-image-with-content-margin__margin {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(10% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-image-with-content-margin__margin {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(10% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-image-with-content-margin__margin {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(10% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-image-with-content-margin__margin {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(10% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-image-with-content-margin__margin {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(10% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-image-with-content-margin__margin {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(10% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

.b-image-with-content-margin__content {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3; }
  @media (max-width: 1920px) {
    .b-image-with-content-margin__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-image-with-content-margin__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-image-with-content-margin__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-image-with-content-margin__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-image-with-content-margin__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-image-with-content-margin__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-image-with-content-margin__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-image-with-content-margin__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-image-with-content-margin__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-image-with-content-margin__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-image-with-content-margin__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-image-with-content-margin__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-image-with-content-margin__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-with-content-margin__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/image-with-content-two-column/image-with-content-two-column.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-image-with-content-two-column {
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-image-with-content-two-column {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-image-with-content-two-column {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-image-with-content-two-column {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-image-with-content-two-column {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-image-with-content-two-column {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-image-with-content-two-column {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-with-content-two-column {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
  .b-image-with-content-two-column--background {
    padding: 2rem 1rem; }
    @media (min-width: 951px) {
      .b-image-with-content-two-column--background {
        padding: 4rem 3rem; } }
  .b-image-with-content-two-column__main {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap; }
    @media (max-width: 1920px) {
      .b-image-with-content-two-column__main {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (min-width: 1921px) {
      .b-image-with-content-two-column__main {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (max-width: 1280px) {
      .b-image-with-content-two-column__main {
        margin-left: -12.5px;
        margin-right: -12.5px;
        margin-top: -25px; } }
    @media (min-width: 1921px) {
      .b-image-with-content-two-column__main {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (max-width: 950px) {
      .b-image-with-content-two-column__main {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -30px; } }
    @media (min-width: 1921px) {
      .b-image-with-content-two-column__main {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (max-width: 660px) {
      .b-image-with-content-two-column__main {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: -20px; } }
    @media (min-width: 1921px) {
      .b-image-with-content-two-column__main {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (max-width: 450px) {
      .b-image-with-content-two-column__main {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: -10px; } }
    @media (min-width: 1921px) {
      .b-image-with-content-two-column__main {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (max-width: 320px) {
      .b-image-with-content-two-column__main {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: -10px; } }
    @media (min-width: 1921px) {
      .b-image-with-content-two-column__main {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
  .b-image-with-content-two-column__image-container {
    text-align: center; }
    @media (max-width: 1920px) {
      .b-image-with-content-two-column__image-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 40px; } }
    @media (max-width: 1280px) {
      .b-image-with-content-two-column__image-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 25px; } }
    @media (max-width: 950px) {
      .b-image-with-content-two-column__image-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 30px; } }
    @media (max-width: 660px) {
      .b-image-with-content-two-column__image-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px; } }
    @media (max-width: 450px) {
      .b-image-with-content-two-column__image-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px; } }
    @media (max-width: 320px) {
      .b-image-with-content-two-column__image-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px; } }
    @media (min-width: 1921px) {
      .b-image-with-content-two-column__image-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 40px; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(20% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(20% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(20% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(20% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(20% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(20% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-with-content-two-column__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(20% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }
    .b-image-with-content-two-column__image-container--position_left {
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1; }
    .b-image-with-content-two-column__image-container--position_right {
      -webkit-box-ordinal-group: 4;
          -ms-flex-order: 3;
              order: 3; }
  .b-image-with-content-two-column__content {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2; }
    @media (max-width: 1920px) {
      .b-image-with-content-two-column__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 40px; } }
    @media (max-width: 1280px) {
      .b-image-with-content-two-column__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 25px; } }
    @media (max-width: 950px) {
      .b-image-with-content-two-column__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 30px; } }
    @media (max-width: 660px) {
      .b-image-with-content-two-column__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px; } }
    @media (max-width: 450px) {
      .b-image-with-content-two-column__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px; } }
    @media (max-width: 320px) {
      .b-image-with-content-two-column__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px; } }
    @media (min-width: 1921px) {
      .b-image-with-content-two-column__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 40px; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(80% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(80% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(80% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(80% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(80% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(80% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-with-content-two-column__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(80% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/image-with-content/image-with-content.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-image-with-content--content_main {
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-image-with-content--content_main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-image-with-content--content_main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-image-with-content--content_main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-image-with-content--content_main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-image-with-content--content_main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-image-with-content--content_main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-with-content--content_main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-image-with-content--content_main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-image-with-content--content_main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-image-with-content--content_main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-image-with-content--content_main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-image-with-content--content_main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-image-with-content--content_main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-image-with-content--content_main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

.b-image-with-content__main {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap; }
  @media (max-width: 1920px) {
    .b-image-with-content__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-image-with-content__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-image-with-content__main {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-image-with-content__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-image-with-content__main {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-image-with-content__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-image-with-content__main {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-image-with-content__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-image-with-content__main {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-image-with-content__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-image-with-content__main {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-image-with-content__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }

@media (max-width: 1920px) {
  .b-image-with-content__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (max-width: 1280px) {
  .b-image-with-content__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (max-width: 950px) {
  .b-image-with-content__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (max-width: 660px) {
  .b-image-with-content__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (max-width: 450px) {
  .b-image-with-content__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (max-width: 320px) {
  .b-image-with-content__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1921px) {
  .b-image-with-content__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-image-with-content__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-image-with-content__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-image-with-content__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-image-with-content__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-image-with-content__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-image-with-content__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-image-with-content__image-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

.b-image-with-content__image-container--position_left {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1; }

.b-image-with-content__image-container--position_right {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3; }

@media (max-width: 450px) {
  .b-image-with-content__image-container img {
    width: 100%; } }

@media (max-width: 660px) {
  .b-image-with-content__image-container {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2; } }

.b-image-with-content__content {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2; }
  @media (max-width: 1920px) {
    .b-image-with-content__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-image-with-content__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-image-with-content__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-image-with-content__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-image-with-content__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-image-with-content__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-image-with-content__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-image-with-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-image-with-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-image-with-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-image-with-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-image-with-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-image-with-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-image-with-content__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }
  @media (max-width: 660px) {
    .b-image-with-content__content {
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1; } }

.ck-border_radius > span {
  border-radius: 31px;
  padding: 0 8px; }

/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/image-with-info/image-with-info.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-image-with-info {
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-image-with-info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
  .b-image-with-info--background {
    padding: 1rem;
    border-radius: 5px; }
    @media (max-width: 450px) {
      .b-image-with-info--background {
        width: 100vw !important;
        margin-left: calc((50vw - 50%) * -1) !important;
        margin-right: calc((50vw - 50%) * -1) !important; } }
  .b-image-with-info__main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-image-with-info__main {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-image-with-info__main {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-image-with-info__main {
    margin-left: -12.5px;
    margin-right: -12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-image-with-info__main {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-image-with-info__main {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-image-with-info__main {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-image-with-info__main {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-image-with-info__main {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-image-with-info__main {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-image-with-info__main {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-image-with-info__main {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-image-with-info__main {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }
  .b-image-with-info__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    @media (min-width: 1281px) {
      .b-image-with-info__content {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-image-with-info__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-image-with-info__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-image-with-info__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-image-with-info__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-image-with-info__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-image-with-info__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-image-with-info__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-image-with-info__pre-title {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background-color: #fff;
    border-radius: 1.5rem; }
  .b-image-with-info__title {
    font-weight: 700;
    width: 100%; }
  .b-image-with-info__desc {
    margin-top: 1rem;
    font-weight: 400; }
  .b-image-with-info__button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 2rem;
    height: 3rem; }
  .b-image-with-info__image-container-desktop {
    display: none; }
    @media (min-width: 1281px) {
      .b-image-with-info__image-container-desktop {
        display: block; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-image-with-info__image-container-desktop {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-image-with-info__image-container-desktop {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-image-with-info__image-container-desktop {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-image-with-info__image-container-desktop {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-image-with-info__image-container-desktop {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-image-with-info__image-container-desktop {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-image-with-info__image-container-desktop {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-image-with-info__image-container-mobile {
    display: block;
    margin-top: 2rem !important; }
    @media (max-width: 1920px) {
      .b-image-with-info__image-container-mobile {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-image-with-info__image-container-mobile {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-image-with-info__image-container-mobile {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-image-with-info__image-container-mobile {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-image-with-info__image-container-mobile {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-image-with-info__image-container-mobile {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-image-with-info__image-container-mobile {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-image-with-info__image-container-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(60% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-image-with-info__image-container-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(60% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-image-with-info__image-container-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(60% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-image-with-info__image-container-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(60% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-image-with-info__image-container-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(60% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-image-with-info__image-container-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(60% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-image-with-info__image-container-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(60% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    @media (min-width: 1281px) {
      .b-image-with-info__image-container-mobile {
        display: none; } }

/*!**********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/fancybox/dist/css/jquery.fancybox.css ***!
  \**********************************************************************************************************************************/
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp {
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  vertical-align: top; }

.fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8020; }

.fancybox-skin {
  position: relative;
  background: #f9f9f9;
  color: #444;
  text-shadow: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px; }

.fancybox-opened {
  z-index: 8030; }

.fancybox-opened .fancybox-skin {
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); }

.fancybox-outer, .fancybox-inner {
  position: relative; }

.fancybox-inner {
  overflow: hidden; }

.fancybox-type-iframe .fancybox-inner {
  -webkit-overflow-scrolling: touch; }

.fancybox-error {
  color: #444;
  font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 15px;
  white-space: nowrap; }

.fancybox-image, .fancybox-iframe {
  display: block;
  width: 100%;
  height: 100%; }

.fancybox-image {
  max-width: 100%;
  max-height: 100%; }

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  background-image: url("../img/fancybox_sprite.png"); }

#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 8060; }

#fancybox-loading div {
  width: 44px;
  height: 44px;
  background: url("../img/fancybox_loading.gif") center center no-repeat; }

.fancybox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 8040; }

.fancybox-nav {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  background: transparent url("../img/blank.gif");
  /* helps IE */
  -webkit-tap-highlight-color: transparent;
  z-index: 8040; }

.fancybox-prev {
  left: 0; }

.fancybox-next {
  right: 0; }

.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 34px;
  margin-top: -18px;
  cursor: pointer;
  z-index: 8040;
  visibility: hidden; }

.fancybox-prev span {
  left: 10px;
  background-position: 0 -36px; }

.fancybox-next span {
  right: 10px;
  background-position: 0 -72px; }

.fancybox-nav:hover span {
  visibility: visible; }

.fancybox-tmp {
  position: absolute;
  top: -99999px;
  left: -99999px;
  max-width: 99999px;
  max-height: 99999px;
  overflow: visible !important; }

/* Overlay helper */
.fancybox-lock {
  overflow: visible !important;
  width: auto; }

.fancybox-lock body {
  overflow: hidden !important; }

.fancybox-lock-test {
  overflow-y: hidden !important; }

.fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 8010;
  background: url("../img/fancybox_overlay.png"); }

.fancybox-overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0; }

.fancybox-lock .fancybox-overlay {
  overflow: auto;
  overflow-y: scroll; }

/* Title helper */
.fancybox-title {
  visibility: hidden;
  font: normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  text-shadow: none;
  z-index: 8050; }

.fancybox-opened .fancybox-title {
  visibility: visible; }

.fancybox-title-float-wrap {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-bottom: -35px;
  z-index: 8050;
  text-align: center; }

.fancybox-title-float-wrap .child {
  display: inline-block;
  margin-right: -100%;
  padding: 2px 20px;
  background: transparent;
  /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.8);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-shadow: 0 1px 2px #222;
  color: #FFF;
  font-weight: bold;
  line-height: 24px;
  white-space: nowrap; }

.fancybox-title-outside-wrap {
  position: relative;
  margin-top: 10px;
  color: #fff; }

.fancybox-title-inside-wrap {
  padding-top: 10px; }

.fancybox-title-over-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  padding: 10px;
  background: #000;
  background: rgba(0, 0, 0, 0.8); }

/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url("../img/fancybox_sprite@2x.png");
    background-size: 44px 152px;
    /*The size of the normal image, half the size of the hi-res image*/ }
  #fancybox-loading div {
    background-image: url("../img/fancybox_loading@2x.gif");
    background-size: 24px 24px;
    /*The size of the normal image, half the size of the hi-res image*/ } }

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/component/fancybox/fancybox.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
a {
  border: none !important; }

.fancybox-link {
  position: relative;
  display: block; }
  .fancybox-link:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: url("/local/templates/uiscom/images/fancybox/plus-ico.svg") no-repeat center center;
    background-size: 100px;
    opacity: 0;
    -webkit-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease; }
  .fancybox-link:hover:after {
    opacity: .75; }

@media (max-width: 950px) {
  .fancybox-link:after {
    opacity: .75;
    background-size: 50px; } }

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  background-image: url("/local/templates/uiscom/images/fancybox/fancybox_sprite.png"); }

#fancybox-loading div {
  background: url("/local/templates/uiscom/images/fancybox/fancybox_loading.gif") center center no-repeat; }

.fancybox-nav {
  background: transparent url("/local/templates/uiscom/images/fancybox/blank.gif"); }

.fancybox-overlay {
  background: url("/local/templates/uiscom/images/fancybox/fancybox_overlay.png"); }

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url("/local/templates/uiscom/images/fancybox/fancybox_sprite@2x.png"); }
  #fancybox-loading div {
    background-image: url("/local/templates/uiscom/images/fancybox/fancybox_loading@2x.gif"); } }

/*!***************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/image/image.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-image {
  text-align: center;
  padding: 10px;
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-image.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-image.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-image.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-image.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-image.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-image.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-image.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-image.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-image.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-image.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-image.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-image.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-image.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
  .b-image--whitebg {
    -webkit-box-shadow: 30px 10px 25px rgba(71, 41, 21, 0.1);
            box-shadow: 30px 10px 25px rgba(71, 41, 21, 0.1);
    background-color: #fff;
    border-radius: 20px; }
    .b-image--whitebg img {
      border-radius: 10px; }
  .b-image--border img {
    border: 1px solid #EAEAEA; }
  .b-image__desc {
    margin-top: .5rem;
    color: #9e9d9d; }

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/important-content/important-content.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
@media (max-width: 660px) {
  .b-important-content {
    width: 100vw !important;
    margin-left: calc((50vw - 50%) * -1) !important;
    margin-right: calc((50vw - 50%) * -1) !important; } }

.b-important-content__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #d6def4;
  padding: 2rem 1rem; }
  @media (min-width: 451px) {
    .b-important-content__main {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      padding: 2.5rem 1.5rem; } }
  @media (min-width: 661px) {
    .b-important-content__main {
      padding: 3rem 2.5rem; } }
  @media (min-width: 951px) {
    .b-important-content__main {
      padding: 4rem 2.5rem; } }
  @media (min-width: 1281px) {
    .b-important-content__main {
      padding: 4rem 3.5rem; } }

.b-important-content__image {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-bottom: 1.5rem; }
  @media (min-width: 451px) {
    .b-important-content__image {
      margin-right: 2rem;
      margin-bottom: 0; } }

.b-important-content__content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; }

/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/link-info/link-info.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-link-info {
  border-radius: 5px; }
  @media (max-width: 450px) {
    .b-link-info {
      width: 100vw !important;
      margin-left: calc((50vw - 50%) * -1) !important;
      margin-right: calc((50vw - 50%) * -1) !important; } }
  .b-link-info__title {
    max-width: 1100px; }
  .b-link-info__image {
    max-width: 110px; }
    @media (min-width: 661px) {
      .b-link-info__image {
        margin-right: 40px; } }
    @media (max-width: 660px) {
      .b-link-info__image {
        margin-bottom: 40px; } }
  .b-link-info__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 2rem 0.5rem;
    width: 100%;
    height: 100%;
    border-radius: 5px; }
    @media (min-width: 661px) {
      .b-link-info__content {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        padding: 2rem 4rem; } }
    @media (min-width: 451px) {
      .b-link-info__content {
        padding-bottom: 2rem;
        padding-top: 2rem; } }
    @media (min-width: 951px) {
      .b-link-info__content {
        padding: 1.3rem 9rem; } }
  .b-link-info__text {
    text-align: center; }
    @media (min-width: 661px) {
      .b-link-info__text {
        text-align: start;
        margin-right: 2rem;
        margin-bottom: 0; } }
  .b-link-info__desc {
    margin-top: 0.25rem; }
  .b-link-info__button {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    position: relative;
    height: 2.5rem;
    margin-top: 1.5rem; }
    @media (min-width: 661px) {
      .b-link-info__button {
        margin-top: 0; } }

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/mp-icon-with-text/mp-icon-with-text.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-mp-icon-with-text {
  border-radius: 20px; }
  @media (min-width: 1700px) {
    .b-mp-icon-with-text {
      margin-left: auto !important;
      margin-right: auto !important; } }
  @media (min-width: 1700px) and (max-width: 1920px) {
    .b-mp-icon-with-text {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 1280px) {
    .b-mp-icon-with-text {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 950px) {
    .b-mp-icon-with-text {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 660px) {
    .b-mp-icon-with-text {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 450px) {
    .b-mp-icon-with-text {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 320px) {
    .b-mp-icon-with-text {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (min-width: 1921px) {
    .b-mp-icon-with-text {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 1920px) {
    .b-mp-icon-with-text--type_full {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-mp-icon-with-text--type_full {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-mp-icon-with-text--type_full {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-mp-icon-with-text--type_full {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-mp-icon-with-text--type_full {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-mp-icon-with-text--type_full {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-mp-icon-with-text--type_full {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  .b-mp-icon-with-text__main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    background-repeat: no-repeat;
    background-position: right 20px top 20px;
    padding: 20px; }
    @media (min-width: 951px) {
      .b-mp-icon-with-text__main {
        padding: 40px;
        background-position: left 40px top 40px; } }
  .b-mp-icon-with-text__desc {
    font-weight: 400; }
    @media (max-width: 1920px) {
      .b-mp-icon-with-text__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-mp-icon-with-text__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 6.25px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-mp-icon-with-text__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 7.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-mp-icon-with-text__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-mp-icon-with-text__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-mp-icon-with-text__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 2.5px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-mp-icon-with-text__desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-mp-icon-with-text__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-mp-icon-with-text__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-mp-icon-with-text__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-mp-icon-with-text__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-mp-icon-with-text__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-mp-icon-with-text__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-mp-icon-with-text__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/mp-image-with-info/mp-image-with-info.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-mp-image-with-info {
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 10px;
  border-radius: 20px; }
  .b-mp-image-with-info--background {
    padding: 1rem;
    border-radius: 5px; }
    @media (max-width: 450px) {
      .b-mp-image-with-info--background {
        width: 100vw !important;
        margin-left: calc((50vw - 50%) * -1) !important;
        margin-right: calc((50vw - 50%) * -1) !important; } }
  .b-mp-image-with-info__main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    @media (min-width: 951px) {
      .b-mp-image-with-info__main {
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-mp-image-with-info__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-mp-image-with-info__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-mp-image-with-info__main {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-mp-image-with-info__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-mp-image-with-info__main {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-mp-image-with-info__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-mp-image-with-info__main {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-mp-image-with-info__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-mp-image-with-info__main {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-mp-image-with-info__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-mp-image-with-info__main {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-mp-image-with-info__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  .b-mp-image-with-info__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    padding: 40px 0; }
    @media (min-width: 951px) {
      .b-mp-image-with-info__content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 120px);
        margin-left: 60px;
        margin-right: 60px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start; } }
  .b-mp-image-with-info__pre-title {
    display: inline-block;
    padding: 8px;
    line-height: 1;
    background-color: #fff;
    border-radius: 5px; }
  .b-mp-image-with-info__title {
    font-weight: 700;
    text-align: center; }
    @media (min-width: 951px) {
      .b-mp-image-with-info__title {
        text-align: left; } }
  .b-mp-image-with-info__desc {
    margin-top: 1rem;
    font-weight: 400;
    text-align: center; }
    @media (min-width: 951px) {
      .b-mp-image-with-info__desc {
        text-align: start; } }
  .b-mp-image-with-info__button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 2rem;
    height: 3rem; }
  @media (min-width: 951px) {
    .b-mp-image-with-info__image-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px; } }
  .b-mp-image-with-info__image {
    border-radius: 10px;
    -webkit-box-shadow: -20px 0px 100px rgba(0, 0, 0, 0.1);
            box-shadow: -20px 0px 100px rgba(0, 0, 0, 0.1);
    min-height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover; }

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/panel-with-image/panel-with-image.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-panel-with-image {
  position: relative; }
  .b-panel-with-image__special {
    color: #fff0e6;
    font-size: 17px;
    line-height: 29px;
    background: #F24C55;
    border-radius: 60px;
    padding: 5px 22px;
    position: absolute;
    top: -12px;
    left: 0;
    z-index: 4;
    font-weight: 400; }
    @media (max-width: 950px) {
      .b-panel-with-image__special {
        left: 2.5rem; } }
    @media (max-width: 450px) {
      .b-panel-with-image__special {
        left: 0;
        top: -15px; } }
  .b-panel-with-image__back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 5px; }
    @media (max-width: 450px) {
      .b-panel-with-image__back {
        width: 100vw !important;
        margin-left: calc((50vw - 50%) * -1) !important;
        margin-right: calc((50vw - 50%) * -1) !important;
        background-position: left bottom; } }
    @media (min-width: 1281px) {
      .b-panel-with-image__back {
        background-position: left bottom; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-panel-with-image__back {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-panel-with-image__back {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-panel-with-image__back {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-panel-with-image__back {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-panel-with-image__back {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-panel-with-image__back {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-panel-with-image__back {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  .b-panel-with-image__back-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
  .b-panel-with-image__main {
    position: relative;
    display: block;
    padding: 2.5rem 0;
    z-index: 1; }
    @media (min-width: 451px) {
      .b-panel-with-image__main {
        padding: 2.5rem; } }
    @media (min-width: 951px) {
      .b-panel-with-image__main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding: 1rem 0; } }
  .b-panel-with-image__title {
    font-weight: 400;
    margin-top: 1rem;
    font-size: 1.8rem;
    line-height: 2.25rem; }
    @media (min-width: 951px) {
      .b-panel-with-image__title {
        margin-right: 2rem;
        margin-top: 0; } }
    @media (min-width: 1281px) {
      .b-panel-with-image__title {
        margin-right: 3rem;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-panel-with-image__title {
        font-size: 1.5rem;
        line-height: 1.9rem; } }
    @media (max-width: 950px) {
      .b-panel-with-image__title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        text-align: center; } }
    @media (max-width: 660px) {
      .b-panel-with-image__title {
        font-size: 1.2rem;
        line-height: 1.6rem; } }
  .b-panel-with-image__text {
    font-weight: 400;
    font-size: 17px;
    line-height: 29px; }
    @media (max-width: 950px) {
      .b-panel-with-image__text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        text-align: center; } }
    @media (max-width: 660px) {
      .b-panel-with-image__text {
        font-size: 15px;
        line-height: 25px; } }
  .b-panel-with-image__text-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px; }
    @media (min-width: 951px) {
      .b-panel-with-image__text-container {
        padding-top: 40px;
        padding-bottom: 40px; } }
    @media (max-width: 660px) {
      .b-panel-with-image__text-container {
        gap: 5px; } }
    @media (max-width: 450px) {
      .b-panel-with-image__text-container {
        gap: 10px; } }
  .b-panel-with-image__image {
    max-width: 12.75rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto; }
    @media (max-width: 950px) {
      .b-panel-with-image__image {
        max-width: 100%;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
    @media (min-width: 951px) {
      .b-panel-with-image__image {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2; } }

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/person/person.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-person {
  background-color: #fff;
  border-radius: 5px;
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-person {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-person {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-person {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-person {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-person {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-person {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-person {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-person {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-person {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-person {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-person {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-person {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-person {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-person {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
  .b-person__main {
    min-height: 12.5rem;
    padding: 1rem; }
    @media (min-width: 951px) {
      .b-person__main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 2rem; } }
    @media (min-width: 1281px) {
      .b-person__main {
        padding: 3rem; } }
  .b-person__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-bottom: 2rem;
    text-align: center;
    margin-right: 1rem; }
    @media (min-width: 951px) {
      .b-person__image {
        margin-bottom: 0;
        text-align: start; } }
    .b-person__image--border-radius {
      border-radius: 100%;
      overflow: hidden;
      width: 8rem;
      height: 8rem; }
      .b-person__image--border-radius img {
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover; }
  .b-person__info {
    background-image: url("/images/icons/person.svg");
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 146px 113px; }
  @media (min-width: 951px) {
    .b-person__desc {
      margin-left: 2rem; } }

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/product-info/product-info.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-product-info__main {
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-product-info__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-product-info__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-product-info__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-product-info__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-product-info__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-product-info__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-product-info__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

.b-product-info__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media (min-width: 951px) {
    .b-product-info__content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-product-info__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-product-info__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-product-info__content {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-product-info__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-product-info__content {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-product-info__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-product-info__content {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-product-info__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-product-info__content {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-product-info__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-product-info__content {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-product-info__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-product-info__image {
  display: block;
  -webkit-filter: drop-shadow(0 0 20.5116px rgba(0, 0, 0, 0.3));
          filter: drop-shadow(0 0 20.5116px rgba(0, 0, 0, 0.3)); }
  .b-product-info__image img {
    max-height: 23rem; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-product-info__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-product-info__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-product-info__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-product-info__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-product-info__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-product-info__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-product-info__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 951px) {
    .b-product-info__image img {
      max-height: none; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-product-info__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(60% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-product-info__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(60% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-product-info__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(60% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-product-info__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(60% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-product-info__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(60% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-product-info__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(60% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-product-info__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(60% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-product-info__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center; }
  @media (min-width: 951px) {
    .b-product-info__info {
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      text-align: start; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-product-info__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-product-info__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-product-info__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-product-info__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-product-info__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-product-info__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-product-info__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-product-info__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(40% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-product-info__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(40% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-product-info__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(40% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-product-info__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(40% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-product-info__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(40% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-product-info__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(40% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-product-info__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(40% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-product-info__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  height: 5rem;
  margin-top: 1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  overflow: hidden; }
  .b-product-info__icon img {
    -o-object-fit: contain;
       object-fit: contain; }
  @media (min-width: 951px) {
    .b-product-info__icon {
      margin-top: 0;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start; } }

.b-product-info__title {
  margin-top: 1.5rem; }

.b-product-info__desc {
  margin-top: 1rem; }

.b-product-info__button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 2.5rem; }

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/product-with-price/product-with-price.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-product-with-price__main {
  padding: 2rem 1.5rem;
  background-color: #fff; }

.b-product-with-price__name {
  color: #232323;
  margin-bottom: 0.5rem; }

.b-product-with-price__desc {
  display: -webkit-box;
  min-height: 3.25rem;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #232323; }
  .b-product-with-price__desc:hover {
    color: #232323; }
  @media (min-width: 951px) {
    .b-product-with-price__desc {
      min-height: 4.25rem; } }

.b-product-with-price__image-container {
  height: 4.25rem;
  margin: 1.5rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media (min-width: 580px) {
    .b-product-with-price__image-container {
      height: 6.25rem; } }
  @media (min-width: 951px) {
    .b-product-with-price__image-container {
      height: 9.25rem; } }

.b-product-with-price__image {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  height: 100%; }

.b-product-with-price__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -0.5rem; }

.b-product-with-price__price {
  margin-right: auto;
  margin-top: 0.5rem;
  padding-right: 0.5rem; }

.b-product-with-price__basket {
  margin-top: 0.5rem; }

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/promo-with-button/promo-with-button.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-promo-with-button {
  position: relative;
  border-radius: 20px;
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-promo-with-button.main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
  .b-promo-with-button__back {
    background-attachment: fixed;
    position: absolute;
    position: absolute;
    border-radius: 20px;
    height: 100%;
    z-index: -1;
    left: -20px;
    right: -20px; }
    @media (min-width: 451px) {
      .b-promo-with-button__back {
        left: -30px;
        right: -30px; } }
    @media (min-width: 661px) {
      .b-promo-with-button__back {
        left: -50px;
        right: -50px; } }
    @media (min-width: 951px) {
      .b-promo-with-button__back {
        left: 0;
        right: 0; } }
    @supports (-webkit-touch-callout: none) {
      .b-promo-with-button__back {
        background-position: center top;
        background-attachment: scroll;
        background-size: auto 100vh; } }
  .b-promo-with-button__content {
    border-radius: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 40px 20px; }
    @media (min-width: 661px) {
      .b-promo-with-button__content {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; } }
  .b-promo-with-button__container {
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 40px 0 0; }
    @media (min-width: 661px) {
      .b-promo-with-button__container {
        text-align: center; } }
    @media (min-width: 951px) {
      .b-promo-with-button__container {
        max-width: 655px; } }
    @media (min-width: 1281px) {
      .b-promo-with-button__container {
        max-width: 50vw; } }
  .b-promo-with-button__title {
    font-weight: 400;
    padding: 0 !important; }
  .b-promo-with-button__desc {
    margin-top: 1rem;
    font-size: 15px; }
  .b-promo-with-button__button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 2rem;
    margin-top: 1rem;
    z-index: 4; }
  .b-promo-with-button__meta {
    font-size: 14px;
    padding: 5px 0;
    text-align: center; }

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/social/social.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-social__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  @media (max-width: 1920px) {
    .b-social__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-social__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-social__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-social__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-social__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-social__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-social__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-social__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-social__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-social__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-social__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-social__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-social__item {
  position: relative;
  max-width: 12rem;
  height: 4rem;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  cursor: pointer; }
  @media (max-width: 1920px) {
    .b-social__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-social__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-social__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-social__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-social__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-social__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-social__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-social__item a {
    position: absolute;
    border: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .b-social__item.vk {
    background-image: url("/images/social/social-block/vk.svg"); }
    .b-social__item.vk:hover {
      background-image: url("/images/social/social-block/vk-hover.svg"); }
  .b-social__item.facebook {
    background-image: url("/images/social/social-block/facebook.svg"); }
    .b-social__item.facebook:hover {
      background-image: url("/images/social/social-block/facebook-hover.svg"); }
  .b-social__item.youtube {
    background-image: url("/images/social/social-block/youtube.svg"); }
    .b-social__item.youtube:hover {
      background-image: url("/images/social/social-block/youtube-hover.svg"); }
  .b-social__item.instagram {
    background-image: url("/images/social/social-block/instagram.svg"); }
    .b-social__item.instagram:hover {
      background-image: url("/images/social/social-block/instagram-hover.svg"); }
  .b-social__item.vc-ru {
    background-image: url("/images/social/social-block/vc-ru.svg"); }
    .b-social__item.vc-ru:hover {
      background-image: url("/images/social/social-block/vc-ru-hover.svg"); }
  .b-social__item.telegram {
    background-image: url("/images/social/social-block/telegram.svg"); }
    .b-social__item.telegram:hover {
      background-image: url("/images/social/social-block/telegram-hover.svg"); }

/*!***************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/timer/timer.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-timer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 5px;
  background: url(/images/uis-cloud.png) no-repeat, #0000AA;
  background-size: 30% 100%;
  color: #fff;
  padding: 20px;
  gap: 20px;
  padding-bottom: 30px; }
  @media (min-width: 661px) {
    .b-timer {
      padding-bottom: 70px; } }
  .b-timer__title {
    font-weight: 500;
    font-size: 21px;
    line-height: 35px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    color: #fff0e6; }
    @media (min-width: 451px) {
      .b-timer__title {
        font-size: 25px; } }
  .b-timer__date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 20px; }
    @media (min-width: 451px) {
      .b-timer__date {
        gap: 30px; } }
    @media (min-width: 661px) {
      .b-timer__date {
        gap: 80px; } }
  .b-timer__number-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  .b-timer__number {
    font-size: 37px;
    line-height: 50px;
    font-weight: 700;
    text-align: center; }
    @media (min-width: 451px) {
      .b-timer__number {
        font-size: 42px; } }
  .b-timer__bottom-text {
    font-size: 13px;
    line-height: 30px;
    font-weight: 400;
    text-align: center; }
    @media (min-width: 451px) {
      .b-timer__bottom-text {
        font-size: 16px; } }

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/title-navigation/title-navigation.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-title-navigation {
  padding: 2rem 0;
  border-top: 1px solid #232323;
  border-bottom: 1px solid #232323; }
  @media (min-width: 661px) {
    .b-title-navigation {
      padding: 2.5rem 0; } }
  .b-title-navigation__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-left: -2rem;
    margin-top: -1.5rem; }
    @media (min-width: 661px) {
      .b-title-navigation__items {
        margin-top: -2rem; } }
  .b-title-navigation__item {
    margin-left: 2rem;
    margin-top: 1.5rem;
    color: #232323;
    font-weight: 400 !important; }
    .b-title-navigation__item:hover {
      color: #00a; }
    @media (min-width: 661px) {
      .b-title-navigation__item {
        margin-top: 2rem; } }

/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/title-with-desc/title-with-desc.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-title-with-desc__title {
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-title-with-desc__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-title-with-desc__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-title-with-desc__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-title-with-desc__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-title-with-desc__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-title-with-desc__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-title-with-desc__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-title-with-desc__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-title-with-desc__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-title-with-desc__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-title-with-desc__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-title-with-desc__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-title-with-desc__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-title-with-desc__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-title-with-desc__title--h1 {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.95rem; }
    @media (min-width: 451px) {
      .b-title-with-desc__title--h1 {
        font-size: 1.75rem;
        line-height: 2.1rem; } }
    @media (min-width: 951px) {
      .b-title-with-desc__title--h1 {
        font-size: 2.1rem;
        line-height: 2.5rem; } }
  .b-title-with-desc__title--h2 {
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 1.8rem; }
    @media (min-width: 451px) {
      .b-title-with-desc__title--h2 {
        font-size: 1.5rem;
        line-height: 1.95rem; } }
    @media (min-width: 951px) {
      .b-title-with-desc__title--h2 {
        font-size: 1.75rem;
        line-height: 2.25rem; } }
  .b-title-with-desc__title--h3 {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.95rem; }
    @media (min-width: 451px) {
      .b-title-with-desc__title--h3 {
        font-size: 1rem;
        line-height: 1.4rem;
        font-weight: 500; } }
    @media (min-width: 951px) {
      .b-title-with-desc__title--h3 {
        font-size: 1.25rem;
        line-height: 1.75rem; } }

.b-title-with-desc__desc {
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-title-with-desc__desc--content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-title-with-desc__desc--content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-title-with-desc__desc--content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-title-with-desc__desc--content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-title-with-desc__desc--content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-title-with-desc__desc--content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-title-with-desc__desc--content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-title-with-desc__desc--content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-title-with-desc__desc--content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-title-with-desc__desc--content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-title-with-desc__desc--content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-title-with-desc__desc--content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-title-with-desc__desc--content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-title-with-desc__desc--content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
  .b-title-with-desc__desc--center {
    text-align: center; }
  .b-title-with-desc__desc--left {
    text-align: left; }
  .b-title-with-desc__desc--right {
    text-align: right; }
  .b-title-with-desc__desc--justify {
    text-align: justify; }

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/two-buttons-info/two-buttons-info.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-two-buttons-info {
  position: relative; }
  @media (max-width: 450px) {
    .b-two-buttons-info {
      width: 100vw !important;
      margin-left: calc((50vw - 50%) * -1) !important;
      margin-right: calc((50vw - 50%) * -1) !important; } }
  .b-two-buttons-info__gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-image: url("/images/blue-gradient-form.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    z-index: 0; }
  .b-two-buttons-info__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1rem;
    width: 100%;
    border-radius: 5px;
    z-index: 1; }
    @media (min-width: 451px) {
      .b-two-buttons-info__content {
        padding-bottom: 2rem;
        padding-top: 2rem; } }
    @media (min-width: 951px) {
      .b-two-buttons-info__content {
        padding-bottom: 2.5rem;
        padding-top: 2.5rem; } }
    .b-two-buttons-info__content.no-paddings {
      padding-top: 0 !important;
      padding-bottom: 0 !important; }
  .b-two-buttons-info__title {
    text-align: center;
    z-index: 2; }
  .b-two-buttons-info__buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
    @media (min-width: 661px) {
      .b-two-buttons-info__buttons {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row; } }
  .b-two-buttons-info__first {
    height: 2.5rem;
    margin-bottom: 1rem; }
    @media (min-width: 661px) {
      .b-two-buttons-info__first {
        margin-right: 1.5rem;
        margin-bottom: 0; } }
  .b-two-buttons-info__second {
    height: 2.5rem; }

/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/two-column/two-column.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-two-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-two-column {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-two-column {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-two-column {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-two-column {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-two-column {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-two-column {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-two-column {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-two-column {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-two-column {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-two-column {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-two-column {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-two-column {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  .b-two-column__title {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center; }
    @media (max-width: 1920px) {
      .b-two-column__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-two-column__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-two-column__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-two-column__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-two-column__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-two-column__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-column__title {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-two-column__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-two-column__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-two-column__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-two-column__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-two-column__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-two-column__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-two-column__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-two-column__grid-cell {
    margin: auto !important; }
    @media (max-width: 1920px) {
      .b-two-column__grid-cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-two-column__grid-cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-two-column__grid-cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-two-column__grid-cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-two-column__grid-cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-two-column__grid-cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-column__grid-cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-two-column__grid-cell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-two-column__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    @media (max-width: 1920px) {
      .b-two-column__container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-column__container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-two-column__container {
        margin-left: -12.5px;
        margin-right: -12.5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-column__container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-two-column__container {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-column__container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-two-column__container {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-column__container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-two-column__container {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-column__container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-two-column__container {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-column__container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
  .b-two-column__col {
    background-color: transparent; }
    @media (max-width: 1920px) {
      .b-two-column__col {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-two-column__col {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-two-column__col {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-two-column__col {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-two-column__col {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-two-column__col {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-column__col {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    .b-two-column__col:first-child {
      display: none; }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-two-column__col {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-two-column__col {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-two-column__col {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-two-column__col {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-two-column__col {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-two-column__col {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-two-column__col {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    @media (min-width: 661px) {
      .b-two-column__col:first-child {
        display: block; } }
  .b-two-column__section {
    padding: 0 8%;
    text-align: center;
    position: relative; }
    .b-two-column__section:first-child {
      border-top: 1px solid transparent;
      background-color: #00a769;
      padding-bottom: 1.5rem; }
    .b-two-column__section:nth-child(2) {
      background-color: #fff;
      min-height: 10rem;
      padding: 1.5rem 8%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -ms-flex-pack: distribute;
          justify-content: space-around;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
    .b-two-column__section:last-child {
      border-top: 1px solid #fff;
      background-color: #00a769;
      padding-bottom: 3rem; }
    .b-two-column__section p {
      margin-bottom: 1rem; }
      .b-two-column__section p:last-child {
        margin-bottom: 0; }
  .b-two-column__sup-title {
    margin-bottom: 1.5rem; }
  .b-two-column__price-container {
    position: relative;
    margin-bottom: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .b-two-column__price {
    margin: auto;
    position: relative; }
  .b-two-column__prompt-layer {
    display: inline-block;
    position: relative; }
  .b-two-column__prompt {
    position: absolute;
    right: -1rem;
    top: -0.8rem; }
    @media (max-width: 950px) {
      .b-two-column__prompt .b-prompt__window {
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%); } }
  .b-two-column__button {
    height: 2rem;
    width: 9.9rem;
    margin: auto; }

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/two-side-info/two-side-info.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-two-side-info__title {
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-two-side-info__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-two-side-info__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-two-side-info__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-two-side-info__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-two-side-info__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-two-side-info__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-two-side-info__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-two-side-info__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-two-side-info__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-two-side-info__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-two-side-info__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-two-side-info__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-two-side-info__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-two-side-info__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-two-side-info__desc {
  text-align: center;
  margin-bottom: 2rem;
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-two-side-info__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-two-side-info__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-two-side-info__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-two-side-info__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-two-side-info__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-two-side-info__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-two-side-info__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-two-side-info__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-two-side-info__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-two-side-info__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-two-side-info__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-two-side-info__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-two-side-info__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-two-side-info__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-two-side-info__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-two-side-info__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-two-side-info__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-two-side-info__content {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-two-side-info__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-two-side-info__content {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-two-side-info__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-two-side-info__content {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-two-side-info__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-two-side-info__content {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-two-side-info__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-two-side-info__content {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-two-side-info__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-two-side-info__side {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-two-side-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-two-side-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-two-side-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-two-side-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-two-side-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-two-side-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-two-side-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-two-side-info__side:first-child {
    margin-bottom: 1.5rem; }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-two-side-info__side {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-two-side-info__side {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-two-side-info__side {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-two-side-info__side {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-two-side-info__side {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-two-side-info__side {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-two-side-info__side {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-two-side-info__side {
      display: block; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-two-side-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-two-side-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-two-side-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-two-side-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-two-side-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-two-side-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-two-side-info__side {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) {
      .b-two-side-info__side:first-child {
        margin-bottom: 0; } }
  .b-two-side-info__side-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    @media (max-width: 1920px) {
      .b-two-side-info__side-content {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-side-info__side-content {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-two-side-info__side-content {
        margin-left: -12.5px;
        margin-right: -12.5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-side-info__side-content {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-two-side-info__side-content {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-side-info__side-content {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-two-side-info__side-content {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-side-info__side-content {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-two-side-info__side-content {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-side-info__side-content {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-two-side-info__side-content {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-side-info__side-content {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (min-width: 951px) {
      .b-two-side-info__side-content {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start; } }
  .b-two-side-info__side-image {
    margin-bottom: 1.5rem; }
    @media (max-width: 1920px) {
      .b-two-side-info__side-image {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-two-side-info__side-image {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-two-side-info__side-image {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-two-side-info__side-image {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-two-side-info__side-image {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-two-side-info__side-image {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-side-info__side-image {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-two-side-info__side-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-two-side-info__side-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-two-side-info__side-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-two-side-info__side-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-two-side-info__side-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-two-side-info__side-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-two-side-info__side-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-two-side-info__side-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(37.5% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-two-side-info__side-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(37.5% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-two-side-info__side-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(37.5% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-two-side-info__side-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(37.5% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-two-side-info__side-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(37.5% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-two-side-info__side-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(37.5% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-two-side-info__side-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(37.5% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    @media (min-width: 951px) {
      .b-two-side-info__side-image {
        margin-bottom: 2rem; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-two-side-info__side-image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-two-side-info__side-image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-two-side-info__side-image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-two-side-info__side-image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-two-side-info__side-image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-two-side-info__side-image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-two-side-info__side-image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 1281px) {
      .b-two-side-info__side-image {
        width: 16rem;
        margin-left: auto;
        margin-right: auto; } }
  @media (max-width: 1920px) {
    .b-two-side-info__side-title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-two-side-info__side-title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-two-side-info__side-title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-two-side-info__side-title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-two-side-info__side-title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-two-side-info__side-title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-two-side-info__side-title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-two-side-info__side-title h3 {
    color: #00a; }
  .b-two-side-info__side-title div.p {
    display: none;
    margin-top: 2rem; }
    @media (min-width: 951px) {
      .b-two-side-info__side-title div.p {
        display: block; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(62.5% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(62.5% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(62.5% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(62.5% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(62.5% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(62.5% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(62.5% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-two-side-info__side-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-two-side-info__side-title h3 {
      text-align: center; } }
  .b-two-side-info__side-announce {
    display: inline-block !important;
    margin: 0 !important;
    margin-top: 1rem !important; }
    @media (max-width: 1920px) {
      .b-two-side-info__side-announce {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-two-side-info__side-announce {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-two-side-info__side-announce {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-two-side-info__side-announce {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-two-side-info__side-announce {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-two-side-info__side-announce {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-side-info__side-announce {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (min-width: 451px) {
      .b-two-side-info__side-announce {
        display: none !important; } }
    @media (min-width: 951px) {
      .b-two-side-info__side-announce {
        display: inline-block !important;
        margin: 0 !important;
        margin-top: 2rem !important;
        width: 100% !important; }
        .b-two-side-info__side-announce.p {
          display: inline-block !important; } }
    @media (min-width: 1281px) {
      .b-two-side-info__side-announce {
        margin: 0 !important;
        margin-top: 2rem !important;
        width: 100% !important;
        padding: 0 1rem; } }
  .b-two-side-info__side-full {
    display: none;
    margin: 0 !important;
    margin-top: 0 !important; }
    @media (max-width: 1920px) {
      .b-two-side-info__side-full {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-two-side-info__side-full {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-two-side-info__side-full {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-two-side-info__side-full {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-two-side-info__side-full {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-two-side-info__side-full {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-two-side-info__side-full {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (min-width: 451px) {
      .b-two-side-info__side-full {
        display: block; } }
    @media (min-width: 951px) {
      .b-two-side-info__side-full.p {
        margin-top: 0 !important;
        display: inline-block !important; } }
    @media (min-width: 1281px) {
      .b-two-side-info__side-full {
        margin: 0 !important;
        width: 100% !important;
        padding: 0 1rem; } }

.b-two-side-info__button {
  width: 7.5rem;
  height: 1.75rem;
  margin-top: 2rem; }
  @media (min-width: 451px) {
    .b-two-side-info__button {
      display: none; } }

/*!***************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/info/video/video.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-video {
  border-radius: 20px;
  text-align: center; }
  @media (min-width: 951px) {
    .b-video__is-content {
      padding-bottom: 3rem; } }
  .b-video video {
    width: 100%;
    height: auto;
    max-height: 100%; }
  .b-video__content {
    padding: 1.5rem 1rem 1rem; }
    @media (min-width: 451px) {
      .b-video__content {
        padding: 1.5rem; } }
    @media (min-width: 661px) {
      .b-video__content {
        padding: 2.5rem 2.5rem 1.5rem; } }
    @media (min-width: 951px) {
      .b-video__content {
        padding: 3rem 3.4rem; } }
    @media (min-width: 1281px) {
      .b-video__content {
        padding: 3rem 4.75rem; } }
  .b-video__pre-title {
    display: inline-block;
    padding: 8px;
    line-height: 1;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: .4rem; }
  .b-video__title {
    font-weight: 400; }
    @media (min-width: 451px) {
      .b-video__title {
        font-weight: 700; } }
  .b-video__youtube, .b-video__video {
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 20px; }
    @media (min-width: 951px) {
      .b-video__youtube, .b-video__video {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 80px);
        margin-left: 40px;
        margin-right: 40px;
        border-radius: 10px; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-video__youtube, .b-video__video {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-video__youtube, .b-video__video {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-video__youtube, .b-video__video {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-video__youtube, .b-video__video {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-video__youtube, .b-video__video {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-video__youtube, .b-video__video {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-video__youtube, .b-video__video {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
  .b-video__video video {
    border-radius: 20px; }
    @media (min-width: 951px) {
      .b-video__video video {
        border-radius: 10px; } }
  .b-video__youtube {
    position: relative;
    padding: 0 0 56.25%;
    height: 0;
    overflow: hidden; }
    @media (min-width: 951px) {
      .b-video__youtube {
        padding: 0 0 47%; } }
    @media (min-width: 1281px) {
      .b-video__youtube {
        padding: 0 0 37.2%; } }
    .b-video__youtube iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
  .b-video__preview {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2; }
    .b-video__preview.active::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #232323;
      opacity: 0.8; }
    .b-video__preview.active .b-video__preview-play {
      display: none; }
    .b-video__preview-play {
      width: 2.5rem;
      height: 2.5rem;
      background-image: url("/images/icons/play.svg");
      background-size: contain;
      background-repeat: no-repeat;
      z-index: 2;
      -webkit-transition: -webkit-transform 0.6s;
      transition: -webkit-transform 0.6s;
      -o-transition: transform 0.6s;
      transition: transform 0.6s;
      transition: transform 0.6s, -webkit-transform 0.6s;
      cursor: pointer; }
      @media (min-width: 951px) {
        .b-video__preview-play {
          width: 5rem;
          height: 5rem; } }
      .b-video__preview-play:hover {
        -webkit-transform: scale(1.2);
                transform: scale(1.2); }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/instrumenty-marketologa/acm/acm.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.acm-h1 {
  text-align: center;
  margin-top: 80px; }

.acm-description {
  font-family: Styrene A LC;
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: center;
  color: #252525;
  max-width: 1100px;
  margin: 80px auto; }
  .acm-description p {
    padding: 10px 0; }

@media (min-width: 900px) {
  .acm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    max-width: 1100px;
    margin: 0 auto; } }

.acm .params {
  display: none; }
  @media (min-width: 900px) {
    .acm .params {
      display: block;
      background-color: #FFFFFF;
      padding: 40px 10px 40px 40px; } }
  .acm .params-head {
    font-family: Styrene A LC;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0em;
    color: #252525;
    margin-bottom: 40px; }
  .acm .params-item {
    height: 49px;
    margin-bottom: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-family: Styrene A LC;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    color: black; }

.acm .variables {
  width: 100vw;
  margin-left: -20px; }
  @media (min-width: 451px) {
    .acm .variables {
      margin-left: -30px; } }
  @media (min-width: 600px) {
    .acm .variables {
      width: 100%;
      margin-left: 0; } }
  @media (min-width: 900px) {
    .acm .variables {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }
  .acm .variables .variable {
    background-color: #FFFFFF;
    padding: 20px;
    margin-bottom: 20px; }
    @media (min-width: 900px) {
      .acm .variables .variable {
        padding: 0;
        padding-top: 40px;
        padding-right: 10px;
        margin-bottom: 0; } }
    @media (min-width: 900px) {
      .acm .variables .variable:last-child {
        padding-right: 40px; } }
  .acm .variables .active i {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  .acm .variables .active .variables-body {
    display: block; }
  .acm .variables-head {
    font-family: Styrene A LC;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0em;
    color: #252525;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    @media (min-width: 900px) {
      .acm .variables-head {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; } }
    .acm .variables-head i {
      width: 30px;
      height: 30px;
      display: inline-block;
      background: url(/academiya/instrumenty-marketologa/advertising_campaign_modeling/img/arrow.svg) 0 0 no-repeat;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg); }
      @media (min-width: 900px) {
        .acm .variables-head i {
          display: none; } }
  .acm .variables-body {
    display: none;
    margin-top: 40px; }
    @media (min-width: 900px) {
      .acm .variables-body {
        display: block; } }
  .acm .variables-item span {
    font-family: Styrene A LC;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    color: #000000;
    display: inline-block;
    margin-bottom: 4px; }
    @media (min-width: 900px) {
      .acm .variables-item span {
        display: none; } }
  .acm .variables-item input {
    border: none;
    border-radius: 28px;
    height: 49px;
    width: 100%;
    background-color: #F4F4F4;
    padding: 12.5px 30px;
    margin-bottom: 16px;
    font-family: Styrene A LC;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    color: #252525; }
  .acm .variables-item input:disabled {
    background-color: #FFF6D5; }

.calc {
  margin-top: 20px; }
  @media (min-width: 900px) {
    .calc {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      margin-top: 40px; } }
  .calc-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    @media (min-width: 900px) {
      .calc-container {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row; } }
    .calc-container .btn_click {
      background-color: #0000aa;
      color: white;
      width: 100%;
      height: 49px; }
      .calc-container .btn_click:hover {
        background-color: #E6F3FF;
        cursor: pointer; }
      .calc-container .btn_click:active {
        background-color: #D6DEF4; }
      @media (min-width: 900px) {
        .calc-container .btn_click {
          width: 160px;
          margin-right: 20px; } }
    .calc-container .btn_clear {
      width: 100%;
      height: 49px;
      background-color: #f4f4f4;
      border: 1px solid #878787;
      color: #878787;
      margin-left: 0;
      margin-right: 32px; }
      .calc-container .btn_clear:hover {
        border: none;
        background-color: #FF454F;
        color: #FFFFFF;
        cursor: pointer; }
        .calc-container .btn_clear:hover i {
          background: url(/academiya/instrumenty-marketologa/utm_generator/img/reset-hover.svg) 0 0 no-repeat; }
      @media (min-width: 900px) {
        .calc-container .btn_clear {
          padding: 0;
          width: 154px;
          margin-right: 40px; } }
      .calc-container .btn_clear i {
        display: inline-block;
        width: 24px;
        height: 25px;
        margin-right: 10px;
        background: url(/academiya/instrumenty-marketologa/utm_generator/img/reset.svg) 0 0 no-repeat; }
  .calc .btn_pdf {
    width: 100%;
    background-color: #0000aa;
    color: white;
    margin-top: 32px; }
    .calc .btn_pdf:hover {
      background-color: #E6F3FF;
      cursor: pointer; }
    .calc .btn_pdf:active {
      background-color: #D6DEF4; }
    @media (min-width: 900px) {
      .calc .btn_pdf {
        width: 217px;
        padding: 0;
        margin: 0; } }
    .calc .btn_pdf i {
      width: 24px;
      height: 24px;
      background: url(/academiya/instrumenty-marketologa/utm_generator/img/save.svg) 0 0 no-repeat;
      margin-right: 10px; }
  .calc-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-radius: 25px;
    border: none;
    font-family: Styrene A LC;
    font-size: 15px;
    font-weight: 700;
    line-height: 29px;
    letter-spacing: 0em; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/instrumenty-marketologa/offer/offer.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.offer {
  width: 100vw;
  margin-left: -20px;
  background-color: #FFFFFF;
  padding: 40px 0;
  text-align: center;
  margin: 160px 0 160px -20px; }
  @media (min-width: 451px) {
    .offer {
      margin-left: -30px; } }
  @media (min-width: 600px) {
    .offer {
      width: 100%;
      margin-left: 0; } }
  @media (min-width: 900px) {
    .offer {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; } }
  .offer-text {
    font-family: Styrene A LC;
    font-size: 25px;
    font-weight: 500;
    line-height: 35px;
    letter-spacing: 0em;
    color: #252525;
    margin-bottom: 35px; }
    @media (min-width: 900px) {
      .offer-text {
        margin-bottom: 0;
        margin-right: 60px; } }
  .offer-link {
    padding: 15px 30px;
    border-radius: 30px;
    background-color: #0000AA;
    color: #FFFFFF;
    font-family: Styrene A LC;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0em; }
    .offer-link:hover {
      background-color: #E6F3FF;
      cursor: pointer;
      text-decoration: none;
      color: #FFFFFF; }
    .offer-link:active {
      background-color: #D6DEF4; }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/instrumenty-marketologa/roi/roi.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.roi-h1 {
  text-align: center;
  margin-top: 80px; }

.roi-description {
  font-family: Styrene A LC;
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
  color: #252525;
  max-width: 1100px;
  margin: 80px auto; }
  .roi-description h2 {
    font-family: Styrene A LC;
    font-size: 35px;
    font-weight: 500;
    line-height: 45px;
    letter-spacing: 0em;
    text-align: center;
    color: #252525;
    margin-bottom: 80px; }
  .roi-description p {
    font-family: Styrene A LC;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    padding: 10px 0; }

.roi {
  width: 100vw;
  margin-left: -20px;
  background-color: #FFFFFF;
  padding: 40px 20px;
  max-width: 1100px; }
  @media (min-width: 451px) {
    .roi {
      margin-left: -30px;
      padding: 40px 30px; } }
  @media (min-width: 600px) {
    .roi {
      width: 100%;
      padding: 40px;
      margin-left: 0; } }
  @media (min-width: 900px) {
    .roi {
      margin: 0 auto; } }
  .roi h2 {
    font-family: Styrene A LC;
    font-size: 35px;
    font-weight: 500;
    line-height: 45px;
    letter-spacing: 0em;
    text-align: center;
    color: #252525;
    margin-bottom: 40px; }
  @media (min-width: 900px) {
    .roi-data {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }
  @media (min-width: 900px) {
    .roi-data__left {
      margin-right: 45px;
      width: 100%; } }
  @media (min-width: 900px) {
    .roi-data__right {
      width: 100%; } }
  .roi-data-item {
    font-family: Styrene A LC;
    font-size: 17px;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: 0em;
    text-align: left;
    color: #252525; }
    .roi-data-item span {
      margin-bottom: 4px;
      display: inline-block; }
    .roi-data-item input {
      width: 100%;
      height: 49px;
      border-radius: 50px;
      background-color: #F4F4F4;
      border: none;
      margin-bottom: 20px; }
      .roi-data-item input:focus {
        border: 1px solid #92D0FF; }
  .roi-calc {
    margin-top: 40px;
    margin-bottom: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row; }
    @media (min-width: 900px) {
      .roi-calc {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; } }
    .roi-calc div {
      border-radius: 25px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      height: 49px;
      width: 100%;
      cursor: pointer; }
      @media (min-width: 900px) {
        .roi-calc div {
          width: 160px; } }
    .roi-calc .roi-reset {
      background-color: #FFFFFF;
      color: #878787;
      border: 1px solid #878787;
      font-family: Styrene A LC;
      font-size: 15px;
      font-weight: 700;
      line-height: 29px;
      letter-spacing: 0em; }
      .roi-calc .roi-reset:hover {
        border: none;
        background-color: #FF454F;
        color: #FFFFFF;
        cursor: pointer; }
        .roi-calc .roi-reset:hover i {
          background: url(/academiya/instrumenty-marketologa/utm_generator/img/reset-hover.svg) 0 0 no-repeat; }
      .roi-calc .roi-reset i {
        display: inline-block;
        width: 24px;
        height: 25px;
        margin-right: 10px;
        background: url(/academiya/instrumenty-marketologa/utm_generator/img/reset.svg) 0 0 no-repeat; }
    .roi-calc .roi-click {
      margin-left: 45px;
      background-color: #0000AA;
      color: #FFFFFF;
      font-family: Styrene A LC;
      font-size: 15px;
      font-weight: 700;
      line-height: 29px;
      letter-spacing: 0em; }
      .roi-calc .roi-click:hover {
        background-color: #E6F3FF;
        cursor: pointer; }
      .roi-calc .roi-click:active {
        background-color: #D6DEF4; }
      @media (min-width: 900px) {
        .roi-calc .roi-click {
          margin-left: 0;
          margin-right: 45px; } }
  @media (min-width: 900px) {
    .roi-result__left {
      margin-right: 45px;
      width: 100%; } }
  @media (min-width: 900px) {
    .roi-result__right {
      margin-bottom: 20px;
      width: 100%; } }
  @media (min-width: 900px) {
    .roi-result {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }
  .roi-result .result {
    margin-bottom: 20px; }
    .roi-result .result-head {
      font-family: Styrene A LC;
      font-size: 17px;
      font-weight: 400;
      line-height: 29px;
      letter-spacing: 0em;
      text-align: left;
      display: inline-block;
      color: #252525;
      margin-bottom: 4px; }
    .roi-result .result-container {
      position: relative; }
    .roi-result .result-name {
      width: 80px;
      height: 49px;
      border-radius: 50px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      background-color: #F4F4F4;
      color: #252525;
      font-family: Styrene A LC;
      font-size: 17px;
      font-weight: 400;
      line-height: 29px;
      letter-spacing: 0em;
      position: absolute;
      top: 0;
      left: 0; }
    .roi-result .result-input {
      width: 100%;
      height: 49px;
      background-color: #FFF6D5;
      border-radius: 50px;
      border: none;
      padding-left: 100px; }
    .roi-result .result-type {
      position: absolute;
      top: 10px;
      right: 20px;
      font-family: Styrene A LC;
      font-size: 20px;
      font-weight: 700;
      line-height: 29px;
      letter-spacing: 0em;
      color: #252525; }
  .roi-download {
    width: 100%;
    height: 49px;
    border-radius: 25px;
    background-color: #0000AA;
    color: #FFFFFF;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-family: Styrene A LC;
    font-size: 15px;
    font-weight: 700;
    line-height: 29px;
    letter-spacing: 0em;
    margin-top: 40px; }
    .roi-download:hover {
      background-color: #E6F3FF !important;
      cursor: pointer; }
    .roi-download:active {
      background-color: #D6DEF4 !important; }
    @media (min-width: 600px) {
      .roi-download {
        width: 217px;
        margin: 0 auto; } }
    .roi-download i {
      width: 24px;
      height: 24px;
      background: url(/academiya/instrumenty-marketologa/utm_generator/img/save.svg) 0 0 no-repeat;
      margin-right: 10px; }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/instrumenty-marketologa/utm/utm.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.utm {
  width: 100vw;
  margin-left: -20px;
  background-color: #FFFFFF;
  padding: 40px 20px; }
  @media (min-width: 451px) {
    .utm {
      margin-left: -30px; } }
  @media (min-width: 600px) {
    .utm {
      width: 100%;
      padding: 40px;
      margin-left: 0; } }
  @media (min-width: 600px) {
    .utm {
      width: 100%;
      padding: 40px;
      margin-left: 0; } }
  @media (min-width: 1281px) {
    .utm {
      max-width: 1100px;
      margin: 0 auto; } }
  .utm .container {
    max-width: 100%; }
  .utm-h1 {
    font-family: Styrene A LC;
    font-size: 42px;
    font-weight: 700;
    line-height: 50px;
    letter-spacing: 0em;
    text-align: center;
    margin: 80px 0 40px 0; }
  .utm-description {
    font-family: Styrene A LC;
    font-size: 17px;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: 0em;
    text-align: center;
    color: #252525;
    margin-bottom: 80px; }
  .utm-h3 {
    margin: 0 !important;
    text-align: center;
    font-family: Styrene A LC;
    font-size: 25px !important;
    font-weight: 500 !important;
    line-height: 35px !important;
    letter-spacing: 0em; }
  .utm-h2 {
    font-family: Styrene A LC;
    font-size: 35px;
    font-weight: 500;
    line-height: 45px;
    letter-spacing: 0em;
    color: #252525;
    text-align: center; }
  .utm .site {
    margin-bottom: 60px; }
    .utm .site .input-group {
      margin-top: 20px; }
    .utm .site-input {
      background: #F4F4F4;
      color: #878787;
      padding: 20px;
      padding-left: 170px;
      border-radius: 100px;
      height: 69px;
      font-size: 17px;
      font-weight: 400;
      line-height: 29px;
      border: none;
      width: 100%; }
    .utm .site .protocol {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 3; }
      .utm .site .protocol-select {
        position: relative; }
        .utm .site .protocol-select.active .protocol-arrow {
          -webkit-transform: rotate(180deg);
                  transform: rotate(180deg); }
        .utm .site .protocol-select.active .protocol-dropdown {
          opacity: 1;
          visibility: visible;
          -webkit-transform: scaleY(1);
                  transform: scaleY(1); }
        .utm .site .protocol-select .protocol-option__active {
          display: none; }
      .utm .site .protocol-button {
        font-family: Styrene A LC;
        font-size: 17px;
        font-weight: 400;
        line-height: 29px;
        letter-spacing: 0em;
        text-align: left;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: 140px;
        height: 49px;
        border-radius: 25px;
        background-color: #0000AA;
        color: #FFFFFF;
        padding: 0 20px; }
        .utm .site .protocol-button:focus {
          background-color: #0000AA; }
        .utm .site .protocol-button:hover {
          background-color: #0000AA; }
      .utm .site .protocol-arrow {
        width: 14px;
        height: 8px;
        background: url(/academiya/instrumenty-marketologa/utm_generator/img/arrow.svg) 0 0 no-repeat; }
      .utm .site .protocol-dropdown {
        position: absolute;
        list-style: none;
        background-color: #0000AA;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        color: #FFFFFF;
        width: 140px;
        -webkit-transition: 0.5s ease;
        -o-transition: 0.5s ease;
        transition: 0.5s ease;
        -webkit-transform: scaleY(0);
                transform: scaleY(0);
        opacity: 0;
        visibility: hidden;
        margin-top: -20px;
        z-index: -1;
        margin-left: 0; }
        .utm .site .protocol-dropdown li {
          position: relative;
          cursor: pointer;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          padding: 20px 0; }
  .utm-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    @media (min-width: 1249px) {
      .utm-container {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap; } }
    .utm-container .source {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: 100%; }
      @media (min-width: 1249px) {
        .utm-container .source {
          -webkit-box-align: start;
              -ms-flex-align: start;
                  align-items: flex-start;
          width: -webkit-fit-content;
          width: -moz-fit-content;
          width: fit-content; } }
      .utm-container .source .list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        margin-top: 20px; }
        @media (min-width: 1249px) {
          .utm-container .source .list {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column; } }
        .utm-container .source .list-item {
          font-family: Styrene A LC;
          font-size: 17px;
          font-weight: 400;
          line-height: 29px;
          letter-spacing: 0em;
          text-align: left;
          margin-bottom: 12px; }
          .utm-container .source .list-item label {
            position: relative;
            margin-bottom: 0; }
          .utm-container .source .list-item input[type=radio] {
            display: none; }
          .utm-container .source .list-item-description {
            margin-left: 30px; }
          .utm-container .source .list-item i:before {
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            position: absolute;
            left: 0;
            top: 5px;
            background: url(/academiya/instrumenty-marketologa/utm_generator/img/radio.svg) 0 0 no-repeat; }
        .utm-container .source .list .form-check.form-check-inline {
          margin-left: 0; }
    .utm-container .params {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: 100%;
      margin-top: 80px; }
      @media (min-width: 1249px) {
        .utm-container .params {
          margin-top: 0;
          width: 685px; } }
      .utm-container .params .required:nth-child(2n) {
        margin-top: 56px; }
      .utm-container .params .required-head {
        text-align: center;
        margin-bottom: 20px; }
      .utm-container .params .required-item {
        margin-bottom: 24px; }
        .utm-container .params .required-item-head {
          font-family: Styrene A LC;
          font-size: 17px;
          font-weight: 400;
          line-height: 29px;
          letter-spacing: 0em;
          text-align: left;
          display: inline-block;
          margin-bottom: 8px; }
        .utm-container .params .required-item .required-group {
          position: relative;
          font-family: Styrene A LC;
          font-size: 17px;
          font-weight: 400;
          line-height: 29px;
          letter-spacing: 0em;
          text-align: left; }
          .utm-container .params .required-item .required-group input {
            border-radius: 50px;
            background-color: #F4F4F4;
            height: 49px;
            border: none;
            padding-left: 250px;
            font-family: Styrene A LC;
            font-size: 17px;
            font-weight: 400;
            line-height: 29px;
            letter-spacing: 0em;
            text-align: left; }
          .utm-container .params .required-item .required-group .required-info {
            padding: 10px 20px;
            background-color: #E6F3FF;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            width: 230px;
            height: 49px;
            border-radius: 50px;
            position: absolute; }
            .utm-container .params .required-item .required-group .required-info__view {
              width: 28px;
              height: 29px;
              background: url(/academiya/instrumenty-marketologa/utm_generator/img/utm-info.svg) 0 0 no-repeat;
              display: inline-block;
              position: relative; }
              .utm-container .params .required-item .required-group .required-info__view:hover {
                cursor: pointer; }
                .utm-container .params .required-item .required-group .required-info__view:hover .modal-utm {
                  display: block; }
          .utm-container .params .required-item .required-group .modal-utm {
            display: none;
            padding: 0 20px;
            border: 1px solid #0000AA;
            border-radius: 5px;
            position: absolute;
            top: 39px;
            right: -75px;
            width: 250px;
            z-index: 3;
            background-color: #ffffff; }
            .utm-container .params .required-item .required-group .modal-utm p {
              font-family: Styrene A LC;
              font-size: 12px;
              font-weight: 400;
              line-height: 17px;
              letter-spacing: 0em; }
            .utm-container .params .required-item .required-group .modal-utm ul li {
              font-family: Styrene A LC;
              font-size: 12px !important;
              font-weight: 400;
              line-height: 17px !important;
              letter-spacing: 0em; }
            @media (min-width: 661px) {
              .utm-container .params .required-item .required-group .modal-utm {
                width: 350px; } }
            @media (min-width: 1281px) {
              .utm-container .params .required-item .required-group .modal-utm {
                width: 400px;
                right: 39px;
                top: 50%; } }
            .utm-container .params .required-item .required-group .modal-utm p {
              margin: 20px 0; }
  .utm .result {
    margin-top: 50px; }
    .utm .result-head {
      text-align: left; }
    .utm .result-container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      position: relative; }
      .utm .result-container .result-input {
        border-radius: 100px;
        border: none;
        padding: 10px 30px;
        height: 49px;
        width: 100%;
        background-color: #F4F4F4;
        color: #252525;
        font-family: Styrene A LC;
        font-size: 17px;
        font-weight: 400;
        line-height: 29px;
        letter-spacing: 0em;
        text-align: left;
        margin-top: 20px; }
      .utm .result-container .result-buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        margin-top: 20px; }
        @media (min-width: 900px) {
          .utm .result-container .result-buttons {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            position: absolute;
            right: 0;
            top: -69px; } }
        .utm .result-container .result-buttons__position {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center; }
        .utm .result-container .result-buttons div {
          width: 100%;
          height: 49px;
          border-radius: 25px;
          font-family: Styrene A LC;
          font-size: 15px;
          font-weight: 700;
          line-height: 29px;
          letter-spacing: 0em;
          text-align: center;
          cursor: pointer; }
          .utm .result-container .result-buttons div:first-child {
            margin-left: 20px; }
            @media (min-width: 900px) {
              .utm .result-container .result-buttons div:first-child {
                margin-left: 0;
                margin-right: 20px; } }
          .utm .result-container .result-buttons div.copied {
            background-color: #0000AA;
            color: #FFFFFF; }
            .utm .result-container .result-buttons div.copied:hover {
              background-color: #E6F3FF;
              cursor: pointer; }
            .utm .result-container .result-buttons div.copied:active {
              background-color: #D6DEF4; }
            @media (min-width: 900px) {
              .utm .result-container .result-buttons div.copied {
                width: 170px; } }
          .utm .result-container .result-buttons div.reset {
            background-color: #FFFFFF;
            color: #878787;
            border: 1px solid #878787; }
            .utm .result-container .result-buttons div.reset:hover {
              border: none;
              background-color: #FF454F;
              color: #FFFFFF;
              cursor: pointer; }
              .utm .result-container .result-buttons div.reset:hover i {
                background: url(/academiya/instrumenty-marketologa/utm_generator/img/reset-hover.svg) 0 0 no-repeat; }
            @media (min-width: 900px) {
              .utm .result-container .result-buttons div.reset {
                width: 154px; } }
            .utm .result-container .result-buttons div.reset i {
              display: inline-block;
              width: 24px;
              height: 25px;
              margin-right: 10px;
              background: url(/academiya/instrumenty-marketologa/utm_generator/img/reset.svg) 0 0 no-repeat; }

.list-item input[type=radio]:checked + i:before {
  background: url(/academiya/instrumenty-marketologa/utm_generator/img/radio-check.svg) 0 0 no-repeat; }

.dynamic-vars {
  max-width: 1100px;
  margin: 0 auto; }
  .dynamic-vars-tabs {
    margin: 80px 0; }
    .dynamic-vars-tabs ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
      .dynamic-vars-tabs ul li {
        list-style: none;
        display: inline-block;
        margin: 0 10px 20px 10px;
        font-family: Styrene A LC;
        font-size: 17px !important;
        font-weight: 400;
        line-height: 29px !important;
        letter-spacing: 0em;
        text-align: left;
        padding: 10px 20px;
        background-color: #E6F3FF;
        border-radius: 25px;
        color: #252525;
        cursor: pointer; }
      .dynamic-vars-tabs ul .active {
        background-color: #0000AA;
        color: #FFFFFF; }
  .dynamic-vars-description {
    font-family: Styrene A LC;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
    color: #252525; }
    .dynamic-vars-description .dynamic-descr {
      display: none; }
      .dynamic-vars-description .dynamic-descr.active {
        display: block; }
    .dynamic-vars-description p {
      margin: 15px 0; }
    .dynamic-vars-description table {
      width: 100%;
      font-family: Styrene A LC;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: 0em;
      text-align: left;
      color: #252525;
      min-width: 100%; }
      .dynamic-vars-description table th {
        font-weight: 700;
        background-color: #F4F4F4;
        padding: 10px 12px;
        border: 1px solid #B9B9B9; }
      .dynamic-vars-description table td {
        padding: 10px 12px;
        border: 1px solid #B9B9B9;
        background-color: #FFFFFF; }
        .dynamic-vars-description table td ul li {
          font-family: Styrene A LC;
          font-size: 14px !important;
          font-weight: 400;
          line-height: 20px !important;
          letter-spacing: 0em;
          color: #252525; }
      .dynamic-vars-description table td:first-child {
        font-weight: 700; }

/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/left-menu/left-menu.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-left-menu {
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: 50; }
  .b-left-menu.active {
    height: 100%; }
  .b-left-menu::after {
    content: '';
    position: absolute;
    display: none;
    pointer-events: none;
    right: 0;
    bottom: 1.5rem;
    width: 100%;
    height: 3.35rem;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(13.33%, rgba(244, 244, 244, 0)), to(#f4f4f4));
    background: -o-linear-gradient(top, rgba(244, 244, 244, 0) 13.33%, #f4f4f4 100%);
    background: linear-gradient(180deg, rgba(244, 244, 244, 0) 13.33%, #f4f4f4 100%); }
  @media (min-width: 451px) {
    .b-left-menu {
      width: auto; }
      .b-left-menu::after {
        display: block; } }
  @media (min-width: 951px) {
    .b-left-menu {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; }
      .b-left-menu::after {
        bottom: 0;
        width: calc(100% - 1rem); } }
  @media (min-width: 1281px) {
    .b-left-menu::after {
      width: calc(100% - 2rem); } }
  .b-left-menu__line {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    position: relative;
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 1rem;
    height: 100vh;
    background-color: #00a;
    cursor: pointer; }
    .b-left-menu__line::before {
      content: '';
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: 15px;
      height: 15px;
      margin-top: 1.25rem;
      pointer-events: none;
      background-image: url("/images/icons/arrow-left-menu.svg");
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      -webkit-transition: -webkit-transform 0.6s;
      transition: -webkit-transform 0.6s;
      -o-transition: transform 0.6s;
      transition: transform 0.6s;
      transition: transform 0.6s, -webkit-transform 0.6s;
      cursor: pointer; }
    .b-left-menu__line.active::before {
      -webkit-transform: rotate(0.5turn);
              transform: rotate(0.5turn); }
    @media (min-width: 951px) {
      .b-left-menu__line {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
    @media (min-width: 1281px) {
      .b-left-menu__line {
        width: 2rem; } }
    .b-left-menu__line-title {
      margin-top: auto;
      color: #fff0e6;
      white-space: nowrap;
      -webkit-transform: rotate(-0.25turn);
              transform: rotate(-0.25turn);
      margin-bottom: 4.5rem; }
  .b-left-menu__content {
    display: none;
    width: 100%;
    position: relative;
    overflow: hidden;
    height: calc(100% - 2.5rem);
    background-color: #fff0e6;
    -webkit-transition: max-width 0.6s, padding 0.6s, height 0.6s;
    -o-transition: max-width 0.6s, padding 0.6s, height 0.6s;
    transition: max-width 0.6s, padding 0.6s, height 0.6s; }
    @media (min-width: 451px) {
      .b-left-menu__content {
        width: auto;
        height: 100%;
        background-color: #fff; } }
    .b-left-menu__content-main {
      width: auto;
      min-height: 100%;
      padding: 0.75rem;
      -webkit-transition: height 0.6s;
      -o-transition: height 0.6s;
      transition: height 0.6s; }
      .b-left-menu__content-main div:last-child {
        margin-bottom: 2.75rem; }
      @media (min-width: 451px) {
        .b-left-menu__content-main {
          width: 8.25rem;
          background-color: #fff; } }
      @media (min-width: 951px) {
        .b-left-menu__content-main {
          padding: 1.5rem;
          width: 25rem; }
          .b-left-menu__content-main div:last-child {
            margin-bottom: 1rem; } }
      @media (min-width: 1281px) {
        .b-left-menu__content-main {
          padding: 2.5rem 1.5rem 2rem; } }
    .b-left-menu__content-title {
      color: #00a; }
      .b-left-menu__content-title:hover {
        color: #00a; }
      @media (min-width: 951px) {
        .b-left-menu__content-title {
          white-space: nowrap; } }
    .b-left-menu__content-line {
      display: block;
      width: 2.5rem;
      height: 0.05rem;
      margin: 1.5rem 0;
      background-color: #232323; }
  .b-left-menu__section {
    margin-top: 0.5rem; }
    .b-left-menu__section:first-child {
      margin-top: 0; }
    .b-left-menu__section:last-child {
      margin-bottom: 2rem !important; }
    .b-left-menu__section-title {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      cursor: pointer; }
      .b-left-menu__section-title:hover {
        color: #00a; }
      .b-left-menu__section-title::after {
        content: '';
        display: block;
        margin-left: auto;
        background-image: url("/images/icons/arrow.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 11px;
        height: 7px;
        -webkit-transition: -webkit-transform 0.2s;
        transition: -webkit-transform 0.2s;
        -o-transition: transform 0.2s;
        transition: transform 0.2s;
        transition: transform 0.2s, -webkit-transform 0.2s; }
      .b-left-menu__section-title.active::after {
        -webkit-transform: rotate(0.5turn);
                transform: rotate(0.5turn); }
  .b-left-menu__items {
    display: none; }
  .b-left-menu__item {
    display: block;
    margin-top: 0.5rem;
    margin-left: 1rem;
    color: #9e9d9d; }
    .b-left-menu__item:hover {
      color: #232323; }
  .b-left-menu__line-mobile {
    position: fixed;
    bottom: 0;
    display: none;
    margin-top: auto;
    width: 8.25rem;
    height: 1.5rem;
    background-color: #00a;
    padding: 0.3rem 1rem 0;
    cursor: pointer;
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s; }
    .b-left-menu__line-mobile:hover {
      opacity: 0.6; }
    @media (min-width: 451px) {
      .b-left-menu__line-mobile {
        display: block; } }
    @media (min-width: 951px) {
      .b-left-menu__line-mobile {
        display: none; } }
    .b-left-menu__line-mobile-title {
      text-align: center;
      white-space: nowrap;
      color: #fff0e6; }
  .b-left-menu__burger {
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 3rem;
    height: 2.5rem;
    bottom: 0;
    background-color: #fff0e6;
    cursor: pointer;
    -webkit-transition: width 0.5s;
    -o-transition: width 0.5s;
    transition: width 0.5s; }
    .b-left-menu__burger::before {
      content: "";
      display: block;
      width: 25px;
      margin-left: 15px;
      height: 18px;
      background-image: url("/images/icons/left-menu-burger.svg");
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat; }
    .b-left-menu__burger.active {
      width: 100%; }
      .b-left-menu__burger.active::before {
        background-image: url("/images/icons/exit.svg"); }
    @media (min-width: 451px) {
      .b-left-menu__burger {
        display: none; } }

/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/advantages-list-border/advantages-list-border.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-advantages-list-border__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -1.5rem !important; }
  @media (max-width: 1920px) {
    .b-advantages-list-border__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-advantages-list-border__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-advantages-list-border__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-advantages-list-border__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-advantages-list-border__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-advantages-list-border__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-advantages-list-border__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-advantages-list-border__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-advantages-list-border__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-advantages-list-border__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-advantages-list-border__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-advantages-list-border__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1281px) {
    .b-advantages-list-border__items {
      margin-top: -2.5rem !important; } }

.b-advantages-list-border__item {
  position: relative;
  padding: 2.5rem 1.5rem;
  border-radius: 1.5rem;
  border: 0.05rem dashed #9e9d9d;
  margin-top: 1.5rem !important; }
  @media (max-width: 1920px) {
    .b-advantages-list-border__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-advantages-list-border__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-advantages-list-border__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-advantages-list-border__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-advantages-list-border__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-advantages-list-border__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-advantages-list-border__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-advantages-list-border__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-advantages-list-border__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-advantages-list-border__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-advantages-list-border__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-advantages-list-border__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-advantages-list-border__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-advantages-list-border__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-advantages-list-border__item {
      margin-top: 2.5rem !important; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-advantages-list-border__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-advantages-list-border__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-advantages-list-border__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-advantages-list-border__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-advantages-list-border__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-advantages-list-border__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-advantages-list-border__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

.b-advantages-list-border__image {
  position: absolute;
  width: 3rem;
  height: 3rem;
  right: -0.5rem;
  top: -0.5rem;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat; }
  @media (min-width: 951px) {
    .b-advantages-list-border__image {
      width: 4rem;
      height: 4rem;
      right: -1rem;
      top: -1rem; } }

.b-advantages-list-border__title {
  color: #00a; }

.b-advantages-list-border__desc {
  margin-top: 0.5rem; }

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/advantages-list-four-elements/advantages-list-four-elements.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-advantages-list-four-elements__main {
  position: relative; }
  .b-advantages-list-four-elements__main--back {
    padding: 45px 0; }

.b-advantages-list-four-elements__back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: -1; }

.b-advantages-list-four-elements__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  @media (max-width: 1920px) {
    .b-advantages-list-four-elements__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-advantages-list-four-elements__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-advantages-list-four-elements__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-advantages-list-four-elements__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-advantages-list-four-elements__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-advantages-list-four-elements__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-advantages-list-four-elements__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-advantages-list-four-elements__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-advantages-list-four-elements__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-advantages-list-four-elements__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-advantages-list-four-elements__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-advantages-list-four-elements__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }

.b-advantages-list-four-elements__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media (max-width: 1920px) {
    .b-advantages-list-four-elements__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-advantages-list-four-elements__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-advantages-list-four-elements__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-advantages-list-four-elements__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-advantages-list-four-elements__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-advantages-list-four-elements__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-advantages-list-four-elements__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 951px) {
    .b-advantages-list-four-elements__item {
      display: block;
      max-width: 19rem;
      text-align: center; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-advantages-list-four-elements__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-advantages-list-four-elements__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-advantages-list-four-elements__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-advantages-list-four-elements__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-advantages-list-four-elements__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-advantages-list-four-elements__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-advantages-list-four-elements__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-advantages-list-four-elements__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-advantages-list-four-elements__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-advantages-list-four-elements__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-advantages-list-four-elements__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-advantages-list-four-elements__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-advantages-list-four-elements__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-advantages-list-four-elements__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }
  .b-advantages-list-four-elements__item--title-mode {
    display: block;
    text-align: center; }
    @media (min-width: 451px) {
      .b-advantages-list-four-elements__item--title-mode {
        max-width: 19rem; } }
  @media (min-width: 451px) and (max-width: 1920px) {
    .b-advantages-list-four-elements__item--title-mode {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 451px) and (max-width: 1280px) {
    .b-advantages-list-four-elements__item--title-mode {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (min-width: 451px) and (max-width: 950px) {
    .b-advantages-list-four-elements__item--title-mode {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (min-width: 451px) and (max-width: 660px) {
    .b-advantages-list-four-elements__item--title-mode {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (min-width: 451px) and (max-width: 450px) {
    .b-advantages-list-four-elements__item--title-mode {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 451px) and (max-width: 320px) {
    .b-advantages-list-four-elements__item--title-mode {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-advantages-list-four-elements__item--title-mode {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-advantages-list-four-elements__item--title-mode {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-advantages-list-four-elements__item--title-mode {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-advantages-list-four-elements__item--title-mode {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-advantages-list-four-elements__item--title-mode {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-advantages-list-four-elements__item--title-mode {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-advantages-list-four-elements__item--title-mode {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-advantages-list-four-elements__item--title-mode {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

.b-advantages-list-four-elements__image {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  max-width: 3.5rem;
  margin-right: 1rem; }
  @media (min-width: 451px) {
    .b-advantages-list-four-elements__image {
      margin-right: 1rem;
      max-width: none; } }
  @media (min-width: 661px) {
    .b-advantages-list-four-elements__image {
      margin-right: 1.5rem; } }
  @media (min-width: 951px) {
    .b-advantages-list-four-elements__image {
      margin-right: 0; } }

.b-advantages-list-four-elements__image-title {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  color: #00a; }
  @media (min-width: 451px) {
    .b-advantages-list-four-elements__image-title {
      margin-right: 1rem; } }
  @media (min-width: 661px) {
    .b-advantages-list-four-elements__image-title {
      margin-right: 1.5rem; } }
  @media (min-width: 951px) {
    .b-advantages-list-four-elements__image-title {
      margin-right: 0; } }

.b-advantages-list-four-elements__title {
  color: #00a; }
  @media (min-width: 951px) {
    .b-advantages-list-four-elements__title {
      margin-top: 2rem; } }

.b-advantages-list-four-elements__desc {
  margin-top: 0.3rem; }

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/advantages-list/advantages-list.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-advantages-list {
  position: relative; }
  .b-advantages-list--back {
    padding: 45px 0; }
  .b-advantages-list__back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: -1; }
    @media (max-width: 1280px) {
      .b-advantages-list__back {
        width: 100vw !important;
        margin-left: calc((50vw - 50%) * -1) !important;
        margin-right: calc((50vw - 50%) * -1) !important; } }
  .b-advantages-list__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: -1.5rem; }
    @media (max-width: 1920px) {
      .b-advantages-list__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-advantages-list__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-advantages-list__items {
        margin-left: -12.5px;
        margin-right: -12.5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-advantages-list__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-advantages-list__items {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-advantages-list__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-advantages-list__items {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-advantages-list__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-advantages-list__items {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-advantages-list__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-advantages-list__items {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-advantages-list__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (min-width: 661px) {
      .b-advantages-list__items {
        margin-bottom: -2rem; } }
  .b-advantages-list__items.special {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .b-advantages-list__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 1.5rem; }
    @media (max-width: 1920px) {
      .b-advantages-list__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 40px; } }
    @media (max-width: 1280px) {
      .b-advantages-list__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 25px; } }
    @media (max-width: 950px) {
      .b-advantages-list__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 30px; } }
    @media (max-width: 660px) {
      .b-advantages-list__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px; } }
    @media (max-width: 450px) {
      .b-advantages-list__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px; } }
    @media (max-width: 320px) {
      .b-advantages-list__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px; } }
    @media (min-width: 1921px) {
      .b-advantages-list__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 40px; } }
    @media (min-width: 451px) {
      .b-advantages-list__item {
        display: block; } }
  @media (min-width: 451px) and (max-width: 1920px) {
    .b-advantages-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 1280px) {
    .b-advantages-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 950px) {
    .b-advantages-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 660px) {
    .b-advantages-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 450px) {
    .b-advantages-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 320px) {
    .b-advantages-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-advantages-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 661px) {
      .b-advantages-list__item {
        margin-bottom: 2rem; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-advantages-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-advantages-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-advantages-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-advantages-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-advantages-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-advantages-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-advantages-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-advantages-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-advantages-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-advantages-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-advantages-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-advantages-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-advantages-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-advantages-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(16.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    .b-advantages-list__item:first-child {
      margin-left: auto !important; }
    .b-advantages-list__item:last-child {
      margin-right: auto !important; }
    .b-advantages-list__item-image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: 6rem;
      height: 4rem;
      margin-right: 1rem;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat; }
      @media (min-width: 451px) {
        .b-advantages-list__item-image {
          margin-bottom: 1rem;
          margin-left: auto;
          margin-right: auto; } }
    .b-advantages-list__item-title {
      color: #00a;
      margin-bottom: 0.5rem; }
      @media (min-width: 451px) {
        .b-advantages-list__item-title {
          text-align: center; } }
    .b-advantages-list__item-text {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
    @media (min-width: 451px) {
      .b-advantages-list__item-desc {
        text-align: center; } }
    @media (min-width: 661px) {
      .b-advantages-list__item-desc {
        text-align: center; } }
  .b-advantages-list__item.special {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.5rem; }
    @media (max-width: 1920px) {
      .b-advantages-list__item.special {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-advantages-list__item.special {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-advantages-list__item.special {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-advantages-list__item.special {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-advantages-list__item.special {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-advantages-list__item.special {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-advantages-list__item.special {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-advantages-list__item.special {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-advantages-list__item.special {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-advantages-list__item.special {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-advantages-list__item.special {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-advantages-list__item.special {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-advantages-list__item.special {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-advantages-list__item.special {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-advantages-list__item.special {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-advantages-list__item.special {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-advantages-list__item.special {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-advantages-list__item.special {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-advantages-list__item.special {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-advantages-list__item.special {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-advantages-list__item.special {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    @media (min-width: 951px) {
      .b-advantages-list__item.special {
        display: block; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-advantages-list__item.special {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-advantages-list__item.special {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-advantages-list__item.special {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-advantages-list__item.special {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-advantages-list__item.special {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-advantages-list__item.special {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-advantages-list__item.special {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 1281px) {
      .b-advantages-list__item.special {
        display: block;
        margin-bottom: 2rem; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-advantages-list__item.special {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-advantages-list__item.special {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-advantages-list__item.special {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-advantages-list__item.special {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-advantages-list__item.special {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-advantages-list__item.special {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-advantages-list__item.special {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    .b-advantages-list__item.special .b-advantages-list__item-image {
      margin-right: 1rem;
      margin-left: 0;
      margin-bottom: 0; }
      @media (min-width: 951px) {
        .b-advantages-list__item.special .b-advantages-list__item-image {
          margin-bottom: 1rem;
          margin-left: auto;
          margin-right: auto; } }
    .b-advantages-list__item.special .b-advantages-list__item-title {
      text-align: start; }
      @media (min-width: 951px) {
        .b-advantages-list__item.special .b-advantages-list__item-title {
          text-align: center; } }
    .b-advantages-list__item.special .b-advantages-list__item-desc {
      text-align: start; }
      @media (min-width: 951px) {
        .b-advantages-list__item.special .b-advantages-list__item-desc {
          text-align: center; } }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/advantages-with-desc/advantages-with-desc.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-advantages-with-desc__main {
  position: relative;
  display: block;
  padding: 2rem 1rem; }
  @media (min-width: 451px) {
    .b-advantages-with-desc__main {
      padding: 3rem 2.25rem; } }
  @media (min-width: 951px) {
    .b-advantages-with-desc__main {
      padding: 4.5rem 3.5rem; } }
  @media (min-width: 1281px) {
    .b-advantages-with-desc__main {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 4rem 3.5rem 4rem 7rem; } }

.b-advantages-with-desc__back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: -1;
  border-radius: 5px; }

.b-advantages-with-desc__left {
  text-align: center; }
  @media (min-width: 1281px) {
    .b-advantages-with-desc__left {
      max-width: 28rem;
      margin-right: 3.5rem;
      text-align: start; } }

.b-advantages-with-desc__desc {
  margin-top: 1.5rem; }

.b-advantages-with-desc__right {
  margin-top: 2.5rem; }
  @media (min-width: 1281px) {
    .b-advantages-with-desc__right {
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
      margin-top: 0; } }

@media (min-width: 661px) {
  .b-advantages-with-desc__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-advantages-with-desc__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-advantages-with-desc__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-advantages-with-desc__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-advantages-with-desc__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-advantages-with-desc__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-advantages-with-desc__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-advantages-with-desc__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-advantages-with-desc__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-advantages-with-desc__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-advantages-with-desc__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-advantages-with-desc__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-advantages-with-desc__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }

.b-advantages-with-desc__item {
  display: block;
  margin-top: 2rem;
  text-align: center; }
  @media (min-width: 451px) {
    .b-advantages-with-desc__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      text-align: start; } }
  @media (min-width: 661px) {
    .b-advantages-with-desc__item {
      display: block;
      text-align: center; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-advantages-with-desc__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-advantages-with-desc__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-advantages-with-desc__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-advantages-with-desc__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-advantages-with-desc__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-advantages-with-desc__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-advantages-with-desc__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  .b-advantages-with-desc__item-image-container {
    display: inline-block;
    max-width: 3.5rem;
    max-height: 3.5rem;
    margin-right: 0; }
    @media (min-width: 451px) {
      .b-advantages-with-desc__item-image-container {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        margin-right: 1.75rem; } }
    @media (min-width: 661px) {
      .b-advantages-with-desc__item-image-container {
        margin-right: 0; } }
    @media (min-width: 951px) {
      .b-advantages-with-desc__item-image-container {
        max-width: 5rem;
        max-height: 5rem; } }
  .b-advantages-with-desc__item-content {
    margin-top: 1.25rem; }
    @media (min-width: 451px) {
      .b-advantages-with-desc__item-content {
        margin-top: 0; } }
    @media (min-width: 661px) {
      .b-advantages-with-desc__item-content {
        margin-top: 1.25rem; } }
  .b-advantages-with-desc__item-title {
    font-weight: 500; }
  .b-advantages-with-desc__item-desc {
    margin-top: 0.5rem; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/card-with-logo/card-with-logo.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-card-with-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-card-with-logo__container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-card-with-logo__container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-card-with-logo__container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-card-with-logo__container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-card-with-logo__container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-card-with-logo__container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-card-with-logo__container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
  .b-card-with-logo__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-top: -1rem !important; }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-card-with-logo__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-card-with-logo__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-card-with-logo__items {
    margin-left: -12.5px;
    margin-right: -12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-card-with-logo__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-card-with-logo__items {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-card-with-logo__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-card-with-logo__items {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-card-with-logo__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-card-with-logo__items {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-card-with-logo__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-card-with-logo__items {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-card-with-logo__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }
  .b-card-with-logo__item {
    text-decoration: none;
    width: 100%;
    padding: 2rem 4rem 1.5rem 1.5rem;
    position: relative;
    margin-top: 1rem !important;
    background-color: #fff; }
    @media (min-width: 661px) {
      .b-card-with-logo__item {
        padding: 2rem 5.25rem 1.5rem 1.5rem; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-card-with-logo__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-card-with-logo__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-card-with-logo__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-card-with-logo__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-card-with-logo__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-card-with-logo__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-card-with-logo__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-card-with-logo__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-card-with-logo__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-card-with-logo__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-card-with-logo__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-card-with-logo__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-card-with-logo__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-card-with-logo__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-card-with-logo__img {
    position: absolute;
    top: 1.25rem;
    right: 1rem; }
  .b-card-with-logo__title {
    font-weight: 700;
    font-size: fs(17);
    line-height: 1.25rem;
    color: #252525;
    margin-bottom: 0.5rem; }
  .b-card-with-logo__desc {
    font-weight: 400;
    color: #252525;
    line-height: 1.05rem; }

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/cards-with-photo/cards-with-photo.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
@media (min-width: 1700px) {
  .b-cards-with-photo__main {
    margin-left: auto !important;
    margin-right: auto !important; } }
  @media (min-width: 1700px) and (max-width: 1920px) {
    .b-cards-with-photo__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 1280px) {
    .b-cards-with-photo__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 950px) {
    .b-cards-with-photo__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 660px) {
    .b-cards-with-photo__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 450px) {
    .b-cards-with-photo__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 320px) {
    .b-cards-with-photo__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1700px) and (min-width: 1921px) {
    .b-cards-with-photo__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }

.b-cards-with-photo__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-cards-with-photo__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-cards-with-photo__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-cards-with-photo__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-cards-with-photo__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-cards-with-photo__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-cards-with-photo__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-cards-with-photo__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-cards-with-photo__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-cards-with-photo__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-cards-with-photo__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-cards-with-photo__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-cards-with-photo__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }

.b-cards-with-photo__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.5rem; }
  @media (max-width: 1920px) {
    .b-cards-with-photo__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-cards-with-photo__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-cards-with-photo__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-cards-with-photo__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-cards-with-photo__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-cards-with-photo__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-cards-with-photo__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 451px) {
    .b-cards-with-photo__item {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-cards-with-photo__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-cards-with-photo__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-cards-with-photo__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-cards-with-photo__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-cards-with-photo__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-cards-with-photo__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-cards-with-photo__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

.b-cards-with-photo__image-container {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-right: 0;
  max-width: 7.5rem;
  max-height: 7.5rem;
  margin-bottom: 0.5rem; }
  @media (min-width: 451px) {
    .b-cards-with-photo__image-container {
      margin-right: 2rem;
      max-width: 5rem;
      max-height: 5rem;
      margin-bottom: 0; } }
  @media (min-width: 951px) {
    .b-cards-with-photo__image-container {
      margin-right: 0.5rem; } }
  @media (min-width: 1281px) {
    .b-cards-with-photo__image-container {
      max-width: 8rem;
      max-height: 8rem;
      margin-right: 2rem; } }
  @media (min-width: 1700px) {
    .b-cards-with-photo__image-container {
      max-width: 10rem;
      max-height: 10rem; } }

.b-cards-with-photo__title {
  margin-bottom: 0.75rem; }

.b-cards-with-photo__desc.h3 {
  font-weight: 400; }

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/categories-list/categories-list.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-categories-list__items {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -2rem;
  margin-top: -1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.b-categories-list__switch {
  text-align: center; }

.b-categories-list__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 2rem;
  margin-top: 1rem;
  height: 3rem;
  padding: 0 2rem;
  font-weight: 400;
  color: #232323;
  background-color: #e1e1e1;
  border-radius: 3rem; }
  .b-categories-list__item--active {
    background-color: #d1deff;
    border: 1px solid #00a !important;
    color: #00a;
    pointer-events: none; }

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/events-tags-list/events-tags-list.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-events-tags-list__items {
  display: none;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (min-width: 451px) {
    .b-events-tags-list__items {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.b-events-tags-list__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: auto;
  padding-left: 0;
  padding-right: 0;
  margin-right: 0.5rem;
  margin-bottom: 0;
  border-radius: 25px;
  cursor: pointer; }
  .b-events-tags-list__item div {
    margin-bottom: 0; }
  .b-events-tags-list__item a {
    position: absolute;
    border: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  @media (min-width: 451px) {
    .b-events-tags-list__item {
      padding-left: 1rem;
      padding-right: 1rem; } }
  @media (min-width: 951px) {
    .b-events-tags-list__item {
      font-size: 0.75rem;
      padding-left: 0;
      padding-right: 0; } }
  .b-events-tags-list__item.active {
    pointer-events: none;
    opacity: 0.6; }

.b-events-tags-list__mobile {
  display: block; }
  @media (min-width: 451px) {
    .b-events-tags-list__mobile {
      display: none; } }
  .b-events-tags-list__mobile-short {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .b-events-tags-list__mobile-full {
    display: none;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .b-events-tags-list__mobile-button {
    position: relative;
    margin: 1rem auto 0 auto;
    width: 10rem;
    height: 1.75rem; }

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/files-list/files-list.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-files-list__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -1.5rem !important; }
  @media (max-width: 1920px) {
    .b-files-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-files-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-files-list__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-files-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-files-list__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-files-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-files-list__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-files-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-files-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-files-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-files-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-files-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 451px) {
    .b-files-list__items {
      margin-top: -1.25rem !important; } }
  @media (min-width: 661px) {
    .b-files-list__items {
      margin-top: -3rem !important; } }

.b-files-list__item {
  margin-top: 1.5rem !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media (max-width: 1920px) {
    .b-files-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-files-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-files-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-files-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-files-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-files-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-files-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 451px) {
    .b-files-list__item {
      margin-top: 1.25rem !important; } }
  @media (min-width: 661px) {
    .b-files-list__item {
      display: block;
      margin-top: 3rem !important; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-files-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-files-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-files-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-files-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-files-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-files-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-files-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-files-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-files-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-files-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-files-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-files-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-files-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-files-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-files-list__title {
  color: #252525;
  padding-left: 1.25rem; }
  @media (min-width: 451px) {
    .b-files-list__title {
      padding-left: 1.5rem; } }
  @media (min-width: 661px) {
    .b-files-list__title {
      padding-left: 0; } }

.b-files-list__image {
  margin-bottom: 0; }
  @media (max-width: 1920px) {
    .b-files-list__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-files-list__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-files-list__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-files-list__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-files-list__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-files-list__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-files-list__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-files-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-files-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-files-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-files-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-files-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-files-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-files-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
  @media (min-width: 661px) {
    .b-files-list__image {
      width: 100%;
      margin-bottom: 1.5rem; } }

.b-files-list__files {
  padding-left: 1.25rem; }
  @media (min-width: 451px) {
    .b-files-list__files {
      padding-left: 1.5rem; } }
  @media (min-width: 661px) {
    .b-files-list__files {
      padding-left: 0; } }

.b-files-list__file {
  display: inline;
  margin-right: 1rem;
  color: #00a;
  font-weight: 700; }
  @media (min-width: 951px) {
    .b-files-list__file {
      margin-right: 1.75rem; } }
  @media (min-width: 1281px) {
    .b-files-list__file {
      margin-right: 1.5rem; } }

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/icons-with-text/icons-with-text.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-icons-with-text__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  @media (max-width: 1920px) {
    .b-icons-with-text__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-icons-with-text__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-icons-with-text__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-icons-with-text__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-icons-with-text__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-icons-with-text__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-icons-with-text__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-icons-with-text__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-icons-with-text__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-icons-with-text__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-icons-with-text__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-icons-with-text__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  .b-icons-with-text__items a {
    -webkit-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
    cursor: pointer; }
    .b-icons-with-text__items a:hover {
      background-color: #e6f3ff; }

.b-icons-with-text__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.5rem;
  overflow: hidden;
  background-color: #fff;
  border-radius: 0.4rem; }
  @media (max-width: 1920px) {
    .b-icons-with-text__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-icons-with-text__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-icons-with-text__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-icons-with-text__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-icons-with-text__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-icons-with-text__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-icons-with-text__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  .b-icons-with-text__item img {
    pointer-events: none; }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-icons-with-text__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-icons-with-text__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-icons-with-text__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-icons-with-text__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-icons-with-text__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-icons-with-text__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-icons-with-text__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }
  @media (min-width: 951px) {
    .b-icons-with-text__item {
      padding: 2.5rem 1.5rem; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-icons-with-text__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-icons-with-text__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-icons-with-text__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-icons-with-text__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-icons-with-text__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-icons-with-text__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-icons-with-text__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

.b-icons-with-text__image {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  pointer-events: none;
  max-width: 320px;
  max-height: 150px; }

.b-icons-with-text__desc {
  margin-left: 1rem;
  color: #232323; }

/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/image-viewer-with-list/image-viewer-with-list.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-image-viewer-with-list__main {
  position: relative; }

.b-image-viewer-with-list__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-image-viewer-with-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-image-viewer-with-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-image-viewer-with-list__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-image-viewer-with-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-image-viewer-with-list__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-image-viewer-with-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-image-viewer-with-list__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-image-viewer-with-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-image-viewer-with-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-image-viewer-with-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-image-viewer-with-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-image-viewer-with-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-image-viewer-with-list__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-viewer-with-list__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-image-viewer-with-list__items {
    margin-left: -12.5px;
    margin-right: -12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-viewer-with-list__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-image-viewer-with-list__items {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-viewer-with-list__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-image-viewer-with-list__items {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-viewer-with-list__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-image-viewer-with-list__items {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-viewer-with-list__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-image-viewer-with-list__items {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-image-viewer-with-list__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

.b-image-viewer-with-list__item {
  margin-bottom: 2rem; }
  @media (max-width: 1920px) {
    .b-image-viewer-with-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-image-viewer-with-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-image-viewer-with-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-image-viewer-with-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-image-viewer-with-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-image-viewer-with-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-image-viewer-with-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-image-viewer-with-list__item:last-child() {
    margin-bottom: 0; }
  @media (min-width: 951px) {
    .b-image-viewer-with-list__item {
      margin-bottom: 0; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-image-viewer-with-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-image-viewer-with-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-image-viewer-with-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-image-viewer-with-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-image-viewer-with-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-image-viewer-with-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-image-viewer-with-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

.b-image-viewer-with-list__image {
  position: relative;
  width: 100%;
  height: 12rem;
  border: 10px solid #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }
  @media (min-width: 451px) {
    .b-image-viewer-with-list__image {
      height: 15rem; } }
  @media (min-width: 951px) {
    .b-image-viewer-with-list__image {
      height: 22rem; } }

.b-image-viewer-with-list__detail {
  position: absolute;
  width: 3rem;
  height: 3rem;
  bottom: 0;
  right: 0;
  background-color: #fff;
  border: none !important; }
  .b-image-viewer-with-list__detail::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    -webkit-mask-image: url("/images/icons/zoom.svg");
            mask-image: url("/images/icons/zoom.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    background-color: #00a;
    -webkit-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s; }
  .b-image-viewer-with-list__detail:hover::before {
    background-color: #9e9d9d; }

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/logos-list/logos-list.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-logos-list__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: -1rem;
  margin-right: -1rem;
  margin-bottom: -1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.b-logos-list__item {
  width: 7rem;
  height: 3rem;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem; }
  .b-logos-list__item div {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/marker-list-shadow/marker-list-shadow.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-marker-list-shadow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  .b-marker-list-shadow__main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative; }
    @media (max-width: 1920px) {
      .b-marker-list-shadow__main {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-marker-list-shadow__main {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-marker-list-shadow__main {
        margin-left: -12.5px;
        margin-right: -12.5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-marker-list-shadow__main {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-marker-list-shadow__main {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-marker-list-shadow__main {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-marker-list-shadow__main {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-marker-list-shadow__main {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-marker-list-shadow__main {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-marker-list-shadow__main {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-marker-list-shadow__main {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-marker-list-shadow__main {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
  .b-marker-list-shadow__list {
    max-width: 40rem;
    margin-left: auto !important;
    margin-right: auto !important; }
    @media (max-width: 1920px) {
      .b-marker-list-shadow__list {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-marker-list-shadow__list {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-marker-list-shadow__list {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-marker-list-shadow__list {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-marker-list-shadow__list {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-marker-list-shadow__list {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-marker-list-shadow__list {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-marker-list-shadow__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-marker-list-shadow__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-marker-list-shadow__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-marker-list-shadow__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-marker-list-shadow__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-marker-list-shadow__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-marker-list-shadow__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-marker-list-shadow__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-marker-list-shadow__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-marker-list-shadow__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-marker-list-shadow__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-marker-list-shadow__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-marker-list-shadow__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-marker-list-shadow__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-marker-list-shadow__background {
    background: -webkit-gradient(linear, left bottom, left top, from(#F4F4F4), to(rgba(244, 244, 244, 0.3)));
    background: -o-linear-gradient(bottom, #F4F4F4 0%, rgba(244, 244, 244, 0.3) 100%);
    background: linear-gradient(0deg, #F4F4F4 0%, rgba(244, 244, 244, 0.3) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px; }
  .b-marker-list-shadow__marker-list {
    width: 100%;
    padding: 0;
    margin: 0;
    margin-left: 1rem; }
    .b-marker-list-shadow__marker-list > li:before, .b-marker-list-shadow__marker-list li:before {
      content: "";
      display: inline-block;
      position: absolute;
      top: 0.3rem;
      left: 0;
      width: 1rem;
      height: 1rem;
      margin-right: 1rem;
      background-image: url(/images/icons/marker.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center; }
  .b-marker-list-shadow__button {
    border: 1px solid #252525;
    border-radius: 7px;
    padding: 4px 10px;
    margin: 40px auto 0px;
    cursor: pointer;
    font-size: 14px;
    line-height: 21px; }

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/marker-list/marker-list.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-marker-list__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media (max-width: 1920px) {
    .b-marker-list__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marker-list__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-marker-list__main {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marker-list__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-marker-list__main {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marker-list__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-marker-list__main {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marker-list__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-marker-list__main {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marker-list__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-marker-list__main {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marker-list__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-marker-list__list {
  max-width: 40rem;
  margin-left: auto !important;
  margin-right: auto !important; }
  @media (max-width: 1920px) {
    .b-marker-list__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-marker-list__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-marker-list__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-marker-list__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-marker-list__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-marker-list__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marker-list__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-marker-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-marker-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-marker-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-marker-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-marker-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-marker-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-marker-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-marker-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-marker-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-marker-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-marker-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-marker-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-marker-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-marker-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/marker-with-image-list/marker-with-image-list.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-marker-with-image-list__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media (max-width: 1920px) {
    .b-marker-with-image-list__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marker-with-image-list__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-marker-with-image-list__content {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marker-with-image-list__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-marker-with-image-list__content {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marker-with-image-list__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-marker-with-image-list__content {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marker-with-image-list__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-marker-with-image-list__content {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marker-with-image-list__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-marker-with-image-list__content {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marker-with-image-list__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-marker-with-image-list__title {
  text-align: center; }
  @media (max-width: 1920px) {
    .b-marker-with-image-list__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-marker-with-image-list__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-marker-with-image-list__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-marker-with-image-list__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-marker-with-image-list__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-marker-with-image-list__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marker-with-image-list__title {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-marker-with-image-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-marker-with-image-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-marker-with-image-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-marker-with-image-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-marker-with-image-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-marker-with-image-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-marker-with-image-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-marker-with-image-list__desc {
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-marker-with-image-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-marker-with-image-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-marker-with-image-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-marker-with-image-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-marker-with-image-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-marker-with-image-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-marker-with-image-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-marker-with-image-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-marker-with-image-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-marker-with-image-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-marker-with-image-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-marker-with-image-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-marker-with-image-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-marker-with-image-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-marker-with-image-list__list {
  max-width: 40rem;
  margin-left: auto !important;
  margin-right: auto !important; }
  @media (max-width: 1920px) {
    .b-marker-with-image-list__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-marker-with-image-list__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-marker-with-image-list__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-marker-with-image-list__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-marker-with-image-list__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-marker-with-image-list__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marker-with-image-list__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-marker-with-image-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-marker-with-image-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-marker-with-image-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-marker-with-image-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-marker-with-image-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-marker-with-image-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-marker-with-image-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-marker-with-image-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-marker-with-image-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-marker-with-image-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-marker-with-image-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-marker-with-image-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-marker-with-image-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-marker-with-image-list__list {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (max-width: 1920px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (max-width: 1280px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (max-width: 950px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (max-width: 660px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (max-width: 450px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (max-width: 320px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1921px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-marker-with-image-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/news-list/news-list.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-news-list__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -4rem !important; }
  @media (max-width: 1920px) {
    .b-news-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-news-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-news-list__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-news-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-news-list__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-news-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-news-list__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-news-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-news-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-news-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-news-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-news-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-news-list__item {
  display: block;
  position: relative;
  margin-top: 4rem !important; }
  @media (max-width: 1920px) {
    .b-news-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-news-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-news-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-news-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-news-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-news-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-news-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 451px) {
    .b-news-list__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  @media (min-width: 951px) {
    .b-news-list__item {
      display: block; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-news-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-news-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-news-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-news-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-news-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-news-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-news-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-news-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-news-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-news-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-news-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-news-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-news-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-news-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-news-list__item:hover .b-news-list__title {
    color: #00a; }

.b-news-list__image {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%;
  max-height: 16rem;
  overflow: hidden; }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-news-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-news-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-news-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-news-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-news-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-news-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-news-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-news-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-news-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-news-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-news-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-news-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-news-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-news-list__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
  @media (min-width: 951px) {
    .b-news-list__image {
      width: 100%; } }

@media (min-width: 451px) {
  .b-news-list__content {
    margin-left: 1.5rem; } }

@media (min-width: 951px) {
  .b-news-list__content {
    margin-left: 0; } }

.b-news-list__date {
  text-align: start;
  margin: 1rem 0 0.5rem;
  color: #9e9d9d; }
  @media (min-width: 451px) {
    .b-news-list__date {
      margin-top: 0; } }
  @media (min-width: 951px) {
    .b-news-list__date {
      margin-top: 1rem;
      text-align: end; } }

.b-news-list__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  font-weight: 700; }

.b-news-list__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  margin-top: 1rem; }

.b-news-list__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2; }

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/numbered-list/numbered-list.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-numbered-list__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -3rem !important;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  @media (max-width: 1920px) {
    .b-numbered-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-numbered-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-numbered-list__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-numbered-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-numbered-list__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-numbered-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-numbered-list__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-numbered-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-numbered-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-numbered-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-numbered-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-numbered-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1700px) {
    .b-numbered-list__items {
      margin-top: -9rem !important; } }

.b-numbered-list__item {
  position: relative;
  padding: 0.75rem;
  border-radius: 1.5rem;
  background-color: #fff;
  text-align: center;
  margin-top: 3rem !important;
  max-width: 36.9rem; }
  @media (max-width: 1920px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-numbered-list__item {
      width: 100vw !important;
      margin-left: calc((50vw - 50%) * -1) !important;
      margin-right: calc((50vw - 50%) * -1) !important; } }
  @media (min-width: 1281px) {
    .b-numbered-list__item {
      max-width: none; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1700px) {
    .b-numbered-list__item {
      margin-top: 9rem !important; } }
  @media (min-width: 1700px) and (max-width: 1920px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 1280px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 950px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 660px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 450px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1700px) and (max-width: 320px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1700px) and (min-width: 1921px) {
    .b-numbered-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

.b-numbered-list__number {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: -1rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 100%;
  font-weight: 400; }

.b-numbered-list__content {
  border: 1px solid #c4c4c4;
  border-radius: 1.5rem;
  padding: 4.5rem 2rem 3rem;
  height: 100%; }

.b-numbered-list__title {
  color: #00a;
  font-weight: 700; }

.b-numbered-list__desc {
  margin-top: 1rem; }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/options-list/options-list.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-options-list__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.b-options-list__title {
  font-weight: 500; }
  .b-options-list__title--main {
    margin: 40px auto; }
    @media (min-width: 580px) {
      .b-options-list__title--main {
        margin: 70px auto; } }
    @media (min-width: 820px) {
      .b-options-list__title--main {
        margin: 60px auto; } }
    @media (min-width: 1150px) {
      .b-options-list__title--main {
        margin: 70px auto; } }
    @media (min-width: 1600px) {
      .b-options-list__title--main {
        margin: 80px auto; } }

.b-options-list__sections {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  z-index: 1; }
  @media (min-width: 1150px) {
    .b-options-list__sections {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-align: stretch;
          -ms-flex-align: stretch;
              align-items: stretch;
      margin-left: -0.5rem; } }
  @media (min-width: 1600px) {
    .b-options-list__sections {
      margin-left: -1.5rem; } }

.b-options-list__section {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
  margin-bottom: 1rem;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  opacity: 1;
  background-color: #d6def4;
  color: #232323;
  border-radius: 5px;
  cursor: pointer; }
  @media (min-width: 1150px) {
    .b-options-list__section {
      margin-left: 0.5rem;
      padding: 0.5rem;
      margin-bottom: 0;
      text-align: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto; } }
  @media (min-width: 1600px) {
    .b-options-list__section {
      margin-left: 1.5rem; } }
  .b-options-list__section:hover {
    opacity: 0.6; }
  .b-options-list__section.active {
    background-color: #fff;
    color: #00a;
    pointer-events: none; }
    .b-options-list__section.active::before {
      display: block; }
  .b-options-list__section.disabled {
    display: none !important; }
  .b-options-list__section::before {
    content: '';
    position: absolute;
    display: none;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    width: calc(100% - 2rem);
    height: 0.05rem;
    margin: auto;
    background-color: #00a; }
    @media (min-width: 1150px) {
      .b-options-list__section::before {
        width: 80%; } }

.b-options-list__items {
  position: relative;
  top: -0.05rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 2.5rem 0; }
  @media (max-width: 1920px) {
    .b-options-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-options-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-options-list__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-options-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-options-list__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-options-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-options-list__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-options-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-options-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-options-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-options-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-options-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }

.b-options-list__back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #fff; }

.b-options-list__item {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  min-height: 16rem;
  border-radius: 5px;
  padding: 1.5rem 1rem; }
  @media (max-width: 1920px) {
    .b-options-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-options-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-options-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-options-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-options-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-options-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-options-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1000px) and (max-width: 1920px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1000px) and (max-width: 1280px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 1000px) and (max-width: 950px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 1000px) and (max-width: 660px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 1000px) and (max-width: 450px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1000px) and (max-width: 320px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1000px) and (min-width: 1921px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1150px) and (max-width: 1920px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1150px) and (max-width: 1280px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 1150px) and (max-width: 950px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 1150px) and (max-width: 660px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 1150px) and (max-width: 450px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1150px) and (max-width: 320px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1150px) and (min-width: 1921px) {
  .b-options-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }
  .b-options-list__item.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .b-options-list__item.disabled {
    display: none !important; }
  .b-options-list__item-help {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    margin-left: 0.5rem;
    background-image: url("/images/b-options-list/question.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer; }
    .b-options-list__item-help:hover .b-options-list__item-help-desc {
      opacity: 1; }
    .b-options-list__item-help-desc {
      position: absolute;
      width: 200px;
      background-color: #e3e3ff;
      padding: 0.5rem;
      border-radius: 10px;
      font-weight: 400;
      z-index: 20;
      left: 0;
      top: 100%;
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
      opacity: 0;
      pointer-events: none;
      -webkit-transition: opacity 0.2s linear;
      -o-transition: opacity 0.2s linear;
      transition: opacity 0.2s linear; }
  .b-options-list__item-tag {
    position: absolute;
    top: 0;
    left: 0.75rem;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    padding: 0 1rem 0.2rem;
    color: #fff0e6;
    border-radius: 0.6rem; }
  .b-options-list__item-image-container {
    position: absolute;
    max-width: 15rem;
    left: 0;
    bottom: 0; }
  .b-options-list__item-image {
    -o-object-fit: contain;
       object-fit: contain; }
  .b-options-list__item-title {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 2rem; }
  .b-options-list__item-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse; }
    @media (min-width: 1700px) {
      .b-options-list__item-container {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row; } }
  .b-options-list__item-more {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 1.5rem;
    margin-top: 1rem;
    border-radius: 0.25rem; }
    @media (min-width: 1700px) {
      .b-options-list__item-more {
        margin-top: auto; } }
  @media (min-width: 1700px) {
    .b-options-list__item-info {
      margin-left: auto; } }
  .b-options-list__item-price {
    position: relative;
    font-weight: 700;
    margin-bottom: 0.5rem; }
  .b-options-list__item-basket {
    display: none;
    height: 1.5rem; }
    .b-options-list__item-basket.active {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    .b-options-list__item-basket .b-button__content {
      border-radius: 0.25rem; }
  .b-options-list__item-success {
    display: none;
    height: 1.5rem; }
    .b-options-list__item-success.active {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    .b-options-list__item-success .b-button__content {
      border-radius: 0.25rem; }

/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/persons-list-with-desc/persons-list-with-desc.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-persons-list-with-desc {
  position: relative; }
  .b-persons-list-with-desc__back {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #fff; }
    @media (max-width: 950px) {
      .b-persons-list-with-desc__back {
        width: 100vw !important;
        margin-left: calc((50vw - 50%) * -1) !important;
        margin-right: calc((50vw - 50%) * -1) !important; } }
  .b-persons-list-with-desc__main {
    position: relative;
    padding: 2rem 0;
    z-index: 1; }
    @media (min-width: 451px) {
      .b-persons-list-with-desc__main {
        padding: 2.5rem 0; } }
    @media (min-width: 661px) {
      .b-persons-list-with-desc__main {
        padding: 3rem 0; } }
    @media (min-width: 951px) {
      .b-persons-list-with-desc__main {
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 3.5rem 0; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-persons-list-with-desc__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-persons-list-with-desc__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-persons-list-with-desc__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-persons-list-with-desc__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-persons-list-with-desc__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-persons-list-with-desc__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-persons-list-with-desc__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
    @media (min-width: 1281px) {
      .b-persons-list-with-desc__main {
        padding: 4rem 0; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-persons-list-with-desc__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-persons-list-with-desc__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-persons-list-with-desc__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-persons-list-with-desc__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-persons-list-with-desc__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-persons-list-with-desc__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-persons-list-with-desc__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-persons-list-with-desc__container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-persons-list-with-desc__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-persons-list-with-desc__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-persons-list-with-desc__container {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-persons-list-with-desc__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-persons-list-with-desc__container {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-persons-list-with-desc__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-persons-list-with-desc__container {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-persons-list-with-desc__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-persons-list-with-desc__container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-persons-list-with-desc__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-persons-list-with-desc__container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-persons-list-with-desc__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-persons-list-with-desc__info {
      margin-top: 0 !important; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-persons-list-with-desc__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(40% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-persons-list-with-desc__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(40% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-persons-list-with-desc__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(40% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-persons-list-with-desc__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(40% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-persons-list-with-desc__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(40% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-persons-list-with-desc__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(40% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-persons-list-with-desc__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(40% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-persons-list-with-desc__title {
    display: none; }
    @media (min-width: 1281px) {
      .b-persons-list-with-desc__title {
        display: block; } }
  .b-persons-list-with-desc__title-mobile {
    display: block;
    text-align: center; }
    @media (min-width: 1281px) {
      .b-persons-list-with-desc__title-mobile {
        display: none; } }
  @media (min-width: 1281px) {
    .b-persons-list-with-desc__content::before {
      content: '';
      display: block;
      width: 5rem;
      height: 1px;
      background-color: #232323;
      margin-top: 1.25rem;
      margin-bottom: 1.75rem; } }
  @media (min-width: 1281px) {
    .b-persons-list-with-desc__items {
      margin-top: 0 !important;
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-persons-list-with-desc__items {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(60% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-persons-list-with-desc__items {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(60% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-persons-list-with-desc__items {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(60% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-persons-list-with-desc__items {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(60% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-persons-list-with-desc__items {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(60% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-persons-list-with-desc__items {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(60% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-persons-list-with-desc__items {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(60% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-persons-list-with-desc__items-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    @media (max-width: 1920px) {
      .b-persons-list-with-desc__items-container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (min-width: 1921px) {
      .b-persons-list-with-desc__items-container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (max-width: 1280px) {
      .b-persons-list-with-desc__items-container {
        margin-left: -12.5px;
        margin-right: -12.5px;
        margin-top: -25px; } }
    @media (min-width: 1921px) {
      .b-persons-list-with-desc__items-container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (max-width: 950px) {
      .b-persons-list-with-desc__items-container {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -30px; } }
    @media (min-width: 1921px) {
      .b-persons-list-with-desc__items-container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (max-width: 660px) {
      .b-persons-list-with-desc__items-container {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: -20px; } }
    @media (min-width: 1921px) {
      .b-persons-list-with-desc__items-container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (max-width: 450px) {
      .b-persons-list-with-desc__items-container {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: -10px; } }
    @media (min-width: 1921px) {
      .b-persons-list-with-desc__items-container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (max-width: 320px) {
      .b-persons-list-with-desc__items-container {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: -10px; } }
    @media (min-width: 1921px) {
      .b-persons-list-with-desc__items-container {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
  .b-persons-list-with-desc__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    @media (max-width: 1920px) {
      .b-persons-list-with-desc__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 40px; } }
    @media (max-width: 1280px) {
      .b-persons-list-with-desc__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 25px; } }
    @media (max-width: 950px) {
      .b-persons-list-with-desc__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 30px; } }
    @media (max-width: 660px) {
      .b-persons-list-with-desc__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px; } }
    @media (max-width: 450px) {
      .b-persons-list-with-desc__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px; } }
    @media (max-width: 320px) {
      .b-persons-list-with-desc__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px; } }
    @media (min-width: 1921px) {
      .b-persons-list-with-desc__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 40px; } }
    @media (max-width: 450px) {
      .b-persons-list-with-desc__item {
        margin-top: 1.5rem !important; }
        .b-persons-list-with-desc__item:first-child {
          margin-top: 0 !important; } }
    @media (min-width: 451px) {
      .b-persons-list-with-desc__item {
        display: block;
        text-align: center; } }
  @media (min-width: 451px) and (max-width: 1920px) {
    .b-persons-list-with-desc__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 451px) and (max-width: 1280px) {
    .b-persons-list-with-desc__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (min-width: 451px) and (max-width: 950px) {
    .b-persons-list-with-desc__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (min-width: 451px) and (max-width: 660px) {
    .b-persons-list-with-desc__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (min-width: 451px) and (max-width: 450px) {
    .b-persons-list-with-desc__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 451px) and (max-width: 320px) {
    .b-persons-list-with-desc__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-persons-list-with-desc__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
    @media (max-width: 450px) {
      .b-persons-list-with-desc__item-image {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        max-width: 5.5rem;
        margin-right: 1rem; } }
    .b-persons-list-with-desc__item-title {
      color: #00a; }
      @media (min-width: 451px) {
        .b-persons-list-with-desc__item-title {
          margin-top: 2rem; } }
    .b-persons-list-with-desc__item-desc {
      margin-top: 0.25rem; }
      @media (min-width: 451px) {
        .b-persons-list-with-desc__item-desc {
          margin-top: 0.5rem; } }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/persons-list/persons-list.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-persons-list__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-persons-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-persons-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-persons-list__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-persons-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-persons-list__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-persons-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-persons-list__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-persons-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-persons-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-persons-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-persons-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-persons-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  .b-persons-list__items.last-margin .b-persons-list__item:last-child {
    margin-right: auto !important; }

.b-persons-list__item {
  text-align: center; }
  @media (max-width: 1920px) {
    .b-persons-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-persons-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-persons-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-persons-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-persons-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-persons-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-persons-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-persons-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-persons-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-persons-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-persons-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-persons-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-persons-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-persons-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-persons-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-persons-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-persons-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-persons-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-persons-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-persons-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-persons-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

.b-persons-list__name {
  margin-top: 1.25rem;
  color: #00a; }

.b-persons-list__position {
  margin-top: 0.25rem; }

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/products-gallery/products-gallery.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-products-gallery__main {
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-products-gallery__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-products-gallery__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-products-gallery__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-products-gallery__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-products-gallery__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-products-gallery__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-products-gallery__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-products-gallery__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-products-gallery__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-products-gallery__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-products-gallery__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-products-gallery__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-products-gallery__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-products-gallery__main {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 580px) {
  .b-products-gallery__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 27rem; } }

.b-products-gallery__left {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: -0.5rem; }
  @media (min-width: 580px) {
    .b-products-gallery__left {
      display: block;
      width: 7rem;
      margin-right: 1rem;
      margin-top: -1rem; } }
  @media (min-width: 661px) {
    .b-products-gallery__left {
      width: 10rem; } }
  @media (min-width: 951px) {
    .b-products-gallery__left {
      width: 12rem;
      margin-right: 2rem; } }

.b-products-gallery__image-container {
  width: 100%;
  height: 2.5rem;
  margin-right: 0.5rem;
  background-color: #fff;
  border-radius: 0.25rem;
  cursor: pointer; }
  @media (min-width: 451px) {
    .b-products-gallery__image-container {
      height: 5rem;
      padding: 1rem 1.5rem; } }
  @media (min-width: 580px) {
    .b-products-gallery__image-container {
      height: calc((100% / 3) - 20px);
      margin-top: 1rem;
      margin-right: 0; } }
  .b-products-gallery__image-container.active {
    border: 1px solid #00a;
    pointer-events: none; }

.b-products-gallery__image {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center; }

.b-products-gallery__right {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  background-color: #fff;
  padding: 2rem;
  border-radius: 0.25rem; }

.b-products-gallery__detail-view {
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("/images/icons/search.svg");
          mask-image: url("/images/icons/search.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: #9d9d9d;
  z-index: 1;
  cursor: pointer; }
  .b-products-gallery__detail-view:hover {
    opacity: 0.6; }

.b-products-gallery__image-main-container {
  width: 100%;
  height: 10rem; }
  @media (min-width: 580px) {
    .b-products-gallery__image-main-container {
      height: 14rem; } }
  @media (min-width: 1281px) {
    .b-products-gallery__image-main-container {
      height: 19rem; } }

.b-products-gallery__image-main {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center; }

.b-products-gallery__basket {
  margin-top: 2rem;
  display: block; }
  @media (min-width: 1281px) {
    .b-products-gallery__basket {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; } }
  .b-products-gallery__basket-count {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-right: auto; }
  .b-products-gallery__basket-label {
    margin-right: 1rem; }
  .b-products-gallery__basket-minus {
    color: #979797;
    cursor: pointer; }
  .b-products-gallery__basket-value {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0 0.5rem;
    border-radius: 21px;
    height: 2rem;
    max-width: 3rem;
    background-color: #f4f4f4;
    outline: none;
    border: none; }
  .b-products-gallery__basket-plus {
    color: #979797;
    cursor: pointer; }
  .b-products-gallery__basket-price {
    margin-right: 1.5rem; }
  .b-products-gallery__basket-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 1.5rem;
    margin-top: 1rem; }
    @media (min-width: 451px) {
      .b-products-gallery__basket-button {
        height: 2.5rem; } }
    @media (min-width: 1281px) {
      .b-products-gallery__basket-button {
        margin-top: 0; } }

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/products-list/products-list.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-products-list__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-products-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-products-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-products-list__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-products-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-products-list__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-products-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-products-list__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-products-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-products-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-products-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-products-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-products-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }

.b-products-list__item {
  background-color: #fff;
  border-radius: 0.25rem; }
  @media (max-width: 1920px) {
    .b-products-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-products-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-products-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-products-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-products-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-products-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-products-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

@media (min-width: 580px) and (max-width: 1920px) {
  .b-products-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 580px) and (max-width: 1280px) {
  .b-products-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 580px) and (max-width: 950px) {
  .b-products-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 580px) and (max-width: 660px) {
  .b-products-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 580px) and (max-width: 450px) {
  .b-products-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 580px) and (max-width: 320px) {
  .b-products-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 580px) and (min-width: 1921px) {
  .b-products-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1500px) and (max-width: 1920px) {
  .b-products-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1500px) and (max-width: 1280px) {
  .b-products-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 1500px) and (max-width: 950px) {
  .b-products-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 1500px) and (max-width: 660px) {
  .b-products-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 1500px) and (max-width: 450px) {
  .b-products-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1500px) and (max-width: 320px) {
  .b-products-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1500px) and (min-width: 1921px) {
  .b-products-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/question-cards/question-cards.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-question-cards__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  @media (max-width: 1920px) {
    .b-question-cards__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-question-cards__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-question-cards__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-question-cards__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-question-cards__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-question-cards__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-question-cards__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-question-cards__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-question-cards__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-question-cards__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-question-cards__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-question-cards__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }

.b-question-cards__item-container {
  background-color: #fff;
  min-height: 18rem;
  border-radius: 1.5rem;
  padding: 0.75rem; }
  @media (max-width: 1920px) {
    .b-question-cards__item-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-question-cards__item-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-question-cards__item-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-question-cards__item-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-question-cards__item-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-question-cards__item-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-question-cards__item-container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-question-cards__item-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-question-cards__item-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-question-cards__item-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-question-cards__item-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-question-cards__item-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-question-cards__item-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-question-cards__item-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-question-cards__item-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-question-cards__item-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-question-cards__item-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-question-cards__item-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-question-cards__item-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-question-cards__item-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-question-cards__item-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

.b-question-cards__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2rem;
  border-radius: 1.5rem;
  border: 1px solid #9e9d9d;
  height: 100%;
  outline: none; }
  .b-question-cards__item.active .b-question-cards__title,
  .b-question-cards__item.active .b-question-cards__desc {
    opacity: 0; }
  .b-question-cards__item.active .b-question-cards__desc-detail {
    opacity: 1; }
  .b-question-cards__item.active .b-question-cards__icon {
    color: #00a;
    border-color: #00a; }

.b-question-cards__icon {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 100%;
  color: #9e9d9d;
  border: 1px solid #9e9d9d;
  right: 0.5rem;
  top: 0.5rem;
  cursor: pointer; }
  .b-question-cards__icon:hover {
    color: #00a;
    border-color: #00a; }

.b-question-cards__annonce {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit; }

.b-question-cards__title {
  color: #00a;
  font-weight: 700; }

.b-question-cards__desc {
  font-weight: 500; }

.b-question-cards__desc-detail {
  opacity: 0; }

.b-question-cards__title, .b-question-cards__desc, .b-question-cards__desc-detail {
  -webkit-transition: opacity 0.1s linear;
  -o-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear;
  text-align: center; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/questions-list/questions-list.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-questions-list__title {
  text-align: center;
  margin-bottom: 2rem; }
  @media (min-width: 451px) {
    .b-questions-list__title {
      margin-bottom: 3rem; } }
  @media (min-width: 951px) {
    .b-questions-list__title {
      margin-bottom: 4rem; } }

.b-questions-list__item {
  padding: 1rem;
  background-color: #fff;
  margin-bottom: 0.5rem; }
  @media (min-width: 451px) {
    .b-questions-list__item {
      padding: 1.5rem; } }
  @media (min-width: 951px) {
    .b-questions-list__item {
      padding: 1.5rem 3.5rem 1.5rem 1.5rem; } }
  .b-questions-list__item-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-weight: 500;
    color: #00a;
    margin-bottom: 0;
    cursor: pointer; }
    .b-questions-list__item-title::after {
      content: "";
      display: block;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      margin-left: auto;
      width: 1rem;
      height: 0.5rem;
      background-image: url("/images/icons/arrow.svg");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      -webkit-transform: rotate(0.5turn);
              transform: rotate(0.5turn); }
      @media (min-width: 451px) {
        .b-questions-list__item-title::after {
          width: 1.25rem;
          height: 0.75rem; } }
      @media (min-width: 951px) {
        .b-questions-list__item-title::after {
          width: 2rem;
          height: 1rem; } }
    .b-questions-list__item-title.active::after {
      -webkit-transform: rotate(0turn);
              transform: rotate(0turn); }
  .b-questions-list__item-desc {
    display: none;
    margin-top: 20px;
    max-width: 63rem;
    font-size: 0.75rem;
    line-height: 1.25rem; }
    @media (min-width: 661px) {
      .b-questions-list__item-desc {
        padding-right: 5rem; } }
    @media (min-width: 951px) {
      .b-questions-list__item-desc {
        font-size: 0.85rem;
        line-height: 1.45rem;
        margin-top: 1.5rem;
        padding-right: 0; } }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/sources-list/sources-list.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-sources-list__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-sources-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-sources-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-sources-list__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-sources-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-sources-list__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-sources-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-sources-list__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-sources-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-sources-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-sources-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-sources-list__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-sources-list__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  .b-sources-list__items a {
    -webkit-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
    cursor: pointer; }
    .b-sources-list__items a:hover {
      background-color: #e6f3ff; }

.b-sources-list__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem;
  height: 220px;
  overflow: hidden;
  background-color: #fff; }
  @media (max-width: 1920px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  .b-sources-list__item img {
    pointer-events: none; }
  @media (min-width: 451px) {
    .b-sources-list__item {
      height: 155px; } }
  @media (min-width: 451px) and (max-width: 1920px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 451px) and (max-width: 1280px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (min-width: 451px) and (max-width: 950px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (min-width: 451px) and (max-width: 660px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (min-width: 451px) and (max-width: 450px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 451px) and (max-width: 320px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 661px) {
    .b-sources-list__item {
      height: 220px; } }
  @media (min-width: 951px) {
    .b-sources-list__item {
      height: 193px; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 1281px) {
    .b-sources-list__item {
      height: 280px; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-sources-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

.b-sources-list__image {
  pointer-events: none;
  max-width: 320px;
  max-height: 150px; }

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/steps-list/steps-list.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-steps-list__title--h1 {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.95rem; }
  @media (min-width: 451px) {
    .b-steps-list__title--h1 {
      font-size: 1.75rem;
      line-height: 2.1rem; } }
  @media (min-width: 951px) {
    .b-steps-list__title--h1 {
      font-size: 2.1rem;
      line-height: 2.5rem; } }

.b-steps-list__title--h2 {
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.8rem; }
  @media (min-width: 451px) {
    .b-steps-list__title--h2 {
      font-size: 1.5rem;
      line-height: 1.95rem; } }
  @media (min-width: 951px) {
    .b-steps-list__title--h2 {
      font-size: 1.75rem;
      line-height: 2.25rem; } }

.b-steps-list__title--h3 {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.95rem; }
  @media (min-width: 451px) {
    .b-steps-list__title--h3 {
      font-size: 1rem;
      line-height: 1.4rem;
      font-weight: 500; } }
  @media (min-width: 951px) {
    .b-steps-list__title--h3 {
      font-size: 1.25rem;
      line-height: 1.75rem; } }

.b-steps-list__item--type_column .b-steps-list__item-title {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.b-steps-list__item--type_column .b-steps-list__item-number {
  margin-right: 0;
  margin-bottom: 0.5rem; }

.b-steps-list__item-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media (min-width: 451px) {
    .b-steps-list__item-title {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

.b-steps-list__item-number {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background-color: #00a;
  color: #fff0e6;
  border-radius: 2.5rem;
  margin-bottom: 0.5rem; }
  @media (min-width: 451px) {
    .b-steps-list__item-number {
      margin-right: 1rem;
      margin-bottom: 0; } }

.b-steps-list__item-content {
  margin-top: 1rem; }

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/tabs-count/tabs-count.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-tabs-count__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-size: 18px; }

.b-tabs-count__item {
  background-color: #e1e1e1;
  border: 1px solid #e1e1e1;
  color: #232323;
  cursor: pointer;
  padding: 10px 30px;
  border-radius: 100px;
  margin: 0 20px 20px 0; }
  .b-tabs-count__item:hover {
    opacity: .75; }
  .b-tabs-count__item--active {
    color: #00a;
    background-color: #e1efff;
    border-color: #00a; }

.b-tabs-count__line {
  color: #9e9d9d;
  margin: 0 1rem;
  display: none; }

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/tags-list/tags-list.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-tags-list__items {
  display: none;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  @media (min-width: 451px) {
    .b-tags-list__items {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.b-tags-list__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-right: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 25px;
  font-weight: 700;
  cursor: pointer; }
  .b-tags-list__item div {
    margin-bottom: 0; }
  .b-tags-list__item a {
    position: absolute;
    border: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  @media (min-width: 451px) {
    .b-tags-list__item {
      padding-left: 1rem;
      padding-right: 1rem; } }
  @media (min-width: 951px) {
    .b-tags-list__item {
      font-size: 0.75rem;
      padding-left: 1.75rem;
      padding-right: 1.75rem; } }
  .b-tags-list__item.active {
    pointer-events: none;
    opacity: 0.6; }

.b-tags-list__mobile {
  display: block; }
  @media (min-width: 451px) {
    .b-tags-list__mobile {
      display: none; } }
  .b-tags-list__mobile-short {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .b-tags-list__mobile-full {
    display: none;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .b-tags-list__mobile-button {
    position: relative;
    margin: 0 auto;
    width: 10rem;
    height: 1.75rem; }

/*!*********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/swiper/swiper-bundle.css ***!
  \*********************************************************************************************************************/
/**
 * Swiper 6.8.4
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2021 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: August 23, 2021
 */

@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-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}
.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-container-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-container-pointer-events {
  touch-action: pan-y;
}
.swiper-container-pointer-events.swiper-container-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
/* 3D Effects */
.swiper-container-3d {
  perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* CSS Mode */
.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 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:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: 'next';
}
.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {
  --swiper-navigation-color: #ffffff;
}
.swiper-button-prev.swiper-button-black,
.swiper-button-next.swiper-button-black {
  --swiper-navigation-color: #000000;
}
.swiper-button-lock {
  display: none;
}
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  */
}
.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;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  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: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #000;
  opacity: 0.2;
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
          appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform, 200ms top;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms left;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right;
}
/* Progress */
.swiper-pagination-progressbar {
  background: 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-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-white {
  --swiper-pagination-color: #ffffff;
}
.swiper-pagination-black {
  --swiper-pagination-color: #000000;
}
.swiper-pagination-lock {
  display: none;
}
/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.swiper-slide-zoomed {
  cursor: move;
}
/* Preloader */
:root {
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  */
}
.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%;
  animation: swiper-preloader-spin 1s infinite linear;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}
/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube {
  overflow: visible;
}
.swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}
.swiper-container-cube .swiper-cube-shadow:before {
  content: '';
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}
.swiper-container-flip {
  overflow: visible;
}
.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
}
.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/component/swiper/swiper.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.swiper-container {
  -ms-touch-action: manipulation;
      touch-action: manipulation; }

.swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  background-color: transparent;
  border: 1px solid #232323;
  opacity: 1; }

.swiper-pagination-bullet-active {
  background-color: #232323;
  border: none; }

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled,
.swiper-button-disabled {
  display: none; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/tariffs-detail/tariffs-detail.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-tariffs-detail__main {
  position: relative; }

.b-tariffs-detail__menu {
  display: none;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -0.5rem;
  background-color: #fff;
  padding: 0.5rem;
  margin-bottom: 1.5rem; }
  @media (min-width: 451px) {
    .b-tariffs-detail__menu {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  @media (min-width: 661px) {
    .b-tariffs-detail__menu {
      display: none; } }
  .b-tariffs-detail__menu-item {
    margin-top: 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    width: 33.3%;
    text-align: center; }
    .b-tariffs-detail__menu-item.active {
      text-decoration: underline;
      color: #00a;
      pointer-events: none; }

.b-tariffs-detail__next {
  right: -2.2rem;
  width: 2rem;
  height: 2rem;
  -webkit-mask-image: url("/images/icons/arrow-slider.svg");
          mask-image: url("/images/icons/arrow-slider.svg");
  background-color: #9e9d9d;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  top: 50%;
  position: absolute;
  -webkit-transform: rotate(0.5turn);
          transform: rotate(0.5turn);
  display: none; }
  .b-tariffs-detail__next:hover {
    background-color: #00a; }
  .b-tariffs-detail__next::after {
    content: none; }
  @media (min-width: 661px) {
    .b-tariffs-detail__next {
      display: block; } }
  @media (min-width: 951px) {
    .b-tariffs-detail__next {
      right: -3rem; } }

.b-tariffs-detail__prev {
  left: -2.2rem;
  width: 2rem;
  height: 2rem;
  -webkit-mask-image: url("/images/icons/arrow-slider.svg");
          mask-image: url("/images/icons/arrow-slider.svg");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  position: absolute;
  top: 50%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: #9e9d9d;
  display: none; }
  .b-tariffs-detail__prev:hover {
    background-color: #00a; }
  .b-tariffs-detail__prev::after {
    content: none; }
  @media (min-width: 661px) {
    .b-tariffs-detail__prev {
      display: block; } }
  @media (min-width: 951px) {
    .b-tariffs-detail__prev {
      left: -3rem; } }

.b-tariffs-detail__slide {
  position: initial;
  height: auto; }

.b-tariffs-detail__swiper-wrapper {
  display: block; }
  @media (min-width: 661px) {
    .b-tariffs-detail__swiper-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.b-tariffs-detail .swiper-container {
  overflow: visible; }

.b-tariffs-detail__columns {
  position: relative; }
  @media (min-width: 661px) {
    .b-tariffs-detail__columns {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; } }
  .b-tariffs-detail__columns.align-start {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; }

.b-tariffs-detail__column {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0 1rem 2.25rem;
  background-color: #fff; }
  @media (min-width: 451px) {
    .b-tariffs-detail__column {
      padding: 2.25rem 1rem; } }
  @media (min-width: 661px) {
    .b-tariffs-detail__column {
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  .b-tariffs-detail__column.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }

.b-tariffs-detail__title-mobile {
  display: block;
  padding: 2rem 3rem;
  color: #00a;
  text-align: center;
  position: relative;
  background-color: #fff;
  cursor: pointer; }
  @media (min-width: 451px) {
    .b-tariffs-detail__title-mobile {
      display: none; } }
  .b-tariffs-detail__title-mobile.active::after {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg); }
  .b-tariffs-detail__title-mobile::after {
    content: '';
    position: absolute;
    width: 1.45rem;
    height: 0.75rem;
    right: 1.5rem;
    top: 0;
    bottom: 0;
    margin: auto;
    background-image: url("/images/b-tariffs-detail/arrow.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: -webkit-transform 0.2s linear;
    -o-transition: transform 0.2s linear;
    transition: transform 0.2s linear;
    transition: transform 0.2s linear, -webkit-transform 0.2s linear; }
    @media (min-width: 451px) {
      .b-tariffs-detail__title-mobile::after {
        display: none; } }

.b-tariffs-detail__title {
  display: none;
  color: #00a;
  text-align: center;
  margin-bottom: 1rem; }
  @media (min-width: 451px) {
    .b-tariffs-detail__title {
      display: block; } }

.b-tariffs-detail__desc {
  text-align: center; }

.b-tariffs-detail__color-container {
  padding: 2rem 1rem;
  margin: 2rem -1rem; }

.b-tariffs-detail__price {
  text-align: center; }

.b-tariffs-detail__price-under {
  text-align: center; }

.b-tariffs-detail__button {
  margin-top: 1rem;
  text-align: center;
  height: 2rem; }
  .b-tariffs-detail__button .b-button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex; }
    @media (max-width: 1100px) {
      .b-tariffs-detail__button .b-button__content {
        padding: 0 1rem; } }
    .b-tariffs-detail__button .b-button__name {
      white-space: normal; }

.b-tariffs-detail__advantages {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative; }
  @media (min-width: 661px) {
    .b-tariffs-detail__advantages {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; } }

.b-tariffs-detail__advantage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  top: 2px;
  left: -1px;
  width: 100%;
  max-width: 20rem;
  padding: 1rem 0.5rem;
  border-bottom: 1px solid #979797; }
  .b-tariffs-detail__advantage.center {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .b-tariffs-detail__advantage.center .b-tariffs-detail__advantage-desc {
      text-align: center; }
  .b-tariffs-detail__advantage:last-child {
    border-bottom: none !important; }
  @media (min-width: 451px) {
    .b-tariffs-detail__advantage {
      width: 50%; }
      .b-tariffs-detail__advantage::after {
        display: block; }
      .b-tariffs-detail__advantage:nth-child(2n)::after {
        display: block; }
      .b-tariffs-detail__advantage:nth-last-child(-n + 2) {
        border-bottom: none; } }
  @media (min-width: 661px) {
    .b-tariffs-detail__advantage {
      width: 100%;
      padding: 1rem 0;
      left: 0;
      border-bottom: 1px solid #979797 !important; }
      .b-tariffs-detail__advantage::after {
        display: none; }
      .b-tariffs-detail__advantage:nth-child(2n)::after {
        display: none; } }
  @media (min-width: 1100px) {
    .b-tariffs-detail__advantage {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; } }
  .b-tariffs-detail__advantage::after {
    content: '';
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 0.05rem;
    height: 2.3rem;
    background-image: url("/images/b-tariffs-detail/line.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; }
    @media (min-width: 661px) {
      .b-tariffs-detail__advantage::after {
        display: none; } }
  .b-tariffs-detail__advantage-image {
    text-align: center;
    margin-bottom: 0.75rem; }
    @media (min-width: 1100px) {
      .b-tariffs-detail__advantage-image {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        margin-right: 1rem;
        margin-bottom: 0;
        min-width: 5rem;
        text-align: end; } }
  .b-tariffs-detail__advantage-desc {
    text-align: center; }
    @media (min-width: 1100px) {
      .b-tariffs-detail__advantage-desc {
        text-align: start; } }
  .b-tariffs-detail__advantage-desc-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    @media (min-width: 1100px) {
      .b-tariffs-detail__advantage-desc-container {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start; } }
  .b-tariffs-detail__advantage-hidden-icon {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    display: block;
    width: 16px;
    height: 16px;
    margin-left: 0.5rem;
    background-image: url("/images/b-tariffs-detail/question.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer; }
    .b-tariffs-detail__advantage-hidden-icon:hover .b-tariffs-detail__advantage-hidden-desc {
      opacity: 1; }
  .b-tariffs-detail__advantage-hidden-desc {
    position: absolute;
    min-width: 8rem;
    border-radius: 0.75rem;
    padding: 0.5rem;
    left: 0;
    right: 0;
    margin-top: 24px;
    -webkit-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    z-index: 10;
    opacity: 0;
    pointer-events: none; }

.b-tariffs-detail__functions-button {
  position: relative;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: underline;
  margin-top: auto;
  cursor: pointer;
  padding-top: 2.5rem; }
  @media (min-width: 451px) {
    .b-tariffs-detail__functions-button {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  .b-tariffs-detail__functions-button::after {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    background-image: url("/images/b-tariffs-detail/border-arrow.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
  .b-tariffs-detail__functions-button::before {
    content: '';
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 5.95rem;
    height: 1.4rem;
    top: 6rem;
    background-image: url("/images/b-tariffs-detail/triangle.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear; }
  .b-tariffs-detail__functions-button.mobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 1rem; }
    .b-tariffs-detail__functions-button.mobile::before {
      display: none; }
    @media (min-width: 451px) {
      .b-tariffs-detail__functions-button.mobile {
        display: none; } }
  .b-tariffs-detail__functions-button.active::after {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg); }
  .b-tariffs-detail__functions-button.active::before {
    opacity: 1;
    visibility: visible; }

.b-tariffs-detail__mobile-margin {
  height: 1.5rem; }
  @media (min-width: 451px) {
    .b-tariffs-detail__mobile-margin {
      display: none; } }

.b-tariffs-detail__functions {
  left: 0;
  width: 100%;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear; }
  @media (max-width: 450px) {
    .b-tariffs-detail__functions {
      display: none;
      position: relative;
      visibility: visible; }
      .b-tariffs-detail__functions.active {
        display: block; } }
  .b-tariffs-detail__functions.active {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    top: calc(100% + 30px); }
  .b-tariffs-detail__functions .b-strings-table {
    position: relative; }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/tariffs-list/tariffs-list.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
@media (max-width: 450px) {
  .b-tariffs-list {
    width: 100vw !important;
    margin-left: calc((50vw - 50%) * -1) !important;
    margin-right: calc((50vw - 50%) * -1) !important; } }

.b-tariffs-list__title {
  margin-bottom: 4rem;
  text-align: center; }

.b-tariffs-list__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-tariffs-list__list {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-tariffs-list__list {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-tariffs-list__list {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-tariffs-list__list {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-tariffs-list__list {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-tariffs-list__list {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-tariffs-list__list {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-tariffs-list__list {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-tariffs-list__list {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-tariffs-list__list {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-tariffs-list__list {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-tariffs-list__list {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-tariffs-list__item {
  margin-bottom: 1.5rem; }
  @media (max-width: 1920px) {
    .b-tariffs-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-tariffs-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-tariffs-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-tariffs-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-tariffs-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-tariffs-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-tariffs-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 661px) {
    .b-tariffs-list__item {
      padding-left: 0;
      padding-right: 0;
      margin-bottom: 0; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-tariffs-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-tariffs-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-tariffs-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-tariffs-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-tariffs-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-tariffs-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-tariffs-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-tariffs-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-tariffs-list__section {
  background-color: #fff;
  padding: 1.5rem 0;
  text-align: center;
  color: #232323;
  position: relative; }
  .b-tariffs-list__section:first-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-bottom: 1.5rem; }

.b-tariffs-list__wrapper {
  margin: auto;
  margin-bottom: 2rem;
  max-width: 16rem; }
  @media (min-width: 451px) {
    .b-tariffs-list__wrapper {
      margin-bottom: 2.5rem; } }
  @media (min-width: 661px) {
    .b-tariffs-list__wrapper {
      margin-bottom: 3rem; } }
  @media (min-width: 1281px) {
    .b-tariffs-list__wrapper {
      margin-bottom: 4.75rem; } }

.b-tariffs-list__sup-title {
  color: #00a;
  margin-bottom: 1.5rem;
  margin-top: 0; }
  @media (max-width: 950px) {
    .b-tariffs-list__sup-title {
      margin-bottom: 0.75rem;
      font-size: 1.22rem; } }

.b-tariffs-list__desc-sup {
  font-weight: normal;
  margin: auto;
  margin-bottom: 0;
  max-width: 16rem; }

.b-tariffs-list__info {
  margin: auto;
  margin-bottom: 2rem;
  font-weight: normal;
  max-width: 16rem; }
  .b-tariffs-list__info p {
    margin-bottom: 2rem; }

.b-tariffs-list__price {
  font-size: 1.25rem;
  margin: auto;
  margin-bottom: 2rem;
  max-width: 16rem; }
  .b-tariffs-list__price-big {
    font-size: 2.1rem;
    font-weight: bold; }
  @media (max-width: 950px) {
    .b-tariffs-list__price {
      font-size: 0.9rem;
      line-height: 1.25rem;
      margin-bottom: 1rem; }
      .b-tariffs-list__price-big {
        font-size: 1.5rem;
        line-height: 1.95rem; } }

.b-tariffs-list__link {
  margin: auto;
  max-width: 16rem;
  color: #ffd9d7;
  font-size: 0.75rem;
  line-height: 1rem;
  height: 2rem;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-decoration: none;
  text-align: center;
  background-color: #00a;
  border-radius: 1rem;
  width: 85%;
  padding: 1px; }
  @media (max-width: 950px) {
    .b-tariffs-list__link {
      font-size: 0.65rem;
      padding: 0.3125rem 1px;
      width: 100%; } }
  @media (max-width: 660px) {
    .b-tariffs-list__link {
      padding: 1px;
      width: 85%; } }

.b-tariffs-list__button {
  height: 2.5rem;
  margin: auto;
  max-width: 13.25rem; }
  .b-tariffs-list__button .b-button__content div {
    white-space: normal;
    line-height: 17px; }
  @media (min-width: 951px) {
    .b-tariffs-list__button {
      height: 2rem; }
      .b-tariffs-list__button .b-button__content div {
        white-space: nowrap; } }

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/video-list/video-list.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-video-list {
  position: relative;
  max-height: 900px;
  overflow: hidden;
  -webkit-transition: max-height 0.5s;
  -o-transition: max-height 0.5s;
  transition: max-height 0.5s; }
  .b-video-list.active {
    overflow: inherit;
    max-height: -webkit-max-content !important;
    max-height: -moz-max-content !important;
    max-height: max-content !important; }
    .b-video-list.active .b-video-list__gradient {
      visibility: hidden;
      opacity: 0; }
  .b-video-list video {
    width: 100%;
    height: auto;
    max-height: 100%; }
  .b-video-list__title {
    text-align: center;
    margin-bottom: 2rem; }
    @media (min-width: 451px) {
      .b-video-list__title {
        margin-bottom: 3rem; } }
    @media (min-width: 951px) {
      .b-video-list__title {
        margin-bottom: 4rem; } }
  .b-video-list__gradient {
    position: absolute;
    width: 100%;
    height: 35%;
    bottom: 0;
    z-index: 5;
    background: transparent;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, #f4f4f4), to(rgba(0, 0, 0, 0)));
    background: -o-linear-gradient(bottom, #f4f4f4 10%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to top, #f4f4f4 10%, rgba(0, 0, 0, 0) 100%);
    display: block;
    left: 0;
    -webkit-transition: opacity 0.5s, visibility 0.5s;
    -o-transition: opacity 0.5s, visibility 0.5s;
    transition: opacity 0.5s, visibility 0.5s; }
  .b-video-list__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    @media (max-width: 1920px) {
      .b-video-list__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (min-width: 1921px) {
      .b-video-list__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (max-width: 1280px) {
      .b-video-list__items {
        margin-left: -12.5px;
        margin-right: -12.5px;
        margin-top: -25px; } }
    @media (min-width: 1921px) {
      .b-video-list__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (max-width: 950px) {
      .b-video-list__items {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -30px; } }
    @media (min-width: 1921px) {
      .b-video-list__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (max-width: 660px) {
      .b-video-list__items {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: -20px; } }
    @media (min-width: 1921px) {
      .b-video-list__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (max-width: 450px) {
      .b-video-list__items {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: -10px; } }
    @media (min-width: 1921px) {
      .b-video-list__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (max-width: 320px) {
      .b-video-list__items {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: -10px; } }
    @media (min-width: 1921px) {
      .b-video-list__items {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -40px; } }
    @media (min-width: 661px) {
      .b-video-list__items {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start; } }
  @media (max-width: 1920px) {
    .b-video-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-video-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-video-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-video-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-video-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-video-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-video-list__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-video-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-video-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-video-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-video-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-video-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-video-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-video-list__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }
  .b-video-list__button {
    position: absolute;
    width: 10rem;
    height: 1.5rem;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 10; }
    .b-video-list__button--hidden {
      display: none; }
  .b-video-list__button-close {
    display: none;
    width: 10rem;
    height: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem; }
    .b-video-list__button-close--active {
      display: block; }
  .b-video-list__youtube {
    position: relative;
    padding: 0 0 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 5px; }
    .b-video-list__youtube iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
  .b-video-list__preview {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2; }
    .b-video-list__preview.active::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #232323;
      opacity: 0.8; }
    .b-video-list__preview.active .b-video-list__preview-play {
      display: none; }
    .b-video-list__preview-play {
      width: 5rem;
      height: 5rem;
      background-image: url("/images/icons/play.svg");
      background-size: contain;
      background-repeat: no-repeat;
      z-index: 2;
      -webkit-transition: -webkit-transform 0.6s;
      transition: -webkit-transform 0.6s;
      -o-transition: transform 0.6s;
      transition: transform 0.6s;
      transition: transform 0.6s, -webkit-transform 0.6s;
      cursor: pointer; }
      .b-video-list__preview-play:hover {
        -webkit-transform: scale(1.2);
                transform: scale(1.2); }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/lists/video-with-desc-list/video-with-desc-list.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-video-with-desc-list__title {
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-video-with-desc-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-video-with-desc-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-video-with-desc-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-video-with-desc-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-video-with-desc-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-video-with-desc-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-video-with-desc-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-video-with-desc-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-video-with-desc-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-video-with-desc-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-video-with-desc-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-video-with-desc-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-video-with-desc-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-video-with-desc-list__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-video-with-desc-list video {
  width: 100%;
  height: auto;
  max-height: 100%; }

.b-video-with-desc-list__desc {
  text-align: center;
  margin-bottom: 2rem;
  margin-left: auto !important;
  margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-video-with-desc-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-video-with-desc-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-video-with-desc-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-video-with-desc-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-video-with-desc-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-video-with-desc-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-video-with-desc-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-video-with-desc-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-video-with-desc-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-video-with-desc-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-video-with-desc-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-video-with-desc-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-video-with-desc-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-video-with-desc-list__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-video-with-desc-list__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 4rem; }
  @media (max-width: 1920px) {
    .b-video-with-desc-list__item {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-video-with-desc-list__item {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-video-with-desc-list__item {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-video-with-desc-list__item {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-video-with-desc-list__item {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-video-with-desc-list__item {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-video-with-desc-list__item {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-video-with-desc-list__item {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-video-with-desc-list__item {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-video-with-desc-list__item {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-video-with-desc-list__item {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-video-with-desc-list__item {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  .b-video-with-desc-list__item:last-child {
    margin-bottom: 0; }
  @media (min-width: 951px) {
    .b-video-with-desc-list__item--right .b-video-with-desc-list__left {
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1; } }

.b-video-with-desc-list__left {
  text-align: center; }
  @media (max-width: 1920px) {
    .b-video-with-desc-list__left {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-video-with-desc-list__left {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-video-with-desc-list__left {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-video-with-desc-list__left {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-video-with-desc-list__left {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-video-with-desc-list__left {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-video-with-desc-list__left {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 951px) {
    .b-video-with-desc-list__left {
      margin-top: 0.75rem !important; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-video-with-desc-list__left {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-video-with-desc-list__left {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-video-with-desc-list__left {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-video-with-desc-list__left {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-video-with-desc-list__left {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-video-with-desc-list__left {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-video-with-desc-list__left {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-video-with-desc-list__left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-video-with-desc-list__youtube {
  position: relative;
  padding: 0 0 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 2rem;
  border-radius: 5px; }
  @media (min-width: 951px) {
    .b-video-with-desc-list__youtube {
      margin-bottom: 0.75rem; } }
  .b-video-with-desc-list__youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.b-video-with-desc-list__preview {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2; }
  .b-video-with-desc-list__preview.active::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #232323;
    opacity: 0.8; }
  .b-video-with-desc-list__preview.active .b-video-with-desc-list__preview-play {
    display: none; }
  .b-video-with-desc-list__preview-play {
    width: 5rem;
    height: 5rem;
    background-image: url("/images/icons/play.svg");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    -webkit-transition: -webkit-transform 0.6s;
    transition: -webkit-transform 0.6s;
    -o-transition: transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    cursor: pointer; }
    .b-video-with-desc-list__preview-play:hover {
      -webkit-transform: scale(1.2);
              transform: scale(1.2); }

@media (max-width: 1920px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (max-width: 1280px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (max-width: 950px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (max-width: 660px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (max-width: 450px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (max-width: 320px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1921px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) {
  .b-video-with-desc-list__right {
    margin-top: 0 !important; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-video-with-desc-list__right {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-video-with-desc-list__right {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-video-with-desc-list__right {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-video-with-desc-list__right {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-video-with-desc-list__right {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-video-with-desc-list__right {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-video-with-desc-list__right {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-video-with-desc-list__right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-video-with-desc-list__right-title {
  color: #00a; }

.b-video-with-desc-list__right-desc {
  display: none; }
  @media (min-width: 661px) {
    .b-video-with-desc-list__right-desc {
      display: block !important;
      margin-top: -1rem !important; } }

.b-video-with-desc-list__desc-announce {
  display: none; }
  @media (min-width: 661px) {
    .b-video-with-desc-list__desc-announce {
      display: block !important; } }

.b-video-with-desc-list__desc-announce-mobile {
  margin-bottom: 1rem; }

.b-video-with-desc-list__button {
  width: 7.5rem;
  height: 1.75rem;
  margin-bottom: 1rem; }
  .b-video-with-desc-list__button:hover {
    border-color: #00a;
    color: #00a; }
  @media (min-width: 661px) {
    .b-video-with-desc-list__button {
      display: none; } }

/*!**************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/loading/loading.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 6rem;
  height: 6rem; }

@-webkit-keyframes spin {
  0%,
  100% {
    -webkit-transform: translate(0);
            transform: translate(0); }
  25% {
    -webkit-transform: translate(160%);
            transform: translate(160%); }
  50% {
    -webkit-transform: translate(160%, 160%);
            transform: translate(160%, 160%); }
  75% {
    -webkit-transform: translate(0, 160%);
            transform: translate(0, 160%); } }

@keyframes spin {
  0%,
  100% {
    -webkit-transform: translate(0);
            transform: translate(0); }
  25% {
    -webkit-transform: translate(160%);
            transform: translate(160%); }
  50% {
    -webkit-transform: translate(160%, 160%);
            transform: translate(160%, 160%); }
  75% {
    -webkit-transform: translate(0, 160%);
            transform: translate(0, 160%); } }
  .b-loading hr {
    border: 0;
    margin: 0;
    width: 40%;
    height: 40%;
    position: absolute;
    border-radius: 50%;
    -webkit-animation: spin 2s ease infinite;
            animation: spin 2s ease infinite; }
    .b-loading hr:first-child {
      background: #99cdf1;
      -webkit-animation-delay: -1.5s;
              animation-delay: -1.5s; }
    .b-loading hr:nth-child(2) {
      background: #00a;
      -webkit-animation-delay: -1s;
              animation-delay: -1s; }
    .b-loading hr:nth-child(3) {
      background: #9e9d9d;
      -webkit-animation-delay: -0.5s;
              animation-delay: -0.5s; }
    .b-loading hr:last-child {
      background: #ffd9d7; }

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/margin-bottom/margin-bottom.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-margin-bottom.min {
  margin-bottom: 1rem; }

/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/marketplace/marketplace.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-marketplace__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start; }
  @media (max-width: 1920px) {
    .b-marketplace__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-marketplace__main {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-marketplace__main {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-marketplace__main {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-marketplace__main {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-marketplace__main {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-marketplace__filter {
  position: relative;
  z-index: 100;
  -webkit-filter: drop-shadow(30px 10px 25px rgba(71, 41, 21, 0.1));
          filter: drop-shadow(30px 10px 25px rgba(71, 41, 21, 0.1)); }
  @media (max-width: 1920px) {
    .b-marketplace__filter {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-marketplace__filter {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-marketplace__filter {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-marketplace__filter {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-marketplace__filter {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-marketplace__filter {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__filter {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-marketplace__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-marketplace__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-marketplace__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-marketplace__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-marketplace__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-marketplace__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-marketplace__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-marketplace__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-marketplace__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-marketplace__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-marketplace__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-marketplace__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-marketplace__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-marketplace__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-marketplace__filter-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start; }
  @media (max-width: 1920px) {
    .b-marketplace__filter-inner {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__filter-inner {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-marketplace__filter-inner {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__filter-inner {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-marketplace__filter-inner {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__filter-inner {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-marketplace__filter-inner {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__filter-inner {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-marketplace__filter-inner {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__filter-inner {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-marketplace__filter-inner {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__filter-inner {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-marketplace__search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 1.5rem; }
  @media (max-width: 1920px) {
    .b-marketplace__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-marketplace__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-marketplace__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-marketplace__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-marketplace__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-marketplace__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-marketplace__search input {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    width: 100%;
    border: none; }
    .b-marketplace__search input::-webkit-input-placeholder {
      opacity: 1; }
    .b-marketplace__search input::-moz-placeholder {
      opacity: 1; }
    .b-marketplace__search input:-ms-input-placeholder {
      opacity: 1; }
    .b-marketplace__search input::-ms-input-placeholder {
      opacity: 1; }
    .b-marketplace__search input::placeholder {
      opacity: 1; }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-marketplace__search {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-marketplace__search {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-marketplace__search {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-marketplace__search {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-marketplace__search {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-marketplace__search {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-marketplace__search {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-marketplace__search {
      margin-bottom: 1px;
      border-radius: 10px 10px 0 0; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-marketplace__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-marketplace__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-marketplace__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-marketplace__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-marketplace__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-marketplace__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-marketplace__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-marketplace__search-button {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    -webkit-mask-image: url("/images/search.svg");
            mask-image: url("/images/search.svg");
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    background-color: #232323; }

.b-marketplace__filter-content {
  margin-bottom: 1.5rem;
  position: relative; }
  @media (max-width: 1920px) {
    .b-marketplace__filter-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-marketplace__filter-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-marketplace__filter-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-marketplace__filter-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-marketplace__filter-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-marketplace__filter-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__filter-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-marketplace__filter-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-marketplace__filter-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-marketplace__filter-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-marketplace__filter-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-marketplace__filter-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-marketplace__filter-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-marketplace__filter-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-marketplace__filter-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-marketplace__filter-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-marketplace__filter-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-marketplace__filter-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-marketplace__filter-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-marketplace__filter-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-marketplace__filter-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-marketplace__filter-content-toggle, .b-marketplace__filter-content-list {
  padding: 1rem;
  background-color: #fff;
  border-radius: 10px; }

.b-marketplace__filter-content-toggle {
  position: relative;
  -webkit-transition: -webkit-transform .6s;
  transition: -webkit-transform .6s;
  -o-transition: transform .6s;
  transition: transform .6s;
  transition: transform .6s, -webkit-transform .6s;
  background: #fff url("data:image/svg+xml,%3Csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_16483_9522' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='11' height='7'%3E%3Cg clip-path='url(%23clip0_16483_9522)'%3E%3Cg clip-path='url(%23clip1_16483_9522)'%3E%3Cpath d='M1.37495 -0.00153762L0 1.39844L5.49982 6.99835L6.87477 5.59837L1.37495 -0.00153762Z' fill='%239E9D9D'/%3E%3Cpath d='M4.12505 5.60002L5.5 7L10.9998 1.40009L9.62486 0.000117239L4.12505 5.60002Z' fill='%239E9D9D'/%3E%3C/g%3E%3C/g%3E%3C/mask%3E%3Cg mask='url(%23mask0_16483_9522)'%3E%3Crect width='11' height='7' fill='%23252525'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_16483_9522'%3E%3Crect width='11' height='7' fill='white'/%3E%3C/clipPath%3E%3CclipPath id='clip1_16483_9522'%3E%3Crect width='11' height='7' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat right 1rem top 1.5rem;
  background-size: 11px 7px; }
  .b-marketplace__filter-content-toggle.active {
    border-radius: 10px 10px 0 0; }
  @media (min-width: 1281px) {
    .b-marketplace__filter-content-toggle {
      display: none; } }

.b-marketplace__filter-content-list {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 100;
  border-radius: 0 0 10px 10px; }
  @media (min-width: 1281px) {
    .b-marketplace__filter-content-list {
      display: block;
      position: static; } }

.b-marketplace__filter-item {
  margin-bottom: 1rem; }

.b-marketplace__filter-subitems {
  display: none; }
  .b-marketplace__filter-subitems .b-marketplace__filter-item {
    font-weight: 400;
    margin-left: .5rem; }

.b-marketplace__filter-group {
  position: relative; }
  .b-marketplace__filter-group:first-child .main {
    margin-top: 0; }

.b-marketplace__filter-subitems-toggle {
  position: absolute;
  right: -.5rem;
  top: 0;
  width: 32px;
  height: 32px;
  -webkit-mask-image: url("/images/arrow-select.svg");
          mask-image: url("/images/arrow-select.svg");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 11px 7px;
          mask-size: 11px 7px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: #232323;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  -o-transition: transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s; }
  .opened + .b-marketplace__filter-subitems-toggle {
    -webkit-transform: rotate(0.5turn);
            transform: rotate(0.5turn); }

.b-marketplace__filter-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: 700;
  cursor: pointer;
  margin-left: 0.5rem; }
  @media (min-width: 951px) {
    .b-marketplace__filter-item {
      margin-left: 0; } }
  .b-marketplace__filter-item:hover {
    color: #00a; }
    .b-marketplace__filter-item:hover::after {
      background-color: #00a; }
  .b-marketplace__filter-item.active {
    color: #00a; }
  .b-marketplace__filter-item.arrow-hide::after {
    display: none !important; }

@media (max-width: 1920px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (max-width: 1280px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (max-width: 950px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (max-width: 660px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (max-width: 450px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (max-width: 320px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1921px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-marketplace__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-marketplace__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-marketplace__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-marketplace__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-marketplace__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-marketplace__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-marketplace__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-marketplace__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-marketplace__item {
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 2rem 1rem;
  min-height: 20rem;
  border-radius: 10px;
  margin-bottom: 2rem;
  overflow: hidden; }
  @media (max-width: 1920px) {
    .b-marketplace__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-marketplace__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-marketplace__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-marketplace__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-marketplace__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-marketplace__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-marketplace__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-marketplace__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-marketplace__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-marketplace__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-marketplace__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-marketplace__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-marketplace__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-marketplace__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-marketplace__item:hover .b-marketplace__item-image:after {
      opacity: 1;
      -webkit-filter: grayscale(0%);
              filter: grayscale(0%);
      background: -webkit-gradient(linear, left top, right top, from(#4A55CA), to(rgba(0, 0, 0, 0.8)));
      background: -o-linear-gradient(left, #4A55CA, rgba(0, 0, 0, 0.8));
      background: linear-gradient(to right, #4A55CA, rgba(0, 0, 0, 0.8)); } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-marketplace__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-marketplace__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-marketplace__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-marketplace__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-marketplace__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-marketplace__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-marketplace__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-marketplace__item-link {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 5; }
  .b-marketplace__item-image {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1; }
    .b-marketplace__item-image::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: -webkit-gradient(linear, left top, right top, from(#4A55CA), to(rgba(0, 0, 0, 0.8)));
      background: -o-linear-gradient(left, #4A55CA, rgba(0, 0, 0, 0.8));
      background: linear-gradient(to right, #4A55CA, rgba(0, 0, 0, 0.8));
      -webkit-filter: grayscale(100%) brightness(90%);
              filter: grayscale(100%) brightness(90%);
      z-index: 2;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
    .b-marketplace__item-image div {
      width: 100%;
      height: 100%;
      background-position: top right;
      background-size: cover;
      background-repeat: no-repeat;
      -webkit-transition: -webkit-transform 0.2s;
      transition: -webkit-transform 0.2s;
      -o-transition: transform 0.2s;
      transition: transform 0.2s;
      transition: transform 0.2s, -webkit-transform 0.2s; }
    @media (min-width: 451px) {
      .b-marketplace__item-image {
        border-radius: 10px; } }
  .b-marketplace__item-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    width: 80px;
    height: 80px;
    top: 20px;
    right: 20px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    overflow: hidden; }
  .b-marketplace__item-medal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    width: 80px;
    height: 80px;
    top: 70px;
    right: 20px;
    border-radius: 50px;
    overflow: hidden; }
  .b-marketplace__item-title {
    color: #fff;
    margin-right: 100px; }
    .b-marketplace__item-title:hover {
      color: #fff; }
  .b-marketplace__item-desc {
    margin-right: 100px;
    margin-top: 0.25rem; }
  .b-marketplace__item-comment {
    margin-top: auto; }
  .b-marketplace__item-sert::before {
    display: block;
    content: '';
    width: 4rem;
    height: 1px;
    background-color: #fff;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem; }

.b-marketplace__error {
  margin-top: 3rem;
  padding: 0 1rem; }

/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/nomera/nomera.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-nomera__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse; }
  @media (min-width: 820px) {
    .b-nomera__wrapper {
      margin-bottom: 3rem; } }
  @media (min-width: 1150px) {
    .b-nomera__wrapper {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }
  @media (min-width: 1150px) and (max-width: 1920px) {
    .b-nomera__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-nomera__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 1280px) {
    .b-nomera__wrapper {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-nomera__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 950px) {
    .b-nomera__wrapper {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-nomera__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 660px) {
    .b-nomera__wrapper {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-nomera__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 450px) {
    .b-nomera__wrapper {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-nomera__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 320px) {
    .b-nomera__wrapper {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-nomera__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-nomera__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.b-nomera__title {
  font-weight: 500; }
  .b-nomera__title--form {
    margin-bottom: 2.25rem; }
  .b-nomera__title--order {
    margin-bottom: 1rem; }
  .b-nomera__title--main {
    margin: 40px auto; }
    @media (min-width: 580px) {
      .b-nomera__title--main {
        margin: 70px auto; } }
    @media (min-width: 820px) {
      .b-nomera__title--main {
        margin: 60px auto; } }
    @media (min-width: 1150px) {
      .b-nomera__title--main {
        margin: 70px auto; } }
    @media (min-width: 1600px) {
      .b-nomera__title--main {
        margin: 80px auto; } }

.b-nomera__region {
  background-color: #fff;
  padding: 40px 0 0 20px;
  margin-bottom: 20px;
  border-radius: 5px; }
  @media (min-width: 580px) {
    .b-nomera__region {
      padding: 2.5rem 0.5rem 2.5rem 1.5rem; } }
  @media (min-width: 1150px) {
    .b-nomera__region {
      margin-bottom: 0; } }
  @media (min-width: 1150px) and (max-width: 1920px) {
    .b-nomera__region {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 1280px) {
    .b-nomera__region {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 950px) {
    .b-nomera__region {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 660px) {
    .b-nomera__region {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 450px) {
    .b-nomera__region {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 320px) {
    .b-nomera__region {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-nomera__region {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1600px) {
    .b-nomera__region {
      padding: 2.5rem 1rem 2.5rem 2rem; } }
  @media (min-width: 1600px) and (max-width: 1920px) {
    .b-nomera__region {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 1280px) {
    .b-nomera__region {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 950px) {
    .b-nomera__region {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 660px) {
    .b-nomera__region {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 450px) {
    .b-nomera__region {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 320px) {
    .b-nomera__region {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (min-width: 1921px) {
    .b-nomera__region {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

.b-nomera__form {
  background-color: #e6f3ff;
  padding: 50px 20px 40px;
  margin-top: 0;
  border-radius: 5px; }
  @media (min-width: 580px) {
    .b-nomera__form {
      padding: 2.5rem 1.5rem; } }
  @media (min-width: 1150px) {
    .b-nomera__form {
      margin-top: -30px; } }
  @media (min-width: 1150px) and (max-width: 1920px) {
    .b-nomera__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 1280px) {
    .b-nomera__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 950px) {
    .b-nomera__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 660px) {
    .b-nomera__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 450px) {
    .b-nomera__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 320px) {
    .b-nomera__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-nomera__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1600px) {
    .b-nomera__form {
      padding: 2.5rem 3rem 2.5rem 2rem; } }
  @media (min-width: 1600px) and (max-width: 1920px) {
    .b-nomera__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 1280px) {
    .b-nomera__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 950px) {
    .b-nomera__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 660px) {
    .b-nomera__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 450px) {
    .b-nomera__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 320px) {
    .b-nomera__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (min-width: 1921px) {
    .b-nomera__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

.b-nomera__order {
  background-color: #fff;
  padding: 40px 0 0 20px;
  margin-bottom: 20px;
  border-radius: 5px; }
  @media (min-width: 580px) {
    .b-nomera__order {
      padding: 2.5rem 0.5rem 2.5rem 1.5rem; } }
  @media (min-width: 1150px) {
    .b-nomera__order {
      margin-bottom: 0; } }
  @media (min-width: 1150px) and (max-width: 1920px) {
    .b-nomera__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 1280px) {
    .b-nomera__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 950px) {
    .b-nomera__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 660px) {
    .b-nomera__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 450px) {
    .b-nomera__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 320px) {
    .b-nomera__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-nomera__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1600px) {
    .b-nomera__order {
      padding: 2.5rem 1rem 2.5rem 2rem; } }
  @media (min-width: 1600px) and (max-width: 1920px) {
    .b-nomera__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 1280px) {
    .b-nomera__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 950px) {
    .b-nomera__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 660px) {
    .b-nomera__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 450px) {
    .b-nomera__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 320px) {
    .b-nomera__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (min-width: 1921px) {
    .b-nomera__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

.b-nomera .margin {
  margin-top: 160px; }

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/number-selection/number-selection.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-number-selection__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.b-number-selection h1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.b-number-selection__containers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -25px !important;
  margin-left: -12.5px;
  margin-right: -12.5px; }
  @media (min-width: 1700px) {
    .b-number-selection__containers {
      margin-left: -20px;
      margin-right: -20px; } }

.b-number-selection__container {
  border-radius: 5px;
  margin-top: 25px !important; }
  .b-number-selection__container--one {
    background-color: #fff;
    padding: 40px 30px; }
    @media (max-width: 1920px) {
      .b-number-selection__container--one {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-number-selection__container--one {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-number-selection__container--one {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-number-selection__container--one {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-number-selection__container--one {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-number-selection__container--one {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-number-selection__container--one {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (min-width: 450px) {
      .b-number-selection__container--one {
        padding: 50px 30px 40px; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-number-selection__container--one {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-number-selection__container--one {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-number-selection__container--one {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-number-selection__container--one {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-number-selection__container--one {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-number-selection__container--one {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-number-selection__container--one {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-number-selection__container--two {
    background-color: #e6f3ff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 40px 30px; }
    @media (max-width: 1920px) {
      .b-number-selection__container--two {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-number-selection__container--two {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-number-selection__container--two {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-number-selection__container--two {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-number-selection__container--two {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-number-selection__container--two {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-number-selection__container--two {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (min-width: 450px) {
      .b-number-selection__container--two {
        padding: 50px 30px 40px; } }
    @media (min-width: 1280px) {
      .b-number-selection__container--two {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(66.66667% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px; } }
    @media (min-width: 1700px) {
      .b-number-selection__container--two {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(50% - 40px);
        margin-left: 20px;
        margin-right: 20px; } }
  .b-number-selection__container--three {
    background-color: #fff;
    padding: 40px 10px; }
    @media (max-width: 1920px) {
      .b-number-selection__container--three {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-number-selection__container--three {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-number-selection__container--three {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-number-selection__container--three {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-number-selection__container--three {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-number-selection__container--three {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-number-selection__container--three {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (min-width: 450px) {
      .b-number-selection__container--three {
        padding: 50px 10px 40px; } }
    @media (min-width: 950px) {
      .b-number-selection__container--three {
        padding: 0;
        background-color: transparent; } }
    @media (min-width: 1280px) {
      .b-number-selection__container--three {
        padding: 50px 10px 40px;
        background-color: #fff;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(33.33333% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px; } }
    @media (min-width: 1700px) {
      .b-number-selection__container--three {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(25% - 40px);
        margin-left: 20px;
        margin-right: 20px; } }
    @media (min-width: 1900px) {
      .b-number-selection__container--three {
        padding: 50px 30px 40px; } }

.b-number-selection__search-number {
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 45px; }
  @media (min-width: 1280px) {
    .b-number-selection__search-number {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.b-number-selection__search-number-title {
  color: #00a;
  font-weight: 700;
  display: none; }
  @media (min-width: 1700px) {
    .b-number-selection__search-number-title {
      display: block; } }

.b-number-selection__search-number-btn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: 20px;
  display: none; }
  @media (min-width: 1700px) {
    .b-number-selection__search-number-btn {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.b-number-selection__search-number-input {
  margin-left: 13px;
  display: none; }
  @media (min-width: 1700px) {
    .b-number-selection__search-number-input {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  .b-number-selection__search-number-input input {
    width: 27px;
    height: 30px;
    border: none;
    border-radius: 5px;
    margin-left: 7px;
    padding-left: 7px; }

.b-number-selection__first-numbers-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 25px; }

.b-number-selection__selects {
  margin-top: -20px;
  margin-bottom: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: 0; }
  @media (min-width: 580px) {
    .b-number-selection__selects {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      margin-left: -20px; } }
  @media (min-width: 1700px) {
    .b-number-selection__selects {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      margin-left: 0; } }

.b-number-selection__select {
  max-width: 265px;
  width: 100%;
  margin-top: 20px;
  padding: 4px 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  background: #f4f4f4;
  border-radius: 15px;
  position: relative;
  margin-left: 0; }
  .b-number-selection__select.active {
    border-radius: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px; }
  @media (min-width: 580px) {
    .b-number-selection__select {
      margin-left: 20px; } }
  @media (min-width: 1700px) {
    .b-number-selection__select {
      max-width: 100%;
      margin-left: 0; } }
  .b-number-selection__select::after {
    content: '';
    width: 17px;
    height: 9px;
    background-image: url("/images/calculator/arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 10px;
    right: 10px; }
  .b-number-selection__select span {
    color: #00a; }

.b-number-selection__select-option-container {
  position: absolute;
  width: 100%;
  top: 29px;
  left: 0;
  z-index: 1000;
  display: none; }
  .b-number-selection__select-option-container--index {
    z-index: 10; }
  .b-number-selection__select-option-container.active {
    display: block; }

.b-number-selection__select-search {
  position: relative; }
  .b-number-selection__select-search::before {
    content: '';
    width: 13px;
    height: 13px;
    -webkit-mask-image: url("/images/calculator/search.svg");
            mask-image: url("/images/calculator/search.svg");
    background-color: #fff;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    position: absolute;
    top: 13px;
    right: 85px; }
  .b-number-selection__select-search input {
    width: 100%;
    border: none;
    padding: 10px 100px 10px 20px;
    background-color: #00a;
    color: #fff; }
    .b-number-selection__select-search input::-webkit-input-placeholder {
      color: #fff; }
    .b-number-selection__select-search input::-moz-placeholder {
      color: #fff; }
    .b-number-selection__select-search input:-ms-input-placeholder {
      color: #fff; }
    .b-number-selection__select-search input::-ms-input-placeholder {
      color: #fff; }
    .b-number-selection__select-search input::placeholder {
      color: #fff; }

.b-number-selection__select-options-wrapper {
  padding: 20px;
  background: #f4f4f4;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px; }
  .b-number-selection__select-options-wrapper--type {
    border-top: 1px solid #d8d8d8; }

.b-number-selection__select-options {
  position: relative;
  height: auto;
  min-height: 1px;
  max-height: 445px; }
  .b-number-selection__select-options .ps__rail-y {
    width: 1px;
    right: 6px;
    background-color: #afaeae; }
  .b-number-selection__select-options .ps__rail-y:hover {
    background-color: #afaeae; }
  .b-number-selection__select-options .ps__rail-y .ps--clicking {
    right: -3px;
    background-color: #afaeae; }
  .b-number-selection__select-options .ps__rail-y:hover > .ps__thumb-y {
    width: 6px;
    background-color: #afaeae; }
  .b-number-selection__select-options .ps__rail-y.ps--clicking .ps__thumb-y {
    width: 6px;
    background-color: #afaeae; }
  .b-number-selection__select-options .ps__thumb-y {
    right: -3px;
    width: 6px;
    background-color: #afaeae !important; }

.b-number-selection__select-options-city-container.hidden {
  display: none; }

.b-number-selection__select-options-city-name-wrapper {
  margin-top: 0; }
  .b-number-selection__select-options-city-name-wrapper--first {
    margin-top: -10px; }

.b-number-selection__select-options-type-name-wrapper {
  margin-top: 0; }
  .b-number-selection__select-options-type-name-wrapper--first {
    margin-top: -10px; }

.b-number-selection__select-options-city-key {
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  margin-right: 18px;
  margin-top: 10px; }

.b-number-selection__select-options-city {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.b-number-selection__select-options-color {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  margin-right: 10px; }

.b-number-selection__select-options-city-name {
  margin-top: 10px;
  cursor: pointer; }
  .b-number-selection__select-options-city-name--type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .b-number-selection__select-options-city-name span {
    color: #55beff; }
  .b-number-selection__select-options-city-name.hidden {
    display: none; }

.b-number-selection__select-options-type-name {
  margin-top: 10px;
  cursor: pointer; }
  .b-number-selection__select-options-type-name--type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .b-number-selection__select-options-type-name span {
    color: #55beff; }
  .b-number-selection__select-options-type-name.hidden {
    display: none; }

.b-number-selection__select-options-city-name-text {
  color: #232323;
  cursor: pointer; }
  .b-number-selection__select-options-city-name-text:hover {
    color: #232323; }

.b-number-selection__select-options-city-type-text {
  cursor: pointer; }

.b-number-selection__select-options-city-name-item {
  cursor: pointer; }
  .b-number-selection__select-options-city-name-item.hidden {
    display: none; }

.b-number-selection__error {
  display: none; }
  .b-number-selection__error.active {
    display: block; }

.b-number-selection__select-title {
  padding: 0 20px;
  cursor: pointer; }
  .b-number-selection__select-title span {
    color: #55beff; }

.b-number-selection__first-numbers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: calc(100% + 10px);
  margin-top: -20px;
  margin-left: -9px; }

.b-number-selection__first-number {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  text-align: center;
  color: #55beff;
  font-weight: 400;
  margin-top: 10px;
  font-size: 15px;
  width: 46px;
  line-height: 29px;
  border: 1px solid transparent !important; }
  .b-number-selection__first-number.active {
    text-decoration: none;
    background-color: #e6f3ff;
    border: 1px solid #55beff !important;
    border-radius: 94px; }
  @media (min-width: 450px) {
    .b-number-selection__first-number {
      margin-top: 20px;
      font-size: 17px; } }
  .b-number-selection__first-number.hidden {
    display: none; }

.b-number-selection__container-numbers {
  height: 372px;
  position: relative;
  width: 100%;
  margin-bottom: 40px;
  max-width: 240px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-y: auto; }
  @media (min-width: 450px) {
    .b-number-selection__container-numbers {
      max-width: 100%;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start; } }
  .b-number-selection__container-numbers .ps__rail-y {
    width: 2px;
    right: 6px;
    background-color: #afaeae; }
  .b-number-selection__container-numbers .ps__rail-y:hover {
    background-color: #afaeae; }
  .b-number-selection__container-numbers .ps__rail-y .ps--clicking {
    right: -6px;
    background-color: #afaeae; }
  .b-number-selection__container-numbers .ps__rail-y:hover > .ps__thumb-y {
    width: 12px;
    background-color: #afaeae; }
  .b-number-selection__container-numbers .ps__rail-y.ps--clicking .ps__thumb-y {
    width: 12px;
    background-color: #afaeae; }
  .b-number-selection__container-numbers .ps__thumb-y {
    right: -5px;
    width: 12px;
    background-color: #afaeae !important; }

.b-number-selection__numbers {
  padding-right: 15px;
  margin-top: -20px;
  margin-left: -12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  @media (min-width: 450px) {
    .b-number-selection__numbers {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start; } }

.b-number-selection__numbersnull {
  display: none;
  width: 100%;
  text-align: center;
  font-size: 0.9rem; }

.b-number-selection__number {
  margin-top: 20px;
  margin-left: 12px;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  max-width: 170px;
  width: 100%; }
  .b-number-selection__number.hidden {
    display: none; }
  .b-number-selection__number.maskhidden {
    display: none; }

.b-number-selection__pagination-pager {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  position: relative;
  top: 0;
  right: 0;
  margin-left: 10px; }
  @media (min-width: 450px) {
    .b-number-selection__pagination-pager {
      margin-left: 0;
      position: absolute;
      top: -25px;
      right: 20px; } }

.b-number-selection__pagination-container {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: auto;
  margin-right: auto; }

.b-number-selection__number-checkbox {
  position: absolute;
  z-index: -1;
  opacity: 0; }
  .b-number-selection__number-checkbox + label {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    padding: 4px 10px;
    background-color: #fff;
    border-radius: 7px;
    cursor: pointer;
    width: 100%; }
  .b-number-selection__number-checkbox + label::before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    border: 1px solid #adb5bd; }
  .b-number-selection__number-checkbox:checked + label {
    font-weight: 700;
    background-color: #00a769;
    color: #ffd9d7;
    padding: 4px 8px; }
  .b-number-selection__number-checkbox:checked + label::before {
    border: 1px solid #fff;
    background-color: #fff;
    background-image: url("/images/calculator/checbox-active.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; }

.b-number-selection__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: -10px; }

.b-number-selection__pagination-btn {
  margin-left: 10px;
  padding: 7px 20px;
  border: 1px solid #252525;
  border-radius: 7px;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  cursor: pointer; }
  @media (min-width: 450px) {
    .b-number-selection__pagination-btn {
      padding: 4px 25px; } }

.b-number-selection__basket {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  margin-left: 0; }
  @media (min-width: 950px) {
    .b-number-selection__basket {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      margin-left: -25px; } }
  @media (min-width: 1280px) {
    .b-number-selection__basket {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      margin-left: 0; } }

.b-number-selection__basket-left {
  background-color: #fff;
  padding: 0;
  width: 100%;
  margin-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  @media (min-width: 950px) {
    .b-number-selection__basket-left {
      padding: 50px 10px 40px;
      margin-left: 25px; } }
  @media (min-width: 1280px) {
    .b-number-selection__basket-left {
      padding: 0;
      margin-left: 0; } }

.b-number-selection__basket-right {
  background-color: #fff;
  padding: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-left: 0; }
  @media (min-width: 950px) {
    .b-number-selection__basket-right {
      padding: 50px 10px 40px;
      margin-left: 25px; } }
  @media (min-width: 1280px) {
    .b-number-selection__basket-right {
      padding: 0;
      margin-left: 0; } }

.b-number-selection__basket-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 20px; }
  @media (min-width: 450px) {
    .b-number-selection__basket-title {
      margin-bottom: 30px; } }

.b-number-selection__basket-numbers {
  margin-top: -20px;
  margin-bottom: 30px; }

.b-number-selection__basket-number {
  margin-top: 20px;
  padding: 7px 35px;
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: #00a;
  border: 1px solid #00a;
  border-radius: 25px;
  position: relative; }
  @media (min-width: 450px) {
    .b-number-selection__basket-number {
      font-size: 25px; } }
  .b-number-selection__basket-number::after {
    content: '';
    width: 17px;
    height: 9px;
    background-image: url("/images/calculator/close.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 15px;
    right: -20px;
    cursor: pointer; }
    @media (min-width: 450px) {
      .b-number-selection__basket-number::after {
        top: -7px;
        right: -6px; } }

.b-number-selection__basket-calculation {
  margin-bottom: 50px;
  font-weight: 400;
  text-align: center;
  font-size: 14px;
  line-height: 25px; }
  @media (min-width: 450px) {
    .b-number-selection__basket-calculation {
      margin-bottom: 37px; } }
  @media (min-width: 950px) {
    .b-number-selection__basket-calculation {
      margin-bottom: 0; } }
  @media (min-width: 1280px) {
    .b-number-selection__basket-calculation {
      margin-bottom: 37px; } }
  .b-number-selection__basket-calculation span {
    color: #232323;
    font-weight: 700; }
  .b-number-selection__basket-calculation s {
    color: #757373;
    font-weight: 700; }

.b-number-selection__basket-price {
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 10px;
  position: relative;
  /*
		&::after {
			content: '';
			width: 16px;
			height: 16px;
			background-image: url('/images/calculator/help.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			position: absolute;
			top: -1px;
			right: -12px;
			cursor: pointer;
		}
		*/ }
  .b-number-selection__basket-price span {
    font-weight: 700;
    font-size: 30px;
    line-height: 50px; }
    @media (min-width: 450px) {
      .b-number-selection__basket-price span {
        font-size: 38px; } }

.b-number-selection__basket-buy {
  margin-top: auto;
  text-align: center; }

.b-number-selection__basket-desc {
  font-weight: 400;
  font-size: 14px;
  line-height: 25px;
  padding: 15px 10px;
  background-color: #e6f3ff;
  border-radius: 5px;
  margin-bottom: 40px; }

.b-number-selection__basket-desc.hidden {
  display: none; }

.b-number-selection__basket-btn {
  padding: 15px 30px;
  background: #00a;
  border-radius: 25px;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #ffd9d7;
  cursor: pointer; }
  @media (min-width: 450px) {
    .b-number-selection__basket-btn {
      font-size: 15px; } }
  .b-number-selection__basket-btn.green {
    background: #00a769; }

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/presentations/presentations.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-presentations__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media (max-width: 1920px) {
    .b-presentations__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-presentations__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-presentations__main {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-presentations__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-presentations__main {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-presentations__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-presentations__main {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-presentations__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-presentations__main {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-presentations__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-presentations__main {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-presentations__main {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) {
    .b-presentations__main {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

@media (max-width: 1920px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (max-width: 1280px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (max-width: 950px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (max-width: 660px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (max-width: 450px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (max-width: 320px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1921px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (max-width: 450px) {
  .b-presentations__filter {
    width: 100vw !important;
    margin-left: calc((50vw - 50%) * -1) !important;
    margin-right: calc((50vw - 50%) * -1) !important; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-presentations__filter {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-presentations__search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
  background-color: #fff; }
  .b-presentations__search input {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    width: 100%;
    border: none; }
    .b-presentations__search input::-webkit-input-placeholder {
      opacity: 1; }
    .b-presentations__search input::-moz-placeholder {
      opacity: 1; }
    .b-presentations__search input:-ms-input-placeholder {
      opacity: 1; }
    .b-presentations__search input::-ms-input-placeholder {
      opacity: 1; }
    .b-presentations__search input::placeholder {
      opacity: 1; }
  @media (min-width: 451px) {
    .b-presentations__search {
      border-radius: 10px;
      overflow: hidden; } }
  @media (min-width: 951px) {
    .b-presentations__search {
      padding: 1rem; } }
  @media (min-width: 1150px) {
    .b-presentations__search {
      padding: 1rem 1.5rem; } }
  @media (min-width: 1281px) {
    .b-presentations__search {
      padding: 1rem; } }
  @media (min-width: 1500px) {
    .b-presentations__search {
      padding: 1rem 2rem; } }
  .b-presentations__search-button {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    -webkit-mask-image: url("/images/search.svg");
            mask-image: url("/images/search.svg");
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    background-color: #232323; }

.b-presentations__filter-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 1rem;
  margin-top: 1.5rem;
  background-color: #fff; }
  @media (min-width: 451px) {
    .b-presentations__filter-content {
      border-radius: 10px;
      overflow: hidden; } }
  @media (min-width: 951px) {
    .b-presentations__filter-content {
      padding: 2.5rem 1rem;
      display: block; } }
  @media (min-width: 1150px) {
    .b-presentations__filter-content {
      padding: 2.5rem 1.5rem; } }
  @media (min-width: 1281px) {
    .b-presentations__filter-content {
      padding: 2.5rem 1rem; } }
  @media (min-width: 1500px) {
    .b-presentations__filter-content {
      padding: 2.5rem 2rem; } }

.b-presentations__filter-subitems {
  display: none; }
  @media (max-width: 950px) {
    .b-presentations__filter-subitems {
      display: none !important; } }
  .b-presentations__filter-subitems .b-presentations__filter-item {
    font-weight: 400;
    margin-top: 0.5rem;
    margin-left: 1rem; }
    .b-presentations__filter-subitems .b-presentations__filter-item:first-child {
      margin-top: 1rem;
      margin-left: 1rem; }
    .b-presentations__filter-subitems .b-presentations__filter-item:last-child {
      margin-top: 0.5rem; }
    .b-presentations__filter-subitems .b-presentations__filter-item::after {
      content: none; }

.b-presentations__filter-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: 700;
  cursor: pointer;
  margin-left: 0.5rem; }
  @media (min-width: 951px) {
    .b-presentations__filter-item {
      margin-left: 0;
      margin-top: 1rem; }
      .b-presentations__filter-item::after {
        content: '';
        width: 11px;
        height: 7px;
        margin-left: auto;
        -webkit-mask-image: url("/images/arrow-select.svg");
                mask-image: url("/images/arrow-select.svg");
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        background-color: #232323;
        -webkit-transition: -webkit-transform 0.2s;
        transition: -webkit-transform 0.2s;
        -o-transition: transform 0.2s;
        transition: transform 0.2s;
        transition: transform 0.2s, -webkit-transform 0.2s; } }
  .b-presentations__filter-item:first-child {
    margin-left: 0; }
  .b-presentations__filter-item:hover {
    color: #00a; }
    .b-presentations__filter-item:hover::after {
      background-color: #00a; }
  .b-presentations__filter-item.active {
    color: #00a;
    pointer-events: none; }
    .b-presentations__filter-item.active::after {
      background-color: #00a;
      -webkit-transform: rotate(0.5turn);
              transform: rotate(0.5turn); }
    .b-presentations__filter-item.active.main {
      pointer-events: all; }
  .b-presentations__filter-item.arrow-hide::after {
    display: none !important; }

@media (max-width: 1920px) {
  .b-presentations__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (max-width: 1280px) {
  .b-presentations__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (max-width: 950px) {
  .b-presentations__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (max-width: 660px) {
  .b-presentations__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (max-width: 450px) {
  .b-presentations__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (max-width: 320px) {
  .b-presentations__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1921px) {
  .b-presentations__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (max-width: 450px) {
  .b-presentations__content {
    width: 100vw !important;
    margin-left: calc((50vw - 50%) * -1) !important;
    margin-right: calc((50vw - 50%) * -1) !important; } }

@media (min-width: 951px) {
  .b-presentations__content {
    margin-top: -3rem !important; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-presentations__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-presentations__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-presentations__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-presentations__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-presentations__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-presentations__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-presentations__content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(66.66667% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1150px) {
  .b-presentations__content {
    margin-top: -2rem !important; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-presentations__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-presentations__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-presentations__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-presentations__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-presentations__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-presentations__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-presentations__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-presentations__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-presentations__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-presentations__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-presentations__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-presentations__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-presentations__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-presentations__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-presentations__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-presentations__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-presentations__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-presentations__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-presentations__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-presentations__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-presentations__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 2rem 1rem;
  min-height: 20rem;
  border-radius: 10px;
  margin-top: 3rem !important; }
  @media (max-width: 1920px) {
    .b-presentations__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-presentations__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-presentations__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-presentations__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-presentations__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-presentations__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-presentations__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-presentations__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-presentations__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-presentations__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-presentations__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-presentations__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-presentations__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-presentations__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 1150px) {
    .b-presentations__item {
      margin-top: 2rem !important; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-presentations__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-presentations__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-presentations__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-presentations__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-presentations__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-presentations__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-presentations__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 1500px) {
    .b-presentations__item {
      padding: 2.5rem 1.5rem; } }
  .b-presentations__item:hover .b-presentations__item-image div {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  .b-presentations__item-link {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 5; }
  .b-presentations__item-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden; }
    .b-presentations__item-image::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: #fff;
      opacity: 0.8;
      z-index: 2; }
    .b-presentations__item-image div {
      width: 100%;
      height: 100%;
      background-position: top right;
      background-size: cover;
      background-repeat: no-repeat;
      -webkit-transition: -webkit-transform 0.2s;
      transition: -webkit-transform 0.2s;
      -o-transition: transform 0.2s;
      transition: transform 0.2s;
      transition: transform 0.2s, -webkit-transform 0.2s; }
    @media (min-width: 451px) {
      .b-presentations__item-image {
        border-radius: 10px; } }
  .b-presentations__item-desc {
    margin-top: 0.25rem; }
  .b-presentations__item-comment {
    margin-top: auto; }
    .b-presentations__item-comment::before {
      display: block;
      content: '';
      width: 4rem;
      height: 1px;
      background-color: #232323;
      margin-top: 1.25rem;
      margin-bottom: 1.25rem; }

.b-presentations__error {
  margin-top: 3rem;
  padding: 0 1rem; }

/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/prompt/prompt.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-prompt {
  background-color: #fff;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  position: relative; }
  .b-prompt__wrapper {
    color: #232323;
    text-align: center;
    line-height: 1.2rem;
    font-size: 0.6rem;
    cursor: default; }
  .b-prompt__window {
    display: none;
    position: absolute;
    z-index: 10;
    left: 0.75rem;
    bottom: 1rem;
    background-color: #fff0e6;
    width: 11.5rem;
    padding: 1.25rem 0.75rem 0.75rem;
    border-radius: 0.25rem;
    -webkit-box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.25);
            box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.25);
    color: #232323 !important; }
  .b-prompt:hover .b-prompt__window {
    display: block; }

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/registration/registration.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-registration {
  width: 100vw !important;
  margin-left: calc((50vw - 50%) * -1) !important;
  margin-right: calc((50vw - 50%) * -1) !important; }
  .b-registration__banner {
    position: relative;
    display: block;
    padding-top: calc((145 / 450) * 100%);
    background: url(/images/registration/back_min.png) left top no-repeat;
    background-size: 100%;
    margin-top: 18px; }
    @media (min-width: 451px) {
      .b-registration__banner {
        padding-top: calc((210 / 660) * 100%);
        background: url(/images/registration/back_mobile.png) left top no-repeat;
        background-size: contain;
        margin-top: 0; } }
    @media (min-width: 661px) {
      .b-registration__banner {
        padding-top: calc((305 / 950) * 100%);
        background: url(/images/registration/back_mobile2.png) left top no-repeat;
        background-size: contain; } }
    @media (min-width: 951px) {
      .b-registration__banner {
        padding-top: calc((410 / 1280) * 100%);
        background: url(/images/registration/back_middle.png) left top no-repeat;
        background-size: contain; } }
    @media (min-width: 1281px) {
      .b-registration__banner {
        padding-top: calc((615 / 1918) * 100%);
        background: url(/images/registration/back_middle2.png) left top no-repeat;
        background-size: contain; } }
    .b-registration__banner::before {
      display: block;
      content: "";
      width: 100%; }
  .b-registration__title {
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.1rem;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1rem;
    font-style: normal;
    font-weight: 500;
    color: #fff0e6; }
    @media (min-width: 451px) {
      .b-registration__title {
        top: 5rem;
        font-size: 1.5rem; } }
    @media (min-width: 700px) {
      .b-registration__title {
        top: 4rem;
        font-size: 1.5rem; } }
    @media (min-width: 661px) {
      .b-registration__title {
        top: 5.2rem;
        font-size: 1.5rem; } }
    @media (min-width: 951px) {
      .b-registration__title {
        top: 6.5rem;
        font-size: 1.7rem; } }
    @media (min-width: 1281px) {
      .b-registration__title {
        top: 8.7rem;
        font-size: 1.8rem; } }
  .b-registration__content {
    padding: 0;
    margin: 0 0 2.8rem; }
    @media (min-width: 451px) {
      .b-registration__content {
        margin-top: -1.8rem; } }
    @media (min-width: 661px) {
      .b-registration__content {
        margin-top: -4.9rem; } }
    @media (min-width: 951px) {
      .b-registration__content {
        margin-top: -7rem; } }
    @media (min-width: 1100px) {
      .b-registration__content {
        margin-top: -9rem; } }
    @media (min-width: 1281px) {
      .b-registration__content {
        margin-top: -10rem; } }
    @media (min-width: 1800px) {
      .b-registration__content {
        margin-top: -16rem; } }
  .b-registration__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .b-registration__container-content {
      width: 100%;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-registration__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-registration__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-registration__container-content {
    margin-left: -12.5px;
    margin-right: -12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-registration__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-registration__container-content {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-registration__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-registration__container-content {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-registration__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-registration__container-content {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-registration__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-registration__container-content {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-registration__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1100px) and (max-width: 1920px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1100px) and (max-width: 1280px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1100px) and (max-width: 950px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1100px) and (max-width: 660px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1100px) and (max-width: 450px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1100px) and (max-width: 320px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1100px) and (min-width: 1921px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1800px) and (max-width: 1920px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1800px) and (max-width: 1280px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1800px) and (max-width: 950px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1800px) and (max-width: 660px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1800px) and (max-width: 450px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1800px) and (max-width: 320px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1800px) and (min-width: 1921px) {
  .b-registration__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    .b-registration__container form {
      width: 100%; }
  .b-registration__form {
    display: block;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    background-color: #fff;
    z-index: 1;
    border: none;
    border-radius: 5px; }
  .b-registration__tabs {
    margin: 0 20px;
    padding: 50px 0 0; }
    @media (min-width: 451px) {
      .b-registration__tabs {
        margin: 0 39px; } }
    @media (min-width: 661px) {
      .b-registration__tabs {
        margin: 0 55px; } }
    @media (min-width: 951px) {
      .b-registration__tabs {
        margin: 0 109px;
        padding: 60px 0 0; } }
    @media (min-width: 1281px) {
      .b-registration__tabs {
        margin: 0 140px;
        padding: 80px 0 0; } }

/*!**************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/restore/restore.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-restore {
  width: 100vw !important;
  margin-left: calc((50vw - 50%) * -1) !important;
  margin-right: calc((50vw - 50%) * -1) !important; }
  .b-restore.success .b-restore__error {
    display: none; }
  .b-restore.success .b-restore__success {
    display: block; }
  .b-restore.success .b-restore__email {
    display: none; }
  .b-restore.success .b-restore__containerbutton {
    display: none; }
  .b-restore.error .b-restore__success {
    display: none; }
  .b-restore.error .b-restore__error {
    display: block; }
  .b-restore__success {
    display: none;
    text-align: center;
    margin: 0;
    padding: 80px 0; }
  .b-restore__successtext {
    font-size: 25px;
    line-height: 35px;
    text-align: center;
    color: #232323;
    font-weight: 500;
    max-width: 520px;
    padding: 40px 0;
    margin: 0 auto; }
  .b-restore__imageok {
    width: 90px;
    height: 90px;
    background: url(/images/auth/check.png) center center no-repeat #00a769;
    border-radius: 50%;
    margin: 0 auto; }
  .b-restore__error {
    display: none;
    text-align: center;
    margin: 0;
    padding: 40px 0 0;
    color: #ff4c62; }
  .b-restore__banner {
    position: relative;
    display: block;
    padding-top: calc((145 / 450) * 100%);
    background: url(/images/auth/back_min.png) left top no-repeat;
    background-size: 100%;
    margin-top: 18px; }
    @media (min-width: 451px) {
      .b-restore__banner {
        padding-top: calc((210 / 660) * 100%);
        background: url(/images/auth/back_mobile.png) left top no-repeat;
        background-size: contain;
        margin-top: 0; } }
    @media (min-width: 661px) {
      .b-restore__banner {
        padding-top: calc((305 / 950) * 100%);
        background: url(/images/auth/back_mobile2.png) left top no-repeat;
        background-size: contain; } }
    @media (min-width: 951px) {
      .b-restore__banner {
        padding-top: calc((410 / 1280) * 100%);
        background: url(/images/auth/back_middle.png) left top no-repeat;
        background-size: contain; } }
    @media (min-width: 1281px) {
      .b-restore__banner {
        padding-top: calc((615 / 1918) * 100%);
        background: url(/images/auth/back_middle2.png) left top no-repeat;
        background-size: contain; } }
    .b-restore__banner::before {
      display: block;
      content: "";
      width: 100%; }
  .b-restore__title {
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.1rem;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1rem;
    font-style: normal;
    font-weight: 500;
    color: #fff0e6; }
    @media (min-width: 451px) {
      .b-restore__title {
        top: 5rem;
        font-size: 1.5rem; } }
    @media (min-width: 661px) {
      .b-restore__title {
        top: 5.2rem;
        font-size: 1.5rem; } }
    @media (min-width: 951px) {
      .b-restore__title {
        top: 6.5rem;
        font-size: 1.7rem; } }
    @media (min-width: 1281px) {
      .b-restore__title {
        top: 8.7rem;
        font-size: 1.8rem; } }
  .b-restore__content {
    padding: 0;
    margin: 0 0 2.8rem; }
    @media (min-width: 451px) {
      .b-restore__content {
        margin-top: -1.8rem; } }
    @media (min-width: 661px) {
      .b-restore__content {
        margin-top: -5.1rem; } }
    @media (min-width: 951px) {
      .b-restore__content {
        margin-top: -7rem; } }
    @media (min-width: 1100px) {
      .b-restore__content {
        margin-top: -9rem; } }
    @media (min-width: 1281px) {
      .b-restore__content {
        margin-top: -10rem; } }
    @media (min-width: 1800px) {
      .b-restore__content {
        margin-top: -12rem; } }
  .b-restore__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .b-restore__container-content {
      width: 100%;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(91.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-restore__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-restore__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-restore__container-content {
    margin-left: -12.5px;
    margin-right: -12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-restore__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-restore__container-content {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-restore__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-restore__container-content {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-restore__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-restore__container-content {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-restore__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-restore__container-content {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-restore__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1100px) and (max-width: 1920px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1100px) and (max-width: 1280px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1100px) and (max-width: 950px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1100px) and (max-width: 660px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1100px) and (max-width: 450px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1100px) and (max-width: 320px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1100px) and (min-width: 1921px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(58.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1800px) and (max-width: 1920px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1800px) and (max-width: 1280px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1800px) and (max-width: 950px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1800px) and (max-width: 660px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1800px) and (max-width: 450px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1800px) and (max-width: 320px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1800px) and (min-width: 1921px) {
  .b-restore__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    .b-restore__container form {
      width: 100%; }
  .b-restore__form {
    display: block;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    background-color: #fff;
    z-index: 1;
    border: none;
    border-radius: 5px; }
    .b-restore__form .link-items {
      margin: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: 100%;
      padding-top: 60px; }
      @media (min-width: 661px) {
        .b-restore__form .link-items {
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center; } }
      @media (min-width: 951px) {
        .b-restore__form .link-items {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row;
          -webkit-box-pack: center !important;
              -ms-flex-pack: center !important;
                  justify-content: center !important; } }
      .b-restore__form .link-items .link-item {
        width: 100%;
        margin: 0;
        margin-bottom: 20px; }
        @media (min-width: 661px) {
          .b-restore__form .link-items .link-item {
            width: 50%; } }
        @media (min-width: 951px) {
          .b-restore__form .link-items .link-item {
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content; } }
        @media (min-width: 951px) {
          .b-restore__form .link-items .link-item:first-child {
            margin-right: 20px; } }
        .b-restore__form .link-items .link-item a {
          font-size: 17px;
          font-weight: 400;
          line-height: 17px;
          letter-spacing: 0em;
          height: 50px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          width: calc(100% - 40px);
          margin: 0 auto;
          background-color: #EAEAEA;
          color: #252525; }
          @media (min-width: 661px) {
            .b-restore__form .link-items .link-item a {
              margin: 0;
              width: 100%;
              padding: 16.5px 0; } }
          @media (min-width: 951px) {
            .b-restore__form .link-items .link-item a {
              padding: 16.5px 30px; } }
          .b-restore__form .link-items .link-item a img {
            margin-left: 5px; }
        .b-restore__form .link-items .link-item .active-button {
          border: 1px solid #0000AA;
          background-color: #E6F3FF; }
  .b-restore__email {
    margin: 0 20px;
    padding: 50px 0 0; }
    @media (min-width: 451px) {
      .b-restore__email {
        margin: 0 39px; } }
    @media (min-width: 661px) {
      .b-restore__email {
        margin: 0 55px; } }
    @media (min-width: 951px) {
      .b-restore__email {
        margin: 0 109px;
        padding: 60px 0 0; } }
    @media (min-width: 1281px) {
      .b-restore__email {
        margin: 0 140px;
        padding: 50px 0 0; } }
    .b-restore__email label {
      display: block;
      font-size: 15px;
      line-height: 21px;
      color: #252525;
      width: 100%; }
      @media (min-width: 451px) {
        .b-restore__email label {
          display: inline-block;
          width: 180px;
          font-size: 15px;
          line-height: 21px; } }
      @media (min-width: 951px) {
        .b-restore__email label {
          font-size: 17px;
          line-height: 24px; } }
      @media (min-width: 1281px) {
        .b-restore__email label {
          font-size: 17px;
          line-height: 24px; } }
    .b-restore__email input {
      background: #f4f4f4;
      border: 1px solid #757373 !important;
      border-radius: 60px;
      padding: 13px 15px;
      width: 100%;
      margin-top: 10px; }
      @media (min-width: 451px) {
        .b-restore__email input {
          display: inline-block;
          width: calc(100% - 190px); } }
      @media (min-width: 951px) {
        .b-restore__email input {
          padding: 17px 20px; } }
  .b-restore__containerbutton {
    margin: 26px auto;
    width: 236px;
    padding-bottom: 30px; }
    @media (min-width: 451px) {
      .b-restore__containerbutton {
        width: 350px; } }
    @media (min-width: 661px) {
      .b-restore__containerbutton {
        width: 350px;
        padding-bottom: 35px; } }
    @media (min-width: 951px) {
      .b-restore__containerbutton {
        width: 420px;
        margin: 36px auto;
        padding-bottom: 50px; } }
    @media (min-width: 1281px) {
      .b-restore__containerbutton {
        width: 420px; } }
  .b-restore__button {
    margin: 0 auto;
    width: 236px;
    height: 50px; }
    @media (min-width: 451px) {
      .b-restore__button {
        display: inline-block;
        width: 192px;
        height: 40px; } }
    @media (min-width: 661px) {
      .b-restore__button {
        display: inline-block; } }
    @media (min-width: 951px) {
      .b-restore__button {
        display: inline-block;
        width: 236px;
        height: 50px; } }
    @media (min-width: 1281px) {
      .b-restore__button {
        display: inline-block;
        width: 236px;
        height: 50px; } }
  .b-restore__politic {
    margin: 25px auto;
    text-align: center; }
    .b-restore__politic a {
      font-size: 14px;
      line-height: 20px;
      color: #9e9d9d;
      text-decoration: underline; }
      @media (min-width: 451px) {
        .b-restore__politic a {
          font-size: 14px;
          line-height: 21px;
          margin-left: 40px; } }
      @media (min-width: 451px) {
        .b-restore__politic a {
          font-size: 14px;
          line-height: 21px;
          margin-left: 30px; } }
    @media (min-width: 451px) {
      .b-restore__politic {
        display: inline-block; } }

/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/search-city/search-city.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-search-city {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .b-search-city h1 {
    margin: 80px 0; }
  .b-search-city__container {
    background-color: #fff;
    padding: 20px 30px; }
    @media (min-width: 951px) {
      .b-search-city__container {
        padding: 40px 80px; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-search-city__container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-search-city__container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-search-city__container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-search-city__container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-search-city__container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-search-city__container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-search-city__container {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
    @media (min-width: 1281px) {
      .b-search-city__container {
        padding: 50px 100px; } }
    @media (min-width: 1400px) {
      .b-search-city__container {
        padding: 60px 120px; } }
    @media (min-width: 1600px) {
      .b-search-city__container {
        padding: 80px 140px; } }
  .b-search-city__search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
    @media (min-width: 661px) {
      .b-search-city__search {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row; } }
  .b-search-city__search-input-wrapper {
    width: 100%;
    margin-right: 0;
    position: relative; }
    @media (min-width: 661px) {
      .b-search-city__search-input-wrapper {
        margin-right: 40px; } }
    .b-search-city__search-input-wrapper::before {
      content: '';
      width: 24px;
      height: 20px;
      background-image: url("/images/search/search-city.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      top: 15px;
      left: 25px; }
    .b-search-city__search-input-wrapper-exit {
      position: absolute;
      width: 1.2rem;
      height: 1rem;
      right: 1.25rem;
      top: 0;
      bottom: 0;
      margin: auto 0;
      background-image: url("/images/icons/exit.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      cursor: pointer; }
  .b-search-city__search-input {
    width: 100%;
    border: none;
    padding: 13px 69px;
    background: #f4f4f4;
    border-radius: 50px; }
    .b-search-city__search-input::-webkit-input-placeholder {
      font-size: 0.85rem;
      color: #575757; }
    .b-search-city__search-input::-moz-placeholder {
      font-size: 0.85rem;
      color: #575757; }
    .b-search-city__search-input:-ms-input-placeholder {
      font-size: 0.85rem;
      color: #575757; }
    .b-search-city__search-input::-ms-input-placeholder {
      font-size: 0.85rem;
      color: #575757; }
    .b-search-city__search-input::placeholder {
      font-size: 0.85rem;
      color: #575757; }
  .b-search-city__search-btn {
    margin-top: 10px; }
    @media (min-width: 661px) {
      .b-search-city__search-btn {
        margin-top: 0; } }
  .b-search-city__btn {
    background: #00a;
    border-radius: 25px;
    padding: 15px 40px;
    color: #fff0e6;
    font-size: 15px;
    font-weight: 500; }
  .b-search-city__items {
    margin-top: 80px;
    -webkit-columns: 1;
       -moz-columns: 1;
            columns: 1;
    -webkit-column-gap: 50px;
       -moz-column-gap: 50px;
            column-gap: 50px;
    -webkit-column-rule: 1px solid #d8d8d8;
       -moz-column-rule: 1px solid #d8d8d8;
            column-rule: 1px solid #d8d8d8; }
    @media (min-width: 951px) {
      .b-search-city__items {
        -webkit-columns: 2;
           -moz-columns: 2;
                columns: 2; } }
    @media (min-width: 1281px) {
      .b-search-city__items {
        -webkit-columns: 3;
           -moz-columns: 3;
                columns: 3; } }
    @media (min-width: 1400px) {
      .b-search-city__items {
        -webkit-column-gap: 100px;
           -moz-column-gap: 100px;
                column-gap: 100px; } }
    @media (min-width: 1600px) {
      .b-search-city__items {
        -webkit-column-gap: 180px;
           -moz-column-gap: 180px;
                column-gap: 180px; } }
  .b-search-city__error {
    margin-top: 10px;
    font-size: 15px;
    display: none; }
    .b-search-city__error.active {
      display: block; }
  .b-search-city__item {
    font-weight: 400;
    font-size: 14px;
    line-height: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: black; }
    .b-search-city__item.hidden {
      display: none; }
    .b-search-city__item span {
      font-weight: 700;
      font-size: 14px;
      line-height: 25px;
      padding-left: 5px; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/sliders/banner-slider/banner-slider.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-banner-slider {
  border-radius: 5px;
  position: relative; }
  .b-banner-slider--hidden-pagination .b-banner-slider__pagination {
    display: none; }
  .b-banner-slider--hidden-pagination .b-banner-slider__container {
    padding-bottom: 0; }
  @media (max-width: 450px) {
    .b-banner-slider {
      width: 100vw !important;
      margin-left: calc((50vw - 50%) * -1) !important;
      margin-right: calc((50vw - 50%) * -1) !important; } }
  .b-banner-slider__container {
    width: 100%;
    height: 100%;
    padding-bottom: 2rem; }
  .b-banner-slider__slide {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto; }
  .b-banner-slider__back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3; }
    .b-banner-slider__back--gradient::after {
      content: "";
      position: absolute;
      width: 100%;
      background-position: right bottom;
      height: 100%;
      border-radius: 5px;
      background-repeat: no-repeat;
      top: 0;
      background-image: url("/images/blue-gradient.png");
      background-size: cover;
      z-index: 2; }
      @media (min-width: 451px) {
        .b-banner-slider__back--gradient::after {
          width: 100%; } }
  .b-banner-slider__content {
    position: relative;
    max-width: 26rem;
    margin: 2rem 1rem 1.5rem;
    z-index: 4; }
    @media (min-width: 451px) {
      .b-banner-slider__content {
        margin: 1.5rem 1rem; } }
    @media (min-width: 951px) {
      .b-banner-slider__content {
        margin: 2.5rem 1.5rem 1.5rem;
        max-width: 36rem; } }
  .b-banner-slider__title {
    color: #fff0e6; }
  .b-banner-slider__desc {
    color: #fff0e6;
    width: 100%;
    height: auto;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 5.5rem;
    margin-top: 1rem; }
    @media (min-width: 451px) {
      .b-banner-slider__desc {
        margin-bottom: 6rem;
        margin-top: 1.5rem; } }
    @media (min-width: 661px) {
      .b-banner-slider__desc {
        margin-bottom: 6.5rem; } }
    @media (min-width: 951px) {
      .b-banner-slider__desc {
        margin-bottom: 7rem; } }
    @media (min-width: 1281px) {
      .b-banner-slider__desc {
        margin-bottom: 10rem; } }
  .b-banner-slider__button {
    position: absolute;
    bottom: 1.5rem;
    height: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: 1rem;
    z-index: 4;
    cursor: pointer; }
    @media (min-width: 951px) {
      .b-banner-slider__button {
        margin-left: 1.5rem; } }
  .b-banner-slider__next {
    display: none;
    right: -3rem;
    width: 2rem;
    height: 2rem;
    -webkit-mask-image: url("/images/icons/arrow-slider.svg");
            mask-image: url("/images/icons/arrow-slider.svg");
    background-color: #9e9d9d;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-transform: rotate(0.5turn);
            transform: rotate(0.5turn); }
    .b-banner-slider__next--hidden {
      display: none !important; }
    .b-banner-slider__next::after {
      content: none; }
    .b-banner-slider__next:hover {
      background-color: #00a; }
    @media (min-width: 951px) {
      .b-banner-slider__next {
        display: block; } }
    @media (min-width: 1281px) {
      .b-banner-slider__next {
        right: -4rem; } }
  .b-banner-slider__prev {
    display: none;
    left: -3rem;
    width: 2rem;
    height: 2rem;
    -webkit-mask-image: url("/images/icons/arrow-slider.svg");
            mask-image: url("/images/icons/arrow-slider.svg");
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    background-color: #9e9d9d; }
    .b-banner-slider__prev--hidden {
      display: none !important; }
    .b-banner-slider__prev::after {
      content: none; }
    .b-banner-slider__prev:hover {
      background-color: #00a; }
    @media (min-width: 951px) {
      .b-banner-slider__prev {
        display: block; } }
    @media (min-width: 1281px) {
      .b-banner-slider__prev {
        left: -4rem; } }

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/sliders/comments-slider/comments-slider.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-comments-slider {
  padding-bottom: 2rem; }
  .b-comments-slider__title {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-comments-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-comments-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-comments-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-comments-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-comments-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-comments-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-comments-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-comments-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-comments-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-comments-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-comments-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-comments-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-comments-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-comments-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-comments-slider video {
    width: 100%;
    height: auto;
    max-height: 100%; }
  .b-comments-slider__desc {
    text-align: center;
    margin-bottom: 2rem;
    margin-left: auto !important;
    margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-comments-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-comments-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-comments-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-comments-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-comments-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-comments-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-comments-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-comments-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-comments-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-comments-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-comments-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-comments-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-comments-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-comments-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-comments-slider__slider {
    position: relative; }
  .b-comments-slider__container {
    width: 100%; }
  .b-comments-slider__wrapper {
    width: 100%; }
  .b-comments-slider__slide {
    position: relative;
    overflow: hidden;
    padding: 2rem 0;
    background-color: #fff;
    border-radius: 5px;
    height: auto; }
    .b-comments-slider__slide-content {
      position: relative;
      padding-left: 1rem;
      padding-right: 1rem;
      max-height: 17rem; }
      .b-comments-slider__slide-content::after {
        content: '';
        display: block;
        position: -webkit-sticky;
        position: sticky;
        width: 100%;
        height: 1rem;
        bottom: 0;
        background-image: -webkit-gradient(linear, left bottom, left top, from(white), to(rgba(255, 255, 255, 0)));
        background-image: -o-linear-gradient(bottom, white 0%, rgba(255, 255, 255, 0) 100%);
        background-image: linear-gradient(to top, white 0%, rgba(255, 255, 255, 0) 100%); }
    @media (min-width: 951px) {
      .b-comments-slider__slide {
        padding: 2rem 0 3rem; }
        .b-comments-slider__slide-content {
          max-height: 25rem; } }
    @media (min-width: 1281px) {
      .b-comments-slider__slide {
        padding: 2.5rem 0 4rem; }
        .b-comments-slider__slide-content {
          padding-left: 1.35rem;
          padding-right: 1.35rem; } }
    .b-comments-slider__slide-name {
      color: #00a; }
    .b-comments-slider__slide-position {
      font-weight: 700;
      margin-bottom: 1rem; }
      @media (min-width: 951px) {
        .b-comments-slider__slide-position {
          margin-bottom: 1.5rem; } }
  .b-comments-slider__youtube {
    position: relative;
    padding: 0 0 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 0.75rem;
    border-radius: 5px; }
    .b-comments-slider__youtube iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
  .b-comments-slider__preview {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2; }
    .b-comments-slider__preview.active::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #232323;
      opacity: 0.8; }
    .b-comments-slider__preview.active .b-comments-slider__preview-play {
      display: none; }
    .b-comments-slider__preview-play {
      width: 5rem;
      height: 5rem;
      background-image: url("/images/icons/play.svg");
      background-size: contain;
      background-repeat: no-repeat;
      z-index: 2;
      -webkit-transition: -webkit-transform 0.6s;
      transition: -webkit-transform 0.6s;
      -o-transition: transform 0.6s;
      transition: transform 0.6s;
      transition: transform 0.6s, -webkit-transform 0.6s;
      cursor: pointer; }
      .b-comments-slider__preview-play:hover {
        -webkit-transform: scale(1.2);
                transform: scale(1.2); }
  .b-comments-slider__pagination {
    margin-right: auto;
    margin-left: auto;
    margin-top: 1rem;
    left: 0;
    right: 0; }
    .b-comments-slider__pagination span {
      margin-right: 0.75rem; }
  .b-comments-slider__next {
    display: none;
    right: -3rem;
    width: 2rem;
    height: 2rem;
    -webkit-mask-image: url("/images/icons/arrow-slider.svg");
            mask-image: url("/images/icons/arrow-slider.svg");
    background-color: #9e9d9d;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-transform: rotate(0.5turn);
            transform: rotate(0.5turn); }
    .b-comments-slider__next::after {
      content: none; }
    .b-comments-slider__next:hover {
      background-color: #00a; }
    @media (min-width: 951px) {
      .b-comments-slider__next {
        display: block; } }
    @media (min-width: 1281px) {
      .b-comments-slider__next {
        right: -4rem; } }
  .b-comments-slider__prev {
    display: none;
    left: -3rem;
    width: 2rem;
    height: 2rem;
    -webkit-mask-image: url("/images/icons/arrow-slider.svg");
            mask-image: url("/images/icons/arrow-slider.svg");
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    background-color: #9e9d9d; }
    .b-comments-slider__prev::after {
      content: none; }
    .b-comments-slider__prev:hover {
      background-color: #00a; }
    @media (min-width: 951px) {
      .b-comments-slider__prev {
        display: block; } }
    @media (min-width: 1281px) {
      .b-comments-slider__prev {
        left: -4rem; } }

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/sliders/gallery-slider/gallery-slider.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-gallery-slider--hidden-pagination .b-gallery-slider__pagination {
  display: none; }

.b-gallery-slider--hidden-pagination .b-gallery-slider__swiper {
  padding-bottom: 0; }

.b-gallery-slider--hidden-arrows .b-gallery-slider__next {
  display: none; }

.b-gallery-slider--hidden-arrows .b-gallery-slider__prev {
  display: none; }

@media (min-width: 661px) {
  .b-gallery-slider--double .b-gallery-slider__main {
    margin-left: auto !important;
    margin-right: auto !important; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(75% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }

@media (min-width: 951px) {
  .b-gallery-slider--double .b-gallery-slider__main {
    margin-left: 0 !important;
    margin-right: 0 !important; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }

@media (min-width: 1281px) {
  .b-gallery-slider--double .b-gallery-slider__main {
    margin-left: auto !important;
    margin-right: auto !important; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-gallery-slider--double .b-gallery-slider__main {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(83.33333% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }

.b-gallery-slider__main {
  position: relative; }

.b-gallery-slider__swiper {
  padding-bottom: 2rem; }

.b-gallery-slider__slide {
  text-align: center; }

.b-gallery-slider__next {
  display: none;
  right: -3rem;
  width: 2rem;
  height: 2rem;
  -webkit-mask-image: url("/images/icons/arrow-slider.svg");
          mask-image: url("/images/icons/arrow-slider.svg");
  background-color: #9e9d9d;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-transform: rotate(0.5turn);
          transform: rotate(0.5turn); }
  .b-gallery-slider__next--hidden {
    display: none !important; }
  .b-gallery-slider__next::after {
    content: none; }
  .b-gallery-slider__next:hover {
    background-color: #00a; }
  @media (min-width: 951px) {
    .b-gallery-slider__next {
      display: block; } }
  @media (min-width: 1281px) {
    .b-gallery-slider__next {
      right: -4rem; } }

.b-gallery-slider__prev {
  display: none;
  left: -3rem;
  width: 2rem;
  height: 2rem;
  -webkit-mask-image: url("/images/icons/arrow-slider.svg");
          mask-image: url("/images/icons/arrow-slider.svg");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: #9e9d9d; }
  .b-gallery-slider__prev--hidden {
    display: none !important; }
  .b-gallery-slider__prev::after {
    content: none; }
  .b-gallery-slider__prev:hover {
    background-color: #00a; }
  @media (min-width: 951px) {
    .b-gallery-slider__prev {
      display: block; } }
  @media (min-width: 1281px) {
    .b-gallery-slider__prev {
      left: -4rem; } }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/sliders/info-slider/info-slider.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
@-webkit-keyframes shadow {
  from {
    -webkit-transform: translateY(2rem);
            transform: translateY(2rem);
    opacity: 0; }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1; } }
@keyframes shadow {
  from {
    -webkit-transform: translateY(2rem);
            transform: translateY(2rem);
    opacity: 0; }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1; } }

.b-layout__content {
  overflow: hidden; }

.b-info-slider__title {
  text-align: center;
  margin-bottom: 2rem; }

.b-info-slider__swiper-outer {
  position: relative; }

.b-info-slider__sliders-titles-outer {
  display: none;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 20px; }
  @media (min-width: 951px) {
    .b-info-slider__sliders-titles-outer {
      display: block; } }

.b-info-slider__sliders-titles {
  display: inline-block; }

.b-info-slider__sliders-titles-item {
  display: inline-block;
  text-align: center;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer; }

.b-info-slider__sliders-titles .swiper-slide {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  text-align: center; }

.b-info-slider__sliders-titles-item.active, .b-info-slider__sliders-titles-item.fix-active {
  -webkit-box-shadow: 0px 16px 16px -8px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05);
          box-shadow: 0px 16px 16px -8px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05);
  border: 1px solid #EAEAEA;
  background: #FFF; }

.b-info-slider__swiper-container {
  overflow: visible; }
  .b-info-slider__swiper-container .swiper-slide {
    border-radius: 20px;
    background-color: #fff;
    height: auto; }
  @media (min-width: 951px) {
    .b-info-slider__swiper-container {
      overflow: hidden; } }

.b-info-slider__slide-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  min-height: 100%; }

.b-info-slider__sliders-titles-items {
  text-align: center;
  margin-bottom: 1rem; }
  @media (min-width: 951px) {
    .b-info-slider__sliders-titles-items {
      display: none; } }

.b-info-slider__slide-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 12.5px; }
  .b-info-slider__slide-col:first-child {
    padding: 20px; }
  .b-info-slider__slide-col .slide-col-img {
    position: relative;
    height: 100%; }
  @media (min-width: 951px) {
    .b-info-slider__slide-col {
      min-height: 460px;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: 50%; }
      .b-info-slider__slide-col:first-child {
        padding: 25px; }
      .b-info-slider__slide-col .slide-col-img img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        -o-object-fit: cover;
           object-fit: cover; } }
  @media (min-width: 1281px) {
    .b-info-slider__slide-col:first-child {
      padding: 40px; } }

.b-info-slider__slide-title {
  margin-bottom: 20px; }

.b-info-slider__slide-title {
  text-align: center; }
  @media (min-width: 951px) {
    .b-info-slider__slide-title {
      text-align: left; } }

.b-info-slider__slide-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 40px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .b-info-slider__slide-bottom p {
    width: 100%;
    margin-top: 20px; }
  @media (min-width: 951px) {
    .b-info-slider__slide-bottom {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start; }
      .b-info-slider__slide-bottom p {
        margin-top: 0;
        width: auto; } }

.b-info-slider__swiper-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px; }

.b-info-slider__button {
  height: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer; }
  .b-info-slider__button .b-button {
    min-width: 150px; }
  @media (min-width: 951px) {
    .b-info-slider__button {
      margin-right: 1rem; } }

.b-info-slider__pagination {
  left: 0;
  right: 0; }
  .b-info-slider__pagination .swiper-pagination-bullet {
    margin: 0 5px; }

.b-info-slider__next {
  display: none;
  right: -3rem;
  width: 2rem;
  height: 2rem;
  -webkit-mask-image: url("/images/icons/arrow-slider.svg");
          mask-image: url("/images/icons/arrow-slider.svg");
  background-color: #9e9d9d;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-transform: rotate(0.5turn);
          transform: rotate(0.5turn); }
  .b-info-slider__next--hidden {
    display: none !important; }
  .b-info-slider__next::after {
    content: none; }
  .b-info-slider__next:hover {
    background-color: #00a; }
  @media (min-width: 951px) {
    .b-info-slider__next {
      display: block; } }
  @media (min-width: 1281px) {
    .b-info-slider__next {
      right: -4rem; } }

.b-info-slider__prev {
  display: none;
  left: -3rem;
  width: 2rem;
  height: 2rem;
  -webkit-mask-image: url("/images/icons/arrow-slider.svg");
          mask-image: url("/images/icons/arrow-slider.svg");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: #9e9d9d; }
  .b-info-slider__prev--hidden {
    display: none !important; }
  .b-info-slider__prev::after {
    content: none; }
  .b-info-slider__prev:hover {
    background-color: #00a; }
  @media (min-width: 951px) {
    .b-info-slider__prev {
      display: block; } }
  @media (min-width: 1281px) {
    .b-info-slider__prev {
      left: -4rem; } }

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/sliders/medic-slider/medic-slider.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-medic-slider {
  position: relative; }
  .b-medic-slider-outer {
    position: relative;
    padding: 2rem 0; }
    @media (min-width: 451px) {
      .b-medic-slider-outer {
        padding: 2.5rem 0; } }
    @media (min-width: 661px) {
      .b-medic-slider-outer {
        padding: 3rem 0; } }
    @media (min-width: 951px) {
      .b-medic-slider-outer {
        padding: 6rem 0; } }
    @media (min-width: 1281px) {
      .b-medic-slider-outer {
        padding: 8rem 0; } }
  .b-medic-slider-outer:before {
    content: '';
    border-radius: 1rem;
    position: absolute;
    background: #4347B2 url(/images/medic-bg.jpg) no-repeat right center;
    background-size: cover;
    height: 500px;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: -1rem;
    right: -1rem; }
    @media (min-width: 451px) {
      .b-medic-slider-outer:before {
        left: -1.5rem;
        right: -1.5rem; } }
    @media (min-width: 661px) {
      .b-medic-slider-outer:before {
        border-radius: 2rem;
        height: auto;
        left: -2.5rem;
        right: -2.5rem; } }
    @media (min-width: 951px) {
      .b-medic-slider-outer:before {
        left: -4rem;
        right: -4rem; } }
    @media (min-width: 1281px) {
      .b-medic-slider-outer:before {
        left: -7rem;
        right: -7rem; } }
  .b-medic-slider--hidden-pagination .b-medic-slider__pagination {
    display: none; }
  .b-medic-slider--hidden-pagination .b-medic-slider__slider {
    padding-bottom: 0; }
  .b-medic-slider--hidden-arrows .b-medic-slider__next {
    display: none; }
  .b-medic-slider--hidden-arrows .b-medic-slider__prev {
    display: none; }
  .b-medic-slider__desc {
    margin-bottom: 2rem;
    margin-top: 1.5rem;
    font-size: .75rem; }
  .b-medic-slider__slider {
    position: relative; }
  .b-medic-slider__container {
    width: 100%;
    height: 100%;
    padding-bottom: 1rem;
    opacity: 0;
    overflow: visible; }
    .b-medic-slider__container.swiper-container-initialized {
      opacity: 1; }
    @media (min-width: 1600px) {
      .b-medic-slider__container {
        overflow: hidden; } }
  .b-medic-slider__slide {
    height: auto; }
    @media (min-width: 661px) {
      .b-medic-slider__slide {
        width: 21rem; } }
    @media (min-width: 951px) {
      .b-medic-slider__slide {
        width: 26rem; } }
    @media (min-width: 1600px) {
      .b-medic-slider__slide {
        width: auto; } }
    .b-medic-slider__slide-container {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      height: 100%;
      border-radius: 1rem;
      padding: 1rem;
      margin-top: 1rem; }
    .b-medic-slider__slide-title {
      pointer-events: none;
      margin-bottom: .5rem; }
      @media (min-width: 661px) {
        .b-medic-slider__slide-title {
          margin-bottom: 0.75rem; } }
      @media (min-width: 951px) {
        .b-medic-slider__slide-title {
          margin-bottom: 1rem; } }
    .b-medic-slider__slide-image {
      margin-bottom: 2rem; }
      @media (min-width: 661px) {
        .b-medic-slider__slide-image {
          margin-bottom: 3rem; } }
      @media (min-width: 951px) {
        .b-medic-slider__slide-image {
          margin-bottom: 4rem; } }
    .b-medic-slider__slide-desc {
      margin-bottom: 1.5rem; }
    .b-medic-slider__slide-button {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-top: auto;
      width: 12rem;
      height: 1.8rem; }
      @media (min-width: 451px) {
        .b-medic-slider__slide-button {
          width: auto; } }
  .b-medic-slider__swiper-arrows {
    display: none;
    text-align: right; }
    @media (min-width: 951px) {
      .b-medic-slider__swiper-arrows {
        display: block; } }
  .b-medic-slider__prev:not(.swiper-button-lock), .b-medic-slider__next:not(.swiper-button-lock) {
    position: static;
    width: 2rem;
    height: 2rem;
    display: inline-block !important;
    margin-left: .7rem;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0C31.0457 0 40 8.9543 40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0ZM23.9424 11.0576C23.4217 10.5369 22.5783 10.5369 22.0576 11.0576L14.0576 19.0576C13.5369 19.5783 13.5369 20.4217 14.0576 20.9424L22.0576 28.9424C22.5783 29.4631 23.4217 29.4631 23.9424 28.9424C24.4631 28.4217 24.4631 27.5783 23.9424 27.0576L16.8848 20L23.9424 12.9424C24.4631 12.4217 24.4631 11.5783 23.9424 11.0576Z' fill='white'/%3E%3C/svg%3E%0A");
    opacity: .5; }
    .b-medic-slider__prev:not(.swiper-button-lock).swiper-button-disabled, .b-medic-slider__next:not(.swiper-button-lock).swiper-button-disabled {
      opacity: .3; }
    .b-medic-slider__prev:not(.swiper-button-lock)::after, .b-medic-slider__next:not(.swiper-button-lock)::after {
      content: none; }
    .b-medic-slider__prev:not(.swiper-button-lock):hover, .b-medic-slider__next:not(.swiper-button-lock):hover {
      opacity: 1; }
  .b-medic-slider__next {
    -webkit-transform: rotate(0.5turn);
            transform: rotate(0.5turn); }
  @media (max-width: 660px) {
    .b-medic-slider__container {
      opacity: 1; }
    .b-medic-slider__slide-container {
      background: #232323 !important; }
    .b-medic-slider .swiper-wrapper {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; } }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/sliders/news-slider/news-slider.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-news-slider {
  position: relative; }
  .b-news-slider--hidden-pagination .b-news-slider__pagination {
    display: none; }
  .b-news-slider--hidden-pagination .b-news-slider__slider {
    padding-bottom: 0; }
  .b-news-slider--hidden-arrows .b-news-slider__next {
    display: none; }
  .b-news-slider--hidden-arrows .b-news-slider__prev {
    display: none; }
  .b-news-slider__head {
    text-align: center; }
    @media (min-width: 951px) {
      .b-news-slider__head {
        height: 3.5rem; } }
  .b-news-slider__slide {
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 30px;
    margin-bottom: 30px;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: -webkit-box-shadow .1s ease-out;
    transition: -webkit-box-shadow .1s ease-out;
    -o-transition: box-shadow .1s ease-out;
    transition: box-shadow .1s ease-out;
    transition: box-shadow .1s ease-out, -webkit-box-shadow .1s ease-out; }
    @media (min-width: 451px) {
      .b-news-slider__slide.swiper-slide-active + .swiper-slide {
        opacity: 1; } }
    @media (min-width: 661px) {
      .b-news-slider__slide {
        border-radius: 20px; } }
    @media (min-width: 951px) {
      .b-news-slider__slide:hover {
        color: #0000AA;
        background: -webkit-gradient(linear, left top, right top, from(#FFF), to(#EBEDEE));
        background: -o-linear-gradient(left, #FFF 0%, #EBEDEE 100%);
        background: linear-gradient(90deg, #FFF 0%, #EBEDEE 100%); } }
  .b-news-slider__link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
  .b-news-slider__image {
    width: 100%;
    height: 8rem;
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover; }
  .b-news-slider__content {
    padding: 1rem .5rem; }
    @media (min-width: 661px) {
      .b-news-slider__content {
        padding: 1.5rem 1rem; } }
    @media (min-width: 951px) {
      .b-news-slider__content {
        padding: 1.5rem; } }
  .b-news-slider__title {
    overflow: hidden;
    margin-top: 0.25rem;
    min-height: 2.5rem;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    /* Число отображаемых строк */
    display: -webkit-box;
    /* Включаем флексбоксы */
    -webkit-box-orient: vertical;
    /* Вертикальная ориентация */ }
  .b-news-slider__desc {
    overflow: hidden;
    margin-top: 0.5rem;
    height: 2.5rem;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    /* Число отображаемых строк */
    display: -webkit-box;
    /* Включаем флексбоксы */
    -webkit-box-orient: vertical;
    /* Вертикальная ориентация */ }
  .b-news-slider__date {
    text-align: right;
    color: #878787;
    font-size: .85rem; }
  .b-news-slider__pagination {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0.5rem;
    left: 0;
    right: 0; }
    .b-news-slider__pagination span {
      margin-right: 0.75rem; }
  .b-news-slider__next {
    display: none;
    right: -3rem;
    width: 2rem;
    height: 2rem;
    -webkit-mask-image: url("/images/icons/arrow-slider.svg");
            mask-image: url("/images/icons/arrow-slider.svg");
    background-color: #9e9d9d;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-transform: rotate(0.5turn);
            transform: rotate(0.5turn); }
    .b-news-slider__next::after {
      content: none; }
    .b-news-slider__next:hover {
      background-color: #00a; }
    @media (min-width: 951px) {
      .b-news-slider__next {
        display: block; } }
    @media (min-width: 1281px) {
      .b-news-slider__next {
        right: -4rem; } }
  .b-news-slider__prev {
    display: none;
    left: -3rem;
    width: 2rem;
    height: 2rem;
    -webkit-mask-image: url("/images/icons/arrow-slider.svg");
            mask-image: url("/images/icons/arrow-slider.svg");
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    background-color: #9e9d9d; }
    .b-news-slider__prev::after {
      content: none; }
    .b-news-slider__prev:hover {
      background-color: #00a; }
    @media (min-width: 951px) {
      .b-news-slider__prev {
        display: block; } }
    @media (min-width: 1281px) {
      .b-news-slider__prev {
        left: -4rem; } }

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/sliders/numbered-slider/numbered-slider.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-numbered-slider {
  position: relative; }
  .b-numbered-slider--hidden-pagination .b-numbered-slider__pagination {
    display: none; }
  .b-numbered-slider--hidden-pagination .b-numbered-slider__slider {
    padding-bottom: 0; }
  .b-numbered-slider--hidden-arrows .b-numbered-slider__next {
    display: none; }
  .b-numbered-slider--hidden-arrows .b-numbered-slider__prev {
    display: none; }
  .b-numbered-slider__container {
    position: relative;
    opacity: 0; }
    .b-numbered-slider__container.swiper-container-initialized {
      opacity: 1; }
  .b-numbered-slider__wrapper {
    position: relative; }
  .b-numbered-slider__slide {
    position: relative;
    height: auto;
    padding: 5rem 1rem 1.5rem; }
    @media (min-width: 1281px) {
      .b-numbered-slider__slide {
        padding: 5rem 1.5rem 2.5rem; } }
  .b-numbered-slider__back {
    position: absolute;
    width: 100%;
    height: 85%;
    left: 0;
    bottom: 0;
    z-index: 0;
    opacity: 0.6;
    border-radius: 5px; }
  .b-numbered-slider__title {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    z-index: 1; }
  .b-numbered-slider__number {
    position: absolute;
    right: 1.5rem;
    top: 0;
    margin-left: auto;
    font-size: 8.4rem;
    line-height: 5.5rem;
    font-weight: 700; }
  .b-numbered-slider__desc {
    position: relative;
    margin-top: 1rem; }
  .b-numbered-slider__pagination {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0.5rem;
    left: 0;
    right: 0; }
    .b-numbered-slider__pagination span {
      margin-right: 0.75rem; }
  .b-numbered-slider__next {
    display: none;
    right: -3rem;
    width: 2rem;
    height: 2rem;
    -webkit-mask-image: url("/images/icons/arrow-slider.svg");
            mask-image: url("/images/icons/arrow-slider.svg");
    background-color: #9e9d9d;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-transform: rotate(0.5turn);
            transform: rotate(0.5turn); }
    .b-numbered-slider__next::after {
      content: none; }
    .b-numbered-slider__next:hover {
      background-color: #00a; }
    @media (min-width: 951px) {
      .b-numbered-slider__next {
        display: block; } }
    @media (min-width: 1281px) {
      .b-numbered-slider__next {
        right: -4rem; } }
  .b-numbered-slider__prev {
    display: none;
    left: -3rem;
    width: 2rem;
    height: 2rem;
    -webkit-mask-image: url("/images/icons/arrow-slider.svg");
            mask-image: url("/images/icons/arrow-slider.svg");
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    background-color: #9e9d9d; }
    .b-numbered-slider__prev::after {
      content: none; }
    .b-numbered-slider__prev:hover {
      background-color: #00a; }
    @media (min-width: 951px) {
      .b-numbered-slider__prev {
        display: block; } }
    @media (min-width: 1281px) {
      .b-numbered-slider__prev {
        left: -4rem; } }

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/sliders/report-slider/report-slider.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-report-slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .b-report-slider-poster {
    margin-bottom: 16px;
    width: 100%;
    min-height: 100%;
    padding: 20px;
    background: -webkit-gradient(linear, left top, right top, from(#FFF0E6), to(#E6F3FF));
    background: -o-linear-gradient(left, #FFF0E6, #E6F3FF);
    background: linear-gradient(to right, #FFF0E6, #E6F3FF);
    display: none; }
    .b-report-slider-poster-content {
      display: none; }
      @media (min-width: 951px) {
        .b-report-slider-poster-content {
          display: block; } }
    @media (min-width: 951px) {
      .b-report-slider-poster .b-report-slider-list-item__desc {
        display: none; } }
    @media (min-width: 951px) {
      .b-report-slider-poster {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: calc(55% - 40px);
        margin-right: 40px; } }
    @media (min-width: 1281px) {
      .b-report-slider-poster {
        width: calc(66.666% - 40px);
        margin-right: 40px; } }
  .b-report-slider-list {
    width: 100%;
    font-size: .7rem; }
    @media (min-width: 951px) {
      .b-report-slider-list {
        width: 45%; } }
    @media (min-width: 1281px) {
      .b-report-slider-list {
        width: 33.333%; } }
    .b-report-slider-list-item {
      padding: 20px 32px;
      border-radius: 5px;
      background-color: #fff;
      margin-bottom: 20px;
      cursor: pointer; }
      .b-report-slider-list-item__title {
        font-size: .85rem;
        font-weight: 700;
        position: relative;
        padding-right: 26px; }
        .b-report-slider-list-item__title:after {
          content: '';
          position: absolute;
          width: 30px;
          height: 30px;
          background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 10L15.0025 20L24.5 10' stroke='%23252525' stroke-width='2'/%3E%3C/svg%3E%0A");
          right: -4px;
          top: 50%;
          -webkit-transform: translateY(-50%);
                  transform: translateY(-50%); }
      .b-report-slider-list-item--opened {
        background: #E6F3FF; }
      .b-report-slider-list-item--opened .b-report-slider-list-item__title:after {
        -webkit-transform: translateY(-50%) rotate(180deg);
                transform: translateY(-50%) rotate(180deg); }
      .b-report-slider-list-item-content {
        display: none;
        margin-top: 20px; }
        .b-report-slider-list-item-content-img {
          text-align: center; }
        @media (min-width: 951px) {
          .b-report-slider-list-item-content img {
            display: none; } }
        .b-report-slider-list-item--opened .b-report-slider-list-item-content {
          display: block; }
      .b-report-slider-list-item__desc {
        font-size: .7rem;
        position: relative;
        margin-top: 20px; }
        .b-report-slider-list-item__desc p,
        .b-report-slider-list-item__desc li {
          font-size: .7rem !important;
          line-height: 1.4; }
        .b-report-slider-list-item__desc .marker-list,
        .b-report-slider-list-item__desc ol > li {
          margin-left: 0; }

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/sliders/services-slider/services-slider.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-services-slider {
  position: relative; }
  .b-services-slider--hidden-pagination .b-services-slider__pagination {
    display: none; }
  .b-services-slider--hidden-pagination .b-services-slider__slider {
    padding-bottom: 0; }
  .b-services-slider--hidden-arrows .b-services-slider__next {
    display: none; }
  .b-services-slider--hidden-arrows .b-services-slider__prev {
    display: none; }
  .b-services-slider__title {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-services-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-services-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-services-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-services-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-services-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-services-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-services-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-services-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-services-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-services-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-services-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-services-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-services-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-services-slider__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-services-slider__desc {
    text-align: center;
    margin-bottom: 2rem;
    margin-left: auto !important;
    margin-right: auto !important; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-services-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-services-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-services-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-services-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-services-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-services-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-services-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-services-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-services-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-services-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-services-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-services-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-services-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-services-slider__desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    @media (min-width: 451px) {
      .b-services-slider__desc {
        margin-bottom: 2.5rem; } }
    @media (min-width: 661px) {
      .b-services-slider__desc {
        margin-bottom: 3rem; } }
    @media (min-width: 951px) {
      .b-services-slider__desc {
        margin-bottom: 3.5rem; } }
    @media (min-width: 1281px) {
      .b-services-slider__desc {
        margin-bottom: 4rem; } }
  .b-services-slider__slider {
    position: relative;
    padding-bottom: 2rem; }
  .b-services-slider__container {
    width: 100%;
    height: 100%;
    padding-bottom: 1rem;
    opacity: 0; }
    .b-services-slider__container.swiper-container-initialized {
      opacity: 1; }
  .b-services-slider__slide {
    height: auto; }
    .b-services-slider__slide-container {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      height: 100%;
      border-radius: 5px;
      padding-bottom: 0.05rem;
      margin-top: 1rem;
      background-size: 60% auto;
      background-repeat: no-repeat;
      background-position: right 60%; }
      .b-services-slider__slide-container--type_big {
        background-size: auto;
        background-position: right 55%; }
    .b-services-slider__slide-tag {
      position: absolute;
      padding-left: 1.1rem;
      padding-right: 1.1rem;
      height: 1.2rem;
      line-height: 1rem;
      top: -0.6rem;
      left: 1rem;
      border-radius: 1000px;
      font-size: 0.85rem; }
    .b-services-slider__slide-title {
      width: auto;
      color: #232323;
      margin-right: 1rem;
      padding-top: 1.5rem;
      margin-left: 1rem;
      margin-bottom: 0.5rem;
      pointer-events: none;
      cursor: text; }
      @media (min-width: 661px) {
        .b-services-slider__slide-title {
          margin-bottom: 0.75rem; } }
      @media (min-width: 951px) {
        .b-services-slider__slide-title {
          margin-bottom: 1rem; } }
    .b-services-slider__slide-image {
      text-align: end;
      margin-top: auto; }
    .b-services-slider__slide-content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      height: 100%; }
    .b-services-slider__slide-left {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: 100%; }
      .b-services-slider__slide-left-basket {
        display: block; }
        @media (min-width: 1600px) {
          .b-services-slider__slide-left-basket {
            display: none; } }
        .b-services-slider__slide-left-basket .b-services-slider__slide-price {
          margin-left: 1rem; }
        .b-services-slider__slide-left-basket .b-services-slider__slide-basket {
          margin-left: 1rem;
          margin-bottom: 0.5rem; }
    .b-services-slider__slide-right {
      display: none;
      margin: auto 1rem 1rem auto;
      text-align: center; }
      @media (min-width: 1600px) {
        .b-services-slider__slide-right {
          display: block; } }
    .b-services-slider__slide-basket {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-top: 0.75rem;
      height: 1.5rem; }
    .b-services-slider__slide-price {
      font-size: 1.85rem;
      color: #00a;
      font-weight: 700; }
    .b-services-slider__slide-desc {
      min-height: 4.5rem;
      margin-left: 1rem;
      margin-right: 1rem;
      margin-bottom: 1.5rem; }
      .b-services-slider__slide-desc.with-image {
        min-height: auto;
        margin-bottom: 0; }
    .b-services-slider__slide-button {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-top: auto;
      margin-bottom: 1rem;
      margin-left: 1rem; }
  .b-services-slider__pagination {
    margin-right: auto;
    margin-left: auto;
    margin-top: 0.5rem;
    left: 0;
    right: 0; }
    .b-services-slider__pagination span {
      margin-right: 0.75rem; }
  .b-services-slider__next {
    display: none;
    right: -3rem;
    width: 2rem;
    height: 2rem;
    -webkit-mask-image: url("/images/icons/arrow-slider.svg");
            mask-image: url("/images/icons/arrow-slider.svg");
    background-color: #9e9d9d;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-transform: rotate(0.5turn);
            transform: rotate(0.5turn); }
    .b-services-slider__next::after {
      content: none; }
    .b-services-slider__next:hover {
      background-color: #00a; }
    @media (min-width: 951px) {
      .b-services-slider__next {
        display: block; } }
    @media (min-width: 1281px) {
      .b-services-slider__next {
        right: -4rem; } }
  .b-services-slider__prev {
    display: none;
    left: -3rem;
    width: 2rem;
    height: 2rem;
    -webkit-mask-image: url("/images/icons/arrow-slider.svg");
            mask-image: url("/images/icons/arrow-slider.svg");
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    background-color: #9e9d9d; }
    .b-services-slider__prev::after {
      content: none; }
    .b-services-slider__prev:hover {
      background-color: #00a; }
    @media (min-width: 951px) {
      .b-services-slider__prev {
        display: block; } }
    @media (min-width: 1281px) {
      .b-services-slider__prev {
        left: -4rem; } }

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/sliders/video-slider/video-slider.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-video-slider__title {
  text-align: center; }

@media (max-width: 450px) and (max-width: 1920px) {
  .b-video-slider__player {
    margin-left: -7rem !important;
    margin-right: -7rem !important; } }

@media (max-width: 450px) and (max-width: 1280px) {
  .b-video-slider__player {
    margin-left: -4rem !important;
    margin-right: -4rem !important; } }

@media (max-width: 450px) and (max-width: 950px) {
  .b-video-slider__player {
    margin-left: -2.5rem !important;
    margin-right: -2.5rem !important; } }

@media (max-width: 450px) and (max-width: 660px) {
  .b-video-slider__player {
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important; } }

@media (max-width: 450px) and (max-width: 450px) {
  .b-video-slider__player {
    margin-left: -1rem !important;
    margin-right: -1rem !important; } }

@media (max-width: 450px) and (max-width: 320px) {
  .b-video-slider__player {
    margin-left: -1rem !important;
    margin-right: -1rem !important; } }

@media (max-width: 450px) and (min-width: 1920px) {
  .b-video-slider__player {
    margin-left: -7rem !important;
    margin-right: -7rem !important; } }

.b-video-slider__video {
  position: relative;
  padding: 0 0 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 0.75rem;
  border-radius: 5px; }
  .b-video-slider__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.b-video-slider__preview {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2; }
  .b-video-slider__preview.active::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #232323;
    opacity: 0.8; }
  .b-video-slider__preview.active .b-video-slider__preview-play {
    display: none; }
  .b-video-slider__preview-play {
    width: 5rem;
    height: 5rem;
    background-image: url("/images/icons/play.svg");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    -webkit-transition: -webkit-transform 0.6s;
    transition: -webkit-transform 0.6s;
    -o-transition: transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    cursor: pointer; }
    .b-video-slider__preview-play:hover {
      -webkit-transform: scale(1.2);
              transform: scale(1.2); }

.b-video-slider__container {
  width: 100%;
  height: 100%; }

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/strings-table/strings-table.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-strings-table__main {
  background-color: #fff; }
  @media (min-width: 451px) {
    .b-strings-table__main {
      padding: 2rem; } }

.b-strings-table__title {
  text-align: center;
  margin-bottom: 2rem; }

.b-strings-table__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .b-strings-table__row.mobile {
    display: none; }
    @media (min-width: 951px) {
      .b-strings-table__row.mobile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
    @media (min-width: 1281px) {
      .b-strings-table__row.mobile {
        display: none; } }
  @media (min-width: 951px) {
    .b-strings-table__row.min {
      display: none; } }

.b-strings-table__item {
  width: 100%;
  font-weight: 400;
  padding: 0.75rem; }
  @media (min-width: 951px) {
    .b-strings-table__item {
      width: calc(100% / 2); } }
  @media (min-width: 1281px) {
    .b-strings-table__item {
      width: calc(100% / 3); } }
  .b-strings-table__item:nth-child(2) {
    display: none; }
    @media (min-width: 951px) {
      .b-strings-table__item:nth-child(2) {
        display: block; } }
  .b-strings-table__item:nth-child(3) {
    display: none; }
    @media (min-width: 1281px) {
      .b-strings-table__item:nth-child(3) {
        display: block; } }

/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/subscribe/subscribe.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-subscribe {
  margin-top: 2rem;
  margin-bottom: 2rem; }
  @media (min-width: 951px) {
    .b-subscribe {
      margin-top: 3rem;
      margin-bottom: 3rem; } }
  @media (min-width: 1281px) {
    .b-subscribe {
      margin-top: 4rem;
      margin-bottom: 4rem; } }
  .b-subscribe__error, .b-subscribe__success {
    display: none;
    text-align: center;
    padding: 12px 0;
    color: #ff4c62;
    vertical-align: middle; }
    .b-subscribe__error.active, .b-subscribe__success.active {
      display: block; }
      @media (min-width: 661px) {
        .b-subscribe__error.active, .b-subscribe__success.active {
          display: inline-block; } }
  .b-subscribe__success {
    color: #00A769;
    border-color: #00A769; }
  .b-subscribe__title, .b-subscribe__subtitle {
    text-align: center;
    margin-bottom: 1rem; }
  .b-subscribe__subtitle {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto; }
  .b-subscribe__form {
    background-color: #fff;
    z-index: 1;
    border: none;
    padding: 1rem;
    margin: auto;
    max-width: 800px;
    border-radius: 10px; }
    @media (min-width: 661px) {
      .b-subscribe__form {
        padding: 2rem; } }
    @media (min-width: 1281px) {
      .b-subscribe__form {
        border-radius: 20px; } }
  .b-subscribe .switch {
    background-color: #CBCBCB;
    position: relative;
    width: 3rem;
    height: 2rem;
    border-radius: 2rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto; }
    .b-subscribe .switch:after {
      content: '';
      position: absolute;
      border-radius: 2rem;
      top: .2rem;
      left: .2rem;
      width: 1.6rem;
      height: 1.6rem;
      background: #FFF;
      -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
              box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      -webkit-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease; }
  .b-subscribe__row {
    padding: 1rem .5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: .5rem;
    border-bottom: 1px solid #F2F2F2; }
    @media (min-width: 451px) {
      .b-subscribe__row {
        gap: 2rem; } }
    .b-subscribe__row input {
      display: none; }
      .b-subscribe__row input:checked + .switch {
        background-color: #C7F9B7; }
        .b-subscribe__row input:checked + .switch:after {
          left: 1.2rem; }
  .b-subscribe__row-title {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; }
  .b-subscribe__row-subtitle {
    color: #878787;
    font-size: .6rem;
    line-height: 21px; }
    @media (min-width: 451px) {
      .b-subscribe__row-subtitle {
        font-size: .7rem; } }
  .b-subscribe__containerbutton {
    text-align: center; }
    .b-subscribe__containerbutton:last-child {
      padding-top: 1rem; }
    @media (min-width: 451px) {
      .b-subscribe__containerbutton {
        text-align: left; } }
  .b-subscribe__button {
    height: 50px;
    margin-bottom: .5rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    min-width: 180px; }
    @media (min-width: 661px) {
      .b-subscribe__button {
        margin-right: .5rem;
        display: inline-block; } }
    .b-subscribe__button.disabled .b-button__content {
      cursor: not-allowed;
      pointer-events: none;
      color: #fff0e6;
      background-color: #AEAEAE; }
  .b-subscribe__button-big {
    height: 60px;
    min-width: 230px; }

/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/table-price/table-price.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-table-price__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  margin: 2rem 0; }
  @media (min-width: 951px) {
    .b-table-price__title {
      margin: 4rem 0; } }

.b-table-price__container {
  overflow-x: auto;
  padding: 80px 50px;
  margin-bottom: 2rem;
  background-color: #fff; }
  @media (min-width: 951px) {
    .b-table-price__container {
      margin-bottom: 4rem; } }

.b-table-price__table {
  border-spacing: 0;
  width: 100%;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1rem;
  overflow-x: auto; }
  .b-table-price__table tr {
    background-color: #fff; }
    .b-table-price__table tr:nth-child(2n+1) {
      background: #e6f3ff; }
    .b-table-price__table tr:first-child {
      background-color: #00a;
      color: #fff0e6; }
      .b-table-price__table tr:first-child th {
        color: #fff0e6; }
    .b-table-price__table tr:first-child td {
      font-weight: 700; }
  .b-table-price__table th {
    width: 23rem;
    max-width: 23rem;
    font-weight: 400; }
    .b-table-price__table th.none-border {
      border-right: 1px solid transparent;
      font-weight: 700; }
  .b-table-price__table td {
    background: none;
    padding: 0.75rem; }
    .b-table-price__table td.null {
      border-right: 1px solid transparent; }
  .b-table-price__table th,
  .b-table-price__table td {
    background: none;
    border-radius: 0;
    border: 1px solid #d8d8d8;
    border-width: 0 1px; }
    .b-table-price__table th:first-child,
    .b-table-price__table td:first-child {
      border-left: none; }
    .b-table-price__table th:last-child,
    .b-table-price__table td:last-child {
      border-right: none; }

.b-table-price__wrapper-file {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.b-table-price__files {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: -1rem;
  margin-top: -1rem; }

.b-table-price__file {
  margin-left: 1rem;
  margin-top: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.25rem 1rem;
  position: relative;
  background-color: #fff;
  border-radius: 0.25rem;
  color: #232323;
  overflow: hidden; }
  .b-table-price__file:hover {
    color: #232323; }
  .b-table-price__file object {
    margin-left: auto; }
  .b-table-price__file-content {
    max-width: 20rem;
    margin-left: 1.5rem;
    padding-right: 0.25rem; }
  .b-table-price__file-desc {
    margin-top: 0.5rem;
    color: #595757; }
  .b-table-price__file-icon {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto; }
  .b-table-price__file-link {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    display: block;
    margin-left: auto;
    background-image: url("/images/documents-layout/download.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer; }
    .b-table-price__file-link:hover {
      opacity: 0.8; }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/tarify-selector/tarify-selector.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-tarify-selector {
  display: inline-block;
  min-width: 250px;
  width: 100%;
  margin-left: 0;
  margin-top: 10px; }
  @media (min-width: 1600px) {
    .b-tarify-selector {
      margin-top: 0;
      margin-left: 10px; } }
  .b-tarify-selector.numberinpoint {
    width: 100%; }
    .b-tarify-selector.numberinpoint .irs-single {
      top: 10px;
      z-index: 2000;
      background-color: transparent;
      color: #ffd9d7;
      font-weight: 700;
      font-size: 14px; }
      .b-tarify-selector.numberinpoint .irs-single::before {
        display: none; }
    .b-tarify-selector.numberinpoint .irs-min {
      display: none; }
    .b-tarify-selector.numberinpoint .irs-max {
      font-weight: 400;
      font-size: 14px;
      background-color: transparent;
      right: 15px;
      top: 10px; }
    .b-tarify-selector.numberinpoint .irs-handle.state_hover {
      background-color: #00a !important; }
    .b-tarify-selector.numberinpoint .irs-bar {
      height: 30px;
      border-bottom-left-radius: 20px;
      border-top-left-radius: 20px;
      background-color: #00a; }
    .b-tarify-selector.numberinpoint .irs-line {
      height: 30px; }
    .b-tarify-selector.numberinpoint .irs-handle {
      top: 5px;
      height: 30px;
      width: 30px;
      border-radius: 50%;
      border: 2px solid #f4f4f4; }
      .b-tarify-selector.numberinpoint .irs-handle i {
        display: none; }
  .b-tarify-selector .irs {
    border-radius: 15px;
    width: 100%;
    height: 50px; }
    @media (min-width: 450px) {
      .b-tarify-selector .irs {
        width: 100%; } }
  .b-tarify-selector .irs-bar {
    top: 0.25rem;
    height: 0.5rem;
    border: none;
    background: #00a;
    -webkit-box-shadow: none;
            box-shadow: none; }
  .b-tarify-selector .irs-line {
    top: 0.25rem;
    height: 0.5rem;
    border-radius: 50px;
    border: none;
    background-color: #f4f4f4; }
  .b-tarify-selector .irs-handle {
    top: 0;
    z-index: 10;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    width: 1rem;
    height: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border: 2px solid #f4f4f4;
    background: #00a !important; }
    .b-tarify-selector .irs-handle.state_hover {
      border-color: #fff;
      background: #99cdf1 !important; }
    .b-tarify-selector .irs-handle:hover {
      border-color: #fff;
      background: #99cdf1 !important; }
  .b-tarify-selector .irs-grid-text {
    top: 0;
    color: #afaeae;
    font-size: 0.6rem;
    font-weight: 400;
    line-height: 0.8rem;
    padding: 0 10px; }
    .b-tarify-selector .irs-grid-text.active {
      color: #00a; }
    @media (min-width: 951px) {
      .b-tarify-selector .irs-grid-text {
        font-size: 0.7rem;
        line-height: 0.8rem; } }
  .b-tarify-selector .irs-grid-pol {
    display: none; }
  .b-tarify-selector .irs-grid-pol.small {
    display: none; }
  .b-tarify-selector .irs-grid.points {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 5;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
    pointer-events: none; }
    .b-tarify-selector .irs-grid.points .irs-grid-text {
      display: none; }
    .b-tarify-selector .irs-grid.points .irs-grid-pol {
      display: none; }
    .b-tarify-selector .irs-grid.points .irs-grid-pol.small {
      display: none; }

/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/tarify/tarify.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-tarify__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  margin-top: -25px !important;
  position: relative; }
  @media (min-width: 660px) {
    .b-tarify__wrapper {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }
  @media (min-width: 660px) and (max-width: 1920px) {
    .b-tarify__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 660px) and (min-width: 1921px) {
    .b-tarify__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 1280px) {
    .b-tarify__wrapper {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 660px) and (min-width: 1921px) {
    .b-tarify__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 950px) {
    .b-tarify__wrapper {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 660px) and (min-width: 1921px) {
    .b-tarify__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 660px) {
    .b-tarify__wrapper {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 660px) and (min-width: 1921px) {
    .b-tarify__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 450px) {
    .b-tarify__wrapper {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 660px) and (min-width: 1921px) {
    .b-tarify__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 320px) {
    .b-tarify__wrapper {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 660px) and (min-width: 1921px) {
    .b-tarify__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 820px) {
    .b-tarify__wrapper {
      margin-bottom: 3rem; } }

.b-tarify__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.b-tarify__title {
  font-weight: 500; }
  .b-tarify__title--form {
    margin-bottom: 2.25rem; }
  .b-tarify__title--order {
    margin-bottom: 1rem; }
  .b-tarify__title--main {
    margin: 40px auto; }
    @media (min-width: 580px) {
      .b-tarify__title--main {
        margin: 70px auto; } }
    @media (min-width: 820px) {
      .b-tarify__title--main {
        margin: 60px auto; } }
    @media (min-width: 1150px) {
      .b-tarify__title--main {
        margin: 70px auto; } }
    @media (min-width: 1600px) {
      .b-tarify__title--main {
        margin: 80px auto; } }

.b-tarify h1 {
  margin: 40px auto; }
  @media (min-width: 580px) {
    .b-tarify h1 {
      margin: 70px auto; } }
  @media (min-width: 820px) {
    .b-tarify h1 {
      margin: 60px auto; } }
  @media (min-width: 1150px) {
    .b-tarify h1 {
      margin: 70px auto; } }
  @media (min-width: 1600px) {
    .b-tarify h1 {
      margin: 80px auto; } }

.b-tarify__form-label {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }
  .b-tarify__form-label.max-width-number {
    max-width: 380px;
    margin-right: 15px;
    width: 100%; }
    @media (min-width: 450px) {
      .b-tarify__form-label.max-width-number {
        margin-right: 40px; } }
  .b-tarify__form-label.max-width-minmax {
    max-width: 240px;
    margin-right: 40px;
    width: 100%; }

.b-tarify__form-hidden-icon {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-right: 5px; }
  @media (min-width: 450px) {
    .b-tarify__form-hidden-icon {
      margin-right: 40px; } }

.b-tarify__form {
  background-color: #fff;
  padding: 1rem;
  border-radius: 5px;
  margin-top: 25px !important; }
  @media (min-width: 660px) {
    .b-tarify__form {
      padding: 1rem 1.5rem 2rem; } }
  @media (min-width: 660px) and (max-width: 1920px) {
    .b-tarify__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 1280px) {
    .b-tarify__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 950px) {
    .b-tarify__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 660px) {
    .b-tarify__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 450px) {
    .b-tarify__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 320px) {
    .b-tarify__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 660px) and (min-width: 1921px) {
    .b-tarify__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 950px) and (max-width: 1920px) {
  .b-tarify__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 950px) and (max-width: 1280px) {
  .b-tarify__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 950px) and (max-width: 950px) {
  .b-tarify__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 950px) and (max-width: 660px) {
  .b-tarify__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 950px) and (max-width: 450px) {
  .b-tarify__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 950px) and (max-width: 320px) {
  .b-tarify__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 950px) and (min-width: 1921px) {
  .b-tarify__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1280px) and (max-width: 1920px) {
  .b-tarify__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1280px) and (max-width: 1280px) {
  .b-tarify__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1280px) and (max-width: 950px) {
  .b-tarify__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1280px) and (max-width: 660px) {
  .b-tarify__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1280px) and (max-width: 450px) {
  .b-tarify__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1280px) and (max-width: 320px) {
  .b-tarify__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1280px) and (min-width: 1921px) {
  .b-tarify__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 1600px) {
    .b-tarify__form {
      padding: 30px; } }
  .b-tarify__form-label {
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    color: #252525;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto; }
    .b-tarify__form-label.contents {
      -webkit-box-flex: 0;
          -ms-flex: 0 1 auto;
              flex: 0 1 auto; }
      @media (min-width: 660px) {
        .b-tarify__form-label.contents {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 auto;
                  flex: 0 0 auto; } }
  .b-tarify__form-hidden-icon {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 0.5rem;
    background-image: url("/images/b-tariffs-detail/question.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer; }
    .b-tarify__form-hidden-icon:hover .b-tarify__form-hidden-desc {
      opacity: 1; }
  .b-tarify__form-hidden-desc {
    position: absolute;
    width: 8rem;
    border-radius: 0.75rem;
    background-color: #e3e3ff;
    padding: 0.5rem;
    left: 100;
    bottom: -210%;
    -webkit-transform: translateX(-100%) translateY(80%);
            transform: translateX(-100%) translateY(80%);
    -webkit-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    text-align: left; }
    @media (min-width: 951px) {
      .b-tarify__form-hidden-desc {
        width: 10rem; } }
    @media (min-width: 1500px) {
      .b-tarify__form-hidden-desc {
        width: 15rem;
        bottom: -200%;
        left: 0; } }
  .b-tarify__form-parms {
    margin: 1rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .b-tarify__form-parms.nowrap {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; }
    @media (min-width: 1600px) {
      .b-tarify__form-parms {
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap; } }
    .b-tarify__form-parms.jsCountUsers {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; }
  .b-tarify__form-input {
    display: inline-block;
    width: 110px;
    height: 30px;
    margin-left: 10px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto; }
    .b-tarify__form-input__minus {
      display: inline-block;
      color: #979797;
      cursor: pointer; }
    .b-tarify__form-input__plus {
      display: inline-block;
      color: #979797;
      cursor: pointer; }
    .b-tarify__form-input__count {
      display: inline-block;
      background-color: #00a;
      width: 70px;
      height: 30px;
      border: none;
      border-radius: 15px;
      font-style: normal;
      font-weight: 700;
      font-size: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      color: #ffd9d7; }
      .b-tarify__form-input__count.value-none {
        background-color: #f4f4f4;
        color: #979797;
        font-weight: 400; }

.b-tarify__add {
  background-color: #d6def4;
  padding: 40px 20px;
  border-radius: 5px;
  position: relative;
  margin-top: 25px !important; }
  @media (min-width: 660px) {
    .b-tarify__add {
      padding: 2rem 0.5rem 2.5rem; } }
  @media (min-width: 660px) and (max-width: 1920px) {
    .b-tarify__add {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 1280px) {
    .b-tarify__add {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 950px) {
    .b-tarify__add {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 660px) {
    .b-tarify__add {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 450px) {
    .b-tarify__add {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 320px) {
    .b-tarify__add {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 660px) and (min-width: 1921px) {
    .b-tarify__add {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 950px) {
    .b-tarify__add {
      margin-bottom: 0; } }
  @media (min-width: 950px) and (max-width: 1920px) {
    .b-tarify__add {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 950px) and (max-width: 1280px) {
    .b-tarify__add {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 950px) and (max-width: 950px) {
    .b-tarify__add {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 950px) and (max-width: 660px) {
    .b-tarify__add {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 950px) and (max-width: 450px) {
    .b-tarify__add {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 950px) and (max-width: 320px) {
    .b-tarify__add {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 950px) and (min-width: 1921px) {
    .b-tarify__add {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1280px) and (max-width: 1920px) {
  .b-tarify__add {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1280px) and (max-width: 1280px) {
  .b-tarify__add {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1280px) and (max-width: 950px) {
  .b-tarify__add {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1280px) and (max-width: 660px) {
  .b-tarify__add {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1280px) and (max-width: 450px) {
  .b-tarify__add {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1280px) and (max-width: 320px) {
  .b-tarify__add {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1280px) and (min-width: 1921px) {
  .b-tarify__add {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 1600px) {
    .b-tarify__add {
      padding: 2.5rem 1rem; } }
  .b-tarify__add-tag {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    padding: 0 1rem 0.2rem;
    font-size: 0.85rem;
    color: #232323;
    border-radius: 0.6rem;
    text-align: center;
    font-weight: 700;
    margin-bottom: 20px;
    background-color: transparent; }
    .b-tarify__add-tag::first-letter {
      text-transform: uppercase; }
    @media (min-width: 950px) {
      .b-tarify__add-tag {
        margin-bottom: 0;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        display: block;
        width: 285px;
        font-weight: 400;
        position: absolute;
        color: #fff0e6;
        background-color: #00a769;
        font-size: 0.85rem;
        z-index: 12; }
        .b-tarify__add-tag::first-letter {
          text-transform: none; } }

.b-tarify__order {
  background-color: #fff;
  padding: 40px 20px;
  border-radius: 5px;
  position: relative;
  margin-top: 25px !important; }
  @media (min-width: 660px) {
    .b-tarify__order {
      padding: 2rem 0.5rem; } }
  @media (min-width: 660px) and (max-width: 1920px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 1280px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 950px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 660px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 450px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 660px) and (max-width: 320px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 660px) and (min-width: 1921px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 950px) {
    .b-tarify__order {
      padding: 2.5rem; } }
  @media (min-width: 950px) and (max-width: 1920px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 950px) and (max-width: 1280px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 950px) and (max-width: 950px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 950px) and (max-width: 660px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 950px) and (max-width: 450px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 950px) and (max-width: 320px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 950px) and (min-width: 1921px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1280px) {
    .b-tarify__order {
      padding: 2.5rem 0.5rem; } }
  @media (min-width: 1280px) and (max-width: 1920px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1280px) and (max-width: 1280px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1280px) and (max-width: 950px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1280px) and (max-width: 660px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1280px) and (max-width: 450px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1280px) and (max-width: 320px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1280px) and (min-width: 1921px) {
    .b-tarify__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1600px) {
    .b-tarify__order {
      padding: 2.5rem 1rem; } }
  .b-tarify__order-tag {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    padding: 0 1rem 0.2rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #232323;
    background-color: transparent;
    border-radius: 0.6rem;
    text-align: center;
    margin-bottom: 20px;
    display: block; }
    @media (min-width: 950px) {
      .b-tarify__order-tag {
        display: none;
        text-align: left;
        padding: 0; } }
    @media (min-width: 1280px) {
      .b-tarify__order-tag {
        display: block;
        text-align: center;
        padding: 0 1rem 0.2rem; } }
    .b-tarify__order-tag::first-letter {
      text-transform: uppercase; }
    .b-tarify__order-tag.hidden {
      display: none; }
      @media (min-width: 950px) {
        .b-tarify__order-tag.hidden {
          display: block; } }
      @media (min-width: 1280px) {
        .b-tarify__order-tag.hidden {
          display: none; } }
    @media (min-width: 950px) {
      .b-tarify__order-tag {
        margin-bottom: 20px;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        display: block;
        width: 225px;
        font-weight: 400;
        position: absolute;
        background-color: #92D0FF; }
        .b-tarify__order-tag::first-letter {
          text-transform: none; } }

.b-tarify__button {
  display: inline-block;
  padding: 6px 20px;
  background-color: #f4f4f4;
  border-radius: 15px;
  color: #252525;
  font-size: 0.75rem;
  cursor: pointer;
  margin-top: 10px;
  margin-right: 10px; }
  .b-tarify__button--active {
    background-color: #00a;
    color: #ffd9d7; }
  .b-tarify__button:hover {
    background-color: #e3e3ff;
    color: #252525; }
  .b-tarify__button-container {
    margin-left: 3rem; }

.b-tarify__tarif {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%; }
  @media (min-width: 950px) {
    .b-tarify__tarif {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }
  @media (min-width: 1280px) {
    .b-tarify__tarif {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; } }
  .b-tarify__tarif--active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .b-tarify__tarif__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    @media (min-width: 950px) {
      .b-tarify__tarif__container {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start; } }
    @media (min-width: 1280px) {
      .b-tarify__tarif__container {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; } }
  .b-tarify__tarif__title {
    font-style: normal;
    font-weight: 500;
    font-size: 1.25rem;
    text-align: center;
    color: #00a;
    margin-top: 0; }
    @media (min-width: 1280px) {
      .b-tarify__tarif__title {
        margin-top: 20px; } }
  .b-tarify__tarif__descr {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1rem;
    text-align: center;
    color: #afaeae;
    margin-top: 20px; }
    @media (min-width: 950px) {
      .b-tarify__tarif__descr {
        text-align: left; } }
    @media (min-width: 1280px) {
      .b-tarify__tarif__descr {
        text-align: center; } }
  .b-tarify__tarif__bottom {
    margin-top: auto;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-bottom: 0; }
    @media (min-width: 660px) {
      .b-tarify__tarif__bottom {
        margin-bottom: 40px; } }
    @media (min-width: 950px) {
      .b-tarify__tarif__bottom {
        margin-bottom: 0; } }
    @media (min-width: 1280px) {
      .b-tarify__tarif__bottom {
        margin-bottom: 25px; } }
    @media (min-width: 1900px) {
      .b-tarify__tarif__bottom {
        margin-bottom: 0; } }
  .b-tarify__tarif__price {
    text-align: center;
    margin-top: 40px; }
    .b-tarify__tarif__price i {
      font-style: normal; }
    @media (min-width: 950px) {
      .b-tarify__tarif__price {
        margin-top: 40px; } }
    .b-tarify__tarif__price-label {
      display: inline-block;
      font-style: normal;
      font-weight: 700;
      font-size: 18px;
      text-align: center;
      color: #252525; }
      @media (min-width: 950px) {
        .b-tarify__tarif__price-label {
          font-size: 25px; } }
      .b-tarify__tarif__price-label span {
        font-size: 30px; }
        @media (min-width: 950px) {
          .b-tarify__tarif__price-label span {
            font-size: 42px; } }
    .b-tarify__tarif__price-hidden-icon {
      position: relative;
      display: none;
      width: 16px;
      height: 16px;
      margin-left: 0.5rem;
      background-image: url("/images/b-tariffs-detail/question.svg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer; }
      .b-tarify__tarif__price-hidden-icon:hover .b-tarify__tarif__price-hidden-desc {
        opacity: 1; }
      @media (min-width: 1900px) {
        .b-tarify__tarif__price-hidden-icon {
          display: inline-block; } }
    .b-tarify__tarif__price-hidden-desc {
      position: absolute;
      width: 8rem;
      border-radius: 0.75rem;
      background-color: #e3e3ff;
      padding: 0.5rem;
      left: 100;
      bottom: -210%;
      -webkit-transform: translateX(-100%) translateY(80%);
              transform: translateX(-100%) translateY(80%);
      -webkit-transition: opacity 0.2s linear;
      -o-transition: opacity 0.2s linear;
      transition: opacity 0.2s linear;
      z-index: 10;
      opacity: 0;
      pointer-events: none;
      text-align: left; }
      @media (min-width: 951px) {
        .b-tarify__tarif__price-hidden-desc {
          width: 10rem; } }
      @media (min-width: 1500px) {
        .b-tarify__tarif__price-hidden-desc {
          width: 15rem;
          bottom: -200%;
          left: 0; } }
    .b-tarify__tarif__price-comment, .b-tarify__tarif__price-connect {
      font-style: normal;
      font-weight: 700;
      font-size: 0.5rem;
      text-align: center; }
  .b-tarify__tarif__button {
    font-weight: 700;
    margin-top: 30px;
    font-size: 15px;
    color: #ffd9d7;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .b-tarify__tarif__button .b-button__content {
      padding: 15px 34px !important; }
      .b-tarify__tarif__button .b-button__content div p {
        font-weight: 700; }
  .b-tarify__tarif__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-top: 20px; }
    @media (min-width: 950px) {
      .b-tarify__tarif__links {
        display: none; } }
    @media (min-width: 1280px) {
      .b-tarify__tarif__links {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
    .b-tarify__tarif__links.hidden {
      display: none; }
      @media (min-width: 950px) {
        .b-tarify__tarif__links.hidden {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex; } }
      @media (min-width: 1280px) {
        .b-tarify__tarif__links.hidden {
          display: none; } }
    .b-tarify__tarif__links .b-button {
      margin: 10px 0.2rem 0; }
    .b-tarify__tarif__links .b-button__content {
      padding: 0 1rem; }

.b-tarify__notice {
  font-weight: 400;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
  display: none;
  color: black; }
  .b-tarify__notice--active {
    display: block; }

.b-tarify__business {
  display: none;
  text-align: center; }
  .b-tarify__business--active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; }
    @media (min-width: 450px) {
      .b-tarify__business--active {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; } }
    @media (min-width: 660px) {
      .b-tarify__business--active {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column; } }
  .b-tarify__business__container {
    margin: 0 4px 15px;
    margin-right: 0;
    position: relative; }
    @media (min-width: 450px) {
      .b-tarify__business__container {
        margin-right: 40px; } }
    @media (min-width: 660px) {
      .b-tarify__business__container {
        margin: 0 4px 35px;
        margin-right: 0; } }
    @media (min-width: 1700px) {
      .b-tarify__business__container {
        margin: 0 4px 20px; } }
  .b-tarify__business__additional-label {
    display: inline-block;
    background: #f4f4f4;
    border-radius: 86px;
    margin: 0;
    padding: 7px 30px;
    font-style: normal;
    font-weight: 400;
    font-size: 0.7rem;
    text-align: center;
    color: #252525;
    cursor: pointer;
    position: relative; }
    @media (min-width: 1150px) {
      .b-tarify__business__additional-label {
        font-size: 0.7rem; } }
    @media (min-width: 1500px) {
      .b-tarify__business__additional-label {
        font-size: 0.8rem; } }
    .b-tarify__business__additional-label:hover {
      background-color: #99cdf1;
      color: #fff0e6; }
    .b-tarify__business__additional-label--active {
      background-color: #00a;
      color: #ffd9d7; }
    .b-tarify__business__additional-label_free {
      color: #FFF0E6;
      padding: 3px 10px;
      position: absolute;
      left: -18px;
      top: 6px;
      border-radius: 16px;
      font-size: 11.4px;
      background-color: #00A769; }
  .b-tarify__business__additional-hidden-icon {
    position: absolute;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 0.2rem;
    background-image: url("/images/b-tariffs-detail/question.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
    .b-tarify__business__additional-hidden-icon:hover {
      z-index: 100; }
      .b-tarify__business__additional-hidden-icon:hover .b-tarify__business__additional-hidden-desc {
        opacity: 1; }
  .b-tarify__business__additional-hidden-desc {
    position: absolute;
    width: 8rem;
    border-radius: 0.75rem;
    background-color: #e3e3ff;
    padding: 0.5rem;
    left: 100;
    bottom: -210%;
    -webkit-transform: translateX(-100%) translateY(80%);
            transform: translateX(-100%) translateY(80%);
    -webkit-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    text-align: left; }
    @media (min-width: 951px) {
      .b-tarify__business__additional-hidden-desc {
        width: 10rem; } }
    @media (min-width: 1500px) {
      .b-tarify__business__additional-hidden-desc {
        width: 15rem;
        bottom: -200%;
        left: 0; } }

.b-tarify .margin {
  margin-top: 160px; }

.b-tarify__transcript-tarify_block {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none; }
  .b-tarify__transcript-tarify_block.active {
    display: block; }

.b-tarify__transcript-tarify_href {
  cursor: pointer;
  text-decoration: underline; }

.b-tarify__transcript-tarify_update span {
  opacity: 0.3; }

.b-tarify__transcript-tarify_update .b-tarify__form-hidden-icon {
  margin-right: 0; }

.b-tarify__transcript-tarify_update .b-tarify__form-hidden-icon {
  margin-left: 0; }

.b-tarify__transcript-tarify_update.active span {
  opacity: 1;
  cursor: pointer; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/transcript-tarify/transcript-tarify.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-transcript-tarify {
  background-color: #ccede9;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 11;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbarThumbColor) var(--scrollbarBgColor); }
  .b-transcript-tarify::-webkit-scrollbar {
    width: var(--scrollbarWidth); }
  .b-transcript-tarify::-webkit-scrollbar-track {
    background: var(--scrollbarBgColor);
    border-radius: var(--scrollbarBorderRadius); }
  .b-transcript-tarify::-webkit-scrollbar-thumb {
    background-color: var(--scrollbarThumbColor);
    border-radius: var(--scrollbarBorderRadius);
    border: var(--scrollbarBorder);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--scrollbarThumbColor)), to(var(--scrollbarThumbColorSecond)));
    background-image: linear-gradient(180deg, var(--scrollbarThumbColor) 100%, var(--scrollbarThumbColorSecond) 100%); }
  .b-transcript-tarify ul {
    margin: 0; }
  .b-transcript-tarify__limits {
    font-size: 14px;
    padding: 20px 20px 0; }
  .b-transcript-tarify__limit {
    font-size: 14px !important;
    list-style-type: none;
    position: relative;
    padding-left: 10px; }
    .b-transcript-tarify__limit::before {
      content: "";
      display: block;
      position: absolute;
      left: -1rem;
      top: 2px;
      width: 25px;
      height: 25px;
      background-image: url("/images/decryption_tariff.svg");
      background-repeat: no-repeat;
      background-position: center; }
  .b-transcript-tarify__buisneses {
    padding: 20px; }
  .b-transcript-tarify__buisness {
    display: inline-block;
    padding: 4px 20px;
    font-size: 14px;
    margin: 5px;
    border-radius: 20px;
    border-color: black;
    border-width: 2px;
    border-style: solid; }
  .b-transcript-tarify__annotations {
    font-size: 14px;
    padding: 7px 20px;
    background-color: white; }
  .b-transcript-tarify__annotation {
    font-size: 14px !important;
    list-style-type: none;
    position: relative;
    padding-left: 10px; }
    .b-transcript-tarify__annotation::before {
      content: "";
      display: block;
      position: absolute;
      left: -1rem;
      top: 2px;
      width: 25px;
      height: 25px;
      background-image: url("/images/annotation.svg");
      background-repeat: no-repeat;
      background-position: center; }
  .b-transcript-tarify__close-button {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px; }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/widgets/link-widget/link-widget.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-link-widget {
  position: fixed;
  right: 20px;
  bottom: 2.5rem;
  width: 3rem;
  height: 3rem;
  -webkit-transition: -webkit-filter 0.2s;
  transition: -webkit-filter 0.2s;
  -o-transition: filter 0.2s;
  transition: filter 0.2s;
  transition: filter 0.2s, -webkit-filter 0.2s;
  z-index: 1000; }
  .b-link-widget:hover {
    -webkit-filter: brightness(80%);
            filter: brightness(80%); }
  .b-link-widget__content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4), 0 2px 14px rgba(0, 0, 0, 0.5);
            box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4), 0 2px 14px rgba(0, 0, 0, 0.5); }
  .b-link-widget__icon {
    width: 1.5rem;
    height: 1.5rem;
    -webkit-mask-image: url("/images/icons/phone.svg");
            mask-image: url("/images/icons/phone.svg");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center; }
  .b-link-widget a {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 50;
    border: none;
    cursor: pointer; }

/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/common/yandex-map/yandex-map.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-yandex-map {
  width: 100%;
  height: 19rem;
  border-radius: 5px;
  overflow: hidden; }

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/b24-marketplace-layout/b24-marketplace-layout.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-b24-marketplace-layout__banner {
  position: relative;
  text-align: center;
  padding: 4rem 0;
  border-radius: 5px;
  z-index: 0; }
  @media (min-width: 451px) {
    .b-b24-marketplace-layout__banner {
      padding: 4.5rem 0; } }
  @media (min-width: 661px) {
    .b-b24-marketplace-layout__banner {
      padding: 5rem 0; } }
  @media (min-width: 951px) {
    .b-b24-marketplace-layout__banner {
      padding: 6rem 0; } }
  @media (min-width: 1281px) {
    .b-b24-marketplace-layout__banner {
      padding: 8rem 0; } }
  .b-b24-marketplace-layout__banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-image: url("/images/b24-marketplace/banner.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    z-index: 0; }
    .b-b24-marketplace-layout__banner-image::before {
      content: '';
      top: 0;
      left: 0;
      position: absolute;
      width: 100%;
      border-radius: 5px;
      height: 100%;
      background-color: #232323;
      opacity: 0.7; }
    .b-b24-marketplace-layout__banner-image::after {
      content: "";
      position: absolute;
      width: 100%;
      background-position: right bottom;
      height: 100%;
      border-radius: 5px;
      background-repeat: no-repeat;
      top: 0;
      left: 0;
      background-image: url("/images/blue-gradient.png");
      background-size: cover;
      z-index: 1; }
      @media (min-width: 451px) {
        .b-b24-marketplace-layout__banner-image::after {
          width: 100%; } }
  .b-b24-marketplace-layout__banner-logo {
    position: relative;
    z-index: 1; }
  .b-b24-marketplace-layout__banner-desc {
    position: relative;
    margin-top: 2rem;
    color: #fff0e6;
    z-index: 1; }
    @media (min-width: 451px) {
      .b-b24-marketplace-layout__banner-desc {
        margin-top: 2.5rem; } }
    @media (min-width: 1281px) {
      .b-b24-marketplace-layout__banner-desc {
        margin-top: 3rem; } }
    @media (min-width: 1600px) {
      .b-b24-marketplace-layout__banner-desc .b-title-with-desc__title {
        white-space: nowrap; } }

.b-b24-marketplace-layout__form {
  position: relative;
  max-width: 40rem;
  border-radius: 5px;
  background-color: #fff;
  margin: 0 auto !important;
  padding: 2rem 1.5rem;
  z-index: 1; }
  @media (min-width: 451px) {
    .b-b24-marketplace-layout__form {
      padding: 2.5rem; } }
  @media (min-width: 661px) {
    .b-b24-marketplace-layout__form {
      padding: 3rem; } }
  @media (min-width: 951px) {
    .b-b24-marketplace-layout__form {
      padding: 3.5rem 3rem; } }
  @media (min-width: 1281px) {
    .b-b24-marketplace-layout__form {
      padding: 4rem 4.5rem; } }

/*!**********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/basket/basket.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-basket__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse; }
  @media (min-width: 820px) {
    .b-basket__wrapper {
      margin-bottom: 3rem; } }
  @media (min-width: 1150px) {
    .b-basket__wrapper {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }
  @media (min-width: 1150px) and (max-width: 1920px) {
    .b-basket__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-basket__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 1280px) {
    .b-basket__wrapper {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-basket__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 950px) {
    .b-basket__wrapper {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-basket__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 660px) {
    .b-basket__wrapper {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-basket__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 450px) {
    .b-basket__wrapper {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-basket__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 320px) {
    .b-basket__wrapper {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-basket__wrapper {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-basket__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.b-basket__title {
  font-weight: 700; }
  .b-basket__title--form {
    margin-bottom: 2.25rem; }
  .b-basket__title--order {
    margin-bottom: 1rem; }
  .b-basket__title--main {
    margin: 40px auto; }
    @media (min-width: 580px) {
      .b-basket__title--main {
        margin: 70px auto; } }
    @media (min-width: 820px) {
      .b-basket__title--main {
        margin: 60px auto; } }
    @media (min-width: 1150px) {
      .b-basket__title--main {
        margin: 70px auto; } }
    @media (min-width: 1600px) {
      .b-basket__title--main {
        margin: 80px auto; } }
    .b-basket__title--main h1 {
      font-size: 1.75rem;
      line-height: 2.25rem;
      font-weight: 700; }

.b-basket__form {
  background-color: #fff;
  padding: 50px 20px 40px;
  margin-top: 0; }
  @media (min-width: 580px) {
    .b-basket__form {
      padding: 2.5rem 1.5rem; } }
  @media (min-width: 1150px) {
    .b-basket__form {
      margin-top: -30px; } }
  @media (min-width: 1150px) and (max-width: 1920px) {
    .b-basket__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 1280px) {
    .b-basket__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 950px) {
    .b-basket__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 660px) {
    .b-basket__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 450px) {
    .b-basket__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 320px) {
    .b-basket__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-basket__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1600px) {
    .b-basket__form {
      padding: 2.5rem 3rem 2.5rem 2rem; } }
  @media (min-width: 1600px) and (max-width: 1920px) {
    .b-basket__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 1280px) {
    .b-basket__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 950px) {
    .b-basket__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 660px) {
    .b-basket__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 450px) {
    .b-basket__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 320px) {
    .b-basket__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (min-width: 1921px) {
    .b-basket__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(58.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

.b-basket__field {
  margin-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media (min-width: 1150px) {
    .b-basket__field {
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }
  .b-basket__field .iti {
    width: 100%; }

.b-basket__politic {
  margin-top: 1rem;
  margin-left: 0; }
  @media (min-width: 580px) {
    .b-basket__politic {
      margin-top: 1rem; } }
  @media (min-width: 820px) {
    .b-basket__politic {
      margin-left: 1rem; } }
  @media (min-width: 1600px) {
    .b-basket__politic {
      margin-top: 1rem; } }
  .b-basket__politic.error label span {
    color: #ff454f; }
  .b-basket__politic.error label a {
    color: #ff454f; }

.b-basket__checkbox-label {
  font-weight: 400;
  font-size: 0.6rem;
  line-height: 1.05rem; }
  @media (min-width: 580px) {
    .b-basket__checkbox-label {
      font-size: 0.7rem; } }
  .b-basket__checkbox-label a {
    color: #252525;
    text-decoration: none; }
    @media (min-width: 1150px) {
      .b-basket__checkbox-label a {
        text-decoration: underline; } }
    .b-basket__checkbox-label a:hover {
      text-decoration: none; }

.b-basket__checkbox {
  position: absolute;
  z-index: -1;
  opacity: 0; }

.b-basket__checkbox + label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.b-basket__checkbox + label::before {
  content: '';
  margin-right: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: inline-block;
  width: 20px;
  height: 22px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("/images/icons/checkbox.svg");
  -webkit-background-box-image: url("/images/icons/checkbox.svg"); }

.b-basket__checkbox:checked + label::before {
  content: '';
  width: 20px;
  height: 22px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("/images/icons/checkbox-active.svg");
  -webkit-background-box-image: url("/images/icons/checkbox-active.svg"); }

.b-basket__field-label {
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.2rem;
  margin-left: 1rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  max-width: 170px;
  width: 100%;
  display: none; }
  @media (min-width: 580px) {
    .b-basket__field-label {
      display: block; } }
  @media (min-width: 1600px) {
    .b-basket__field-label {
      max-width: 170px; } }

.b-basket__field-input {
  width: 100%;
  border: none;
  background: #f4f4f4;
  padding: 15px 25px 15px 54px;
  border-radius: 2.5rem;
  max-width: 410px; }
  @media (min-width: 580px) {
    .b-basket__field-input {
      padding: 15px; } }
  @media (min-width: 1150px) {
    .b-basket__field-input {
      max-width: 32.5rem; } }
  .b-basket__field-input::-webkit-input-placeholder {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.2rem;
    color: #9d9d9d; }
  .b-basket__field-input::-moz-placeholder {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.2rem;
    color: #9d9d9d; }
  .b-basket__field-input:-ms-input-placeholder {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.2rem;
    color: #9d9d9d; }
  .b-basket__field-input::-ms-input-placeholder {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.2rem;
    color: #9d9d9d; }
  .b-basket__field-input::placeholder {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.2rem;
    color: #9d9d9d; }
    @media (min-width: 1150px) {
      .b-basket__field-input::-webkit-input-placeholder {
        font-size: 0.85rem; }
      .b-basket__field-input::-moz-placeholder {
        font-size: 0.85rem; }
      .b-basket__field-input:-ms-input-placeholder {
        font-size: 0.85rem; }
      .b-basket__field-input::-ms-input-placeholder {
        font-size: 0.85rem; }
      .b-basket__field-input::placeholder {
        font-size: 0.85rem; } }
  @media (min-width: 1600px) {
    .b-basket__field-input {
      padding: 15px 35px; } }
  .b-basket__field-input.error {
    border: 1px solid #ff454f; }
  .b-basket__field-input.active {
    border: 1px solid #00a769; }

.b-basket__order {
  background-color: #fff;
  padding: 40px 0 0 20px;
  margin-bottom: 20px; }
  @media (min-width: 580px) {
    .b-basket__order {
      padding: 2.5rem 0.5rem 2.5rem 1.5rem; } }
  @media (min-width: 1150px) {
    .b-basket__order {
      margin-bottom: 0; } }
  @media (min-width: 1150px) and (max-width: 1920px) {
    .b-basket__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 1280px) {
    .b-basket__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 950px) {
    .b-basket__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 660px) {
    .b-basket__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 450px) {
    .b-basket__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (max-width: 320px) {
    .b-basket__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1150px) and (min-width: 1921px) {
    .b-basket__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1600px) {
    .b-basket__order {
      padding: 2.5rem 1rem 2.5rem 2rem; } }
  @media (min-width: 1600px) and (max-width: 1920px) {
    .b-basket__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(41.66667% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 1280px) {
    .b-basket__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(41.66667% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 950px) {
    .b-basket__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(41.66667% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 660px) {
    .b-basket__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(41.66667% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 450px) {
    .b-basket__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(41.66667% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 320px) {
    .b-basket__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(41.66667% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (min-width: 1921px) {
    .b-basket__order {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(41.66667% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

.b-basket__items {
  height: 308px;
  position: relative;
  padding-right: 20px; }
  .b-basket__items .ps__rail-y {
    background: #f4f4f4;
    border-radius: 10px;
    width: 4px; }
    .b-basket__items .ps__rail-y .ps--clicking {
      width: 4px; }
  .b-basket__items .ps__rail-y:hover > .ps__thumb-y {
    width: 4px; }
  .b-basket__items .ps__thumb-y {
    width: 4px;
    right: 0;
    background-color: #d6def4; }
  .b-basket__items .ps__rail-y.ps--clicking .ps__thumb-y {
    width: 4px; }
  .b-basket__items.ps__rail-y.ps--clicking {
    width: 4px; }

.b-basket__item-numbers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -0.5rem; }

.b-basket__item-number {
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  font-weight: 400;
  font-size: 0.6rem;
  line-height: 1rem;
  color: #00a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid #00a;
  padding: 3px 9px;
  border-radius: 25px; }
  @media (min-width: 820px) {
    .b-basket__item-number {
      font-size: 0.7rem; } }

.b-basket__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 10px 0 0;
  border-top: 1px solid #d8d8d8; }
  .b-basket__item:first-child {
    border-top: 1px solid #d8d8d8; }
    @media (min-width: 580px) {
      .b-basket__item:first-child {
        border-top: none; } }
  @media (min-width: 580px) {
    .b-basket__item {
      padding: 0 30px 0 0; } }
  @media (min-width: 820px) {
    .b-basket__item {
      padding: 0 40px 0 0; } }
  @media (min-width: 1150px) {
    .b-basket__item {
      padding: 0 30px 0 0; } }
  @media (min-width: 1600px) {
    .b-basket__item {
      padding: 0 1.5rem; } }

.b-basket__title-number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 20px;
  padding-top: 0; }
  @media (min-width: 580px) {
    .b-basket__title-number {
      padding-top: 13px; } }
  @media (min-width: 1150px) {
    .b-basket__title-number {
      margin-right: 0;
      padding-top: 0; } }

.b-basket__item-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-weight: 400;
  font-size: 0.65rem;
  line-height: 1rem;
  max-width: 100%;
  width: 100%;
  padding: 1.5rem 0;
  border-right: none; }
  @media (min-width: 580px) {
    .b-basket__item-title {
      border-right: 1px solid #d8d8d8; } }
  @media (min-width: 820px) {
    .b-basket__item-title {
      font-size: 0.75rem; } }
  @media (min-width: 1150px) {
    .b-basket__item-title {
      max-width: 20rem; } }

.b-basket__item-price {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 5rem;
  font-weight: 700;
  font-size: 0.65rem;
  line-height: 1rem;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  @media (min-width: 580px) {
    .b-basket__item-price {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  @media (min-width: 820px) {
    .b-basket__item-price {
      width: 6rem;
      font-size: 0.75rem; } }
  @media (min-width: 1150px) {
    .b-basket__item-price {
      width: 4.25rem; } }
  @media (min-width: 1600px) {
    .b-basket__item-price {
      width: 5.5rem; } }

.b-basket__item-close {
  border-left: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 30px; }
  @media (min-width: 580px) {
    .b-basket__item-close {
      border-left: 1px solid #d8d8d8; } }
  @media (min-width: 820px) {
    .b-basket__item-close {
      padding-left: 40px; } }
  @media (min-width: 1150px) {
    .b-basket__item-close {
      padding-left: 20px; } }
  @media (min-width: 1600px) {
    .b-basket__item-close {
      padding-left: 30px; } }

.b-basket__close-image {
  cursor: pointer;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: #9d9d9d;
  -webkit-mask-image: url("/images/icons/close.svg");
          mask-image: url("/images/icons/close.svg");
  -webkit-mask-box-image: url("/images/icons/close.svg");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain; }
  .b-basket__close-image:hover {
    background-color: #575757; }

.b-basket__close-conatiner {
  position: relative; }

.b-basket__close-popup {
  position: absolute;
  display: none;
  top: 10px;
  z-index: 1000;
  right: 14px;
  width: 230px;
  background: #fff0e6;
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 25px 15px 10px; }
  .b-basket__close-popup.active {
    display: block; }
  .b-basket__close-popup.last {
    top: -70px; }
  .b-basket__close-popup.first {
    top: 15px; }

.b-basket__close-popup-text {
  font-weight: 400;
  font-size: 0.7rem;
  line-height: 1.05rem; }

.b-basket__close-popup-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

.b-basket__close-popup-cancel {
  color: #9d9d9d;
  cursor: pointer;
  font-weight: 400;
  font-size: 0.7rem;
  line-height: 21px; }

.b-basket__close-popup-remove {
  color: #252525;
  cursor: pointer;
  font-weight: 400;
  font-size: 0.7rem;
  line-height: 21px;
  margin-left: 10px;
  z-index: 1000; }

.b-basket__remove-nomber {
  cursor: pointer;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background-color: #00a;
  -webkit-mask-image: url("/images/icons/close.svg");
          mask-image: url("/images/icons/close.svg");
  -webkit-mask-box-image: url("/images/icons/close.svg");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  margin-left: 0.4rem; }

.b-basket__conatainer-send {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse; }
  @media (min-width: 580px) {
    .b-basket__conatainer-send {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; } }
  @media (min-width: 820px) {
    .b-basket__conatainer-send {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

.b-basket__container-proceed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  margin-top: 20px; }
  @media (min-width: 580px) {
    .b-basket__container-proceed {
      margin-top: 0;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start; } }
  @media (min-width: 820px) {
    .b-basket__container-proceed {
      width: auto; } }

.b-basket__proceed {
  font-weight: 400;
  font-size: 0.7rem;
  line-height: 1.05rem;
  color: #252525;
  padding: 6px 25px;
  display: block; }

.b-basket__wrapper-proceed {
  border: 1px solid #252525 !important;
  border-radius: 7px; }

.b-basket__wrapper-price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  margin-top: 0; }
  @media (min-width: 580px) {
    .b-basket__wrapper-price {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      margin-top: 40px; } }
  @media (min-width: 820px) {
    .b-basket__wrapper-price {
      width: auto;
      margin-top: 0; } }

.b-basket__total {
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem; }
  .b-basket__total span {
    margin-left: 1rem; }

.b-basket__issue {
  cursor: pointer;
  margin-left: 0;
  padding: 15px 48px;
  background: #00a769;
  border-radius: 25px;
  color: #fff0e6;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1rem;
  margin-top: 20px; }
  @media (min-width: 580px) {
    .b-basket__issue {
      margin-left: 40px;
      margin-top: 0; } }
  @media (min-width: 820px) {
    .b-basket__issue {
      margin-left: 80px; } }

.b-basket .margin {
  margin-top: 160px; }

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/blocks-documentation/blocks-documentation.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */

/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/blog-layout/blog-layout.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-blog-layout__main {
  position: relative; }

.b-blog-layout .b-title-with-desc__title {
  margin-top: 1rem; }
  @media (min-width: 450px) {
    .b-blog-layout .b-title-with-desc__title {
      margin-top: 0; } }

.b-blog-layout__content {
  position: relative; }
  .b-blog-layout__content-loading {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 5; }
    .b-blog-layout__content-loading::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: #9e9d9d;
      opacity: 0.2; }
    .b-blog-layout__content-loading.active {
      display: block; }
    .b-blog-layout__content-loading .b-loading {
      top: 10rem !important; }

.b-blog-layout__categories {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-left: -0.5rem;
  margin-top: -1rem; }

.b-blog-layout__category {
  margin: 1rem auto 0 !important;
  padding-left: 0.5rem;
  color: #232323;
  font-weight: 400; }
  @media (min-width: 661px) {
    .b-blog-layout__category {
      font-weight: 700; } }
  .b-blog-layout__category.active {
    color: #00a;
    text-decoration: underline;
    pointer-events: none; }

.b-blog-layout__tags-container {
  display: block; }
  @media (min-width: 1281px) {
    .b-blog-layout__tags-container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.b-blog-layout__tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -1rem;
  margin-left: -0.5rem;
  max-height: 4rem;
  overflow: hidden; }
  @media (min-width: 451px) {
    .b-blog-layout__tags {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start; } }
  @media (min-width: 951px) {
    .b-blog-layout__tags {
      margin-top: -1.5rem; } }

.b-blog-layout__tags-button {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.5rem;
  color: #232323;
  font-weight: 400;
  cursor: pointer; }
  @media (min-width: 451px) {
    .b-blog-layout__tags-button {
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end; } }
  @media (min-width: 1281px) {
    .b-blog-layout__tags-button {
      margin-left: 1rem; } }
  .b-blog-layout__tags-button::after {
    content: '';
    width: 11px;
    height: 100%;
    margin-left: 7px;
    margin-top: 3px;
    -webkit-mask-image: url("/images/arrow-select.svg");
            mask-image: url("/images/arrow-select.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    background-color: #00a;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    -o-transition: transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s; }
  .b-blog-layout__tags-button:hover {
    color: #9e9d9d; }
    .b-blog-layout__tags-button:hover::after {
      background-color: #9e9d9d; }
  .b-blog-layout__tags-button.disabled {
    pointer-events: none; }
  .b-blog-layout__tags-button.active::after {
    -webkit-transform: rotate(0.5turn);
            transform: rotate(0.5turn); }

.b-blog-layout__tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 10px 30px;
  margin-top: 1rem;
  margin-left: 0.5rem;
  min-height: 2.5rem;
  border-radius: 1.25rem;
  background-color: #d6def4;
  color: #232323; }
  @media (min-width: 951px) {
    .b-blog-layout__tag {
      margin-top: 1.5rem; } }
  .b-blog-layout__tag.active {
    background-color: #ffd9d7; }

.b-blog-layout__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -4rem !important; }
  @media (max-width: 1920px) {
    .b-blog-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-blog-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-blog-layout__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-blog-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-blog-layout__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-blog-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-blog-layout__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-blog-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-blog-layout__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-blog-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-blog-layout__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-blog-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-blog-layout__item-info {
  display: none;
  margin-top: 8rem !important;
  margin-bottom: 4rem !important;
  -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
          order: 6; }
  @media (max-width: 1920px) {
    .b-blog-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-blog-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-blog-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-blog-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-blog-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-blog-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-blog-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-blog-layout__item-info.active {
    display: block; }

.b-blog-layout__item {
  display: block;
  position: relative;
  margin-top: 6rem !important;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: opacity 0.3s, margin-top 0.3s;
  -o-transition: opacity 0.3s, margin-top 0.3s;
  transition: opacity 0.3s, margin-top 0.3s; }
  @media (max-width: 1920px) {
    .b-blog-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-blog-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-blog-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-blog-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-blog-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-blog-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-blog-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 451px) {
    .b-blog-layout__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  @media (min-width: 951px) {
    .b-blog-layout__item {
      display: block; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-blog-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-blog-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-blog-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-blog-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-blog-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-blog-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-blog-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-blog-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-blog-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-blog-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-blog-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-blog-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-blog-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-blog-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-blog-layout__item:hover .b-blog-layout__item-title {
    color: #00a; }
  .b-blog-layout__item.active {
    opacity: 1;
    margin-top: 4rem !important; }
  .b-blog-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
    max-height: 16rem;
    overflow: hidden; }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-blog-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-blog-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-blog-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-blog-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-blog-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-blog-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-blog-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-blog-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-blog-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-blog-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-blog-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-blog-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-blog-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-blog-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
    @media (min-width: 951px) {
      .b-blog-layout__item-image {
        width: 100%; } }
  @media (min-width: 451px) {
    .b-blog-layout__item-content {
      margin-left: 1.5rem; } }
  @media (min-width: 951px) {
    .b-blog-layout__item-content {
      margin-left: 0; } }
  .b-blog-layout__item-date {
    margin: 1rem 0 0.5rem;
    color: #9e9d9d;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    .b-blog-layout__item-date img {
      margin-right: .3rem; }
    .b-blog-layout__item-date span {
      vertical-align: middle; }
    @media (min-width: 451px) {
      .b-blog-layout__item-date {
        margin-top: 0; } }
    @media (min-width: 951px) {
      .b-blog-layout__item-date {
        margin-top: 1rem;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        gap: 1.5rem; } }
  .b-blog-layout__item-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    font-weight: 700;
    color: #232323; }
  .b-blog-layout__item-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    margin-top: 1rem; }
  .b-blog-layout__item-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2; }

.b-blog-layout__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-align: center;
  width: auto !important; }
  @media (min-width: 661px) {
    .b-blog-layout__meta {
      gap: 40px; } }
  .b-blog-layout__meta-item {
    width: 100%;
    padding: 1rem;
    border-radius: 10px;
    background-color: #fff;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-bottom: 1.75rem; }
    @media (min-width: 661px) {
      .b-blog-layout__meta-item {
        width: calc(50% - 20px); } }
  .b-blog-layout__meta-social {
    margin: 0 .4rem; }
    .b-blog-layout__meta-social textarea {
      width: 0;
      height: 0;
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      opacity: 0;
      padding: 0;
      margin: 0;
      position: absolute; }
    .b-blog-layout__meta-social img {
      margin-bottom: 0; }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/chat-form-layout/chat-form-layout.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-chat-form-layout__content {
  position: relative;
  padding-top: 1px;
  color: #fff0e6;
  text-align: center; }

.b-chat-form-layout__back {
  position: absolute;
  height: 35rem;
  top: 0;
  z-index: -1; }
  .b-chat-form-layout__back::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #232323;
    opacity: 0.6; }
  .b-chat-form-layout__back::after {
    content: "";
    position: absolute;
    width: 100%;
    background-position: right bottom;
    height: 100%;
    border-radius: 5px;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    background-image: url("/images/blue-gradient.png");
    background-size: cover;
    z-index: 2; }
    @media (min-width: 451px) {
      .b-chat-form-layout__back::after {
        width: 100%; } }

.b-chat-form-layout__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; }

.b-chat-form-layout__title {
  margin-left: 1rem;
  margin-right: 1rem;
  font-weight: 500; }

.b-chat-form-layout__desc {
  margin-left: 1rem;
  margin-right: 1rem; }

.b-chat-form-layout__form {
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  max-width: 40rem;
  padding: 1rem 1.5rem;
  color: #232323;
  text-align: start; }
  @media (min-width: 661px) {
    .b-chat-form-layout__form {
      padding: 2rem 2.5rem; } }
  @media (min-width: 951px) {
    .b-chat-form-layout__form {
      padding: 3rem 3.5rem; } }
  @media (min-width: 1281px) {
    .b-chat-form-layout__form {
      padding: 4rem 4.5rem; } }

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/consultation-layout/consultation-layout.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-consultation-layout {
  /* &__image {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        max-height: 22.5rem;
        background-image: url('/images/consultation.png');
        background-position: right center;
        background-size: auto 53%;
        background-repeat: no-repeat;
        z-index: 0;

        @include for-width('820') {
            display: block;
        }

        @include for-width('middle') {
            display: none;
            background-size: auto 60%;
        }

        @include for-width('1150') {
            display: block;
        }

        @include for-width('middle2') {
            display: none;
            background-size: auto;
        }

        @include for-width('1700') {
            display: block;
        }
    }

    &__image-mod {
        @include for-width('1700') {
            display: block;
            background-size: contain;
            background-position: right 10% center;
        }
    } */ }
  .b-consultation-layout__title {
    text-align: center;
    margin-bottom: 2rem;
    margin-top: 10px;
    font-size: 26px; }
    @media (min-width: 451px) {
      .b-consultation-layout__title {
        margin-bottom: 1rem;
        margin-top: 1rem;
        font-size: 30px; } }
    @media (min-width: 661px) {
      .b-consultation-layout__title {
        margin-bottom: 2rem;
        margin-top: 2rem; } }
    @media (min-width: 951px) {
      .b-consultation-layout__title {
        margin-bottom: 4rem;
        margin-top: 3rem;
        font-size: 35px; } }
  .b-consultation-layout__back {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e1efff;
    z-index: -1; }
  .b-consultation-layout__content {
    padding: 1px; }
  .b-consultation-layout__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    @media (max-width: 660px) {
      .b-consultation-layout__container {
        width: 100vw !important;
        margin-left: calc((50vw - 50%) * -1) !important;
        margin-right: calc((50vw - 50%) * -1) !important; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-consultation-layout__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-consultation-layout__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-consultation-layout__container {
    margin-left: -12.5px;
    margin-right: -12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-consultation-layout__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-consultation-layout__container {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-consultation-layout__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-consultation-layout__container {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-consultation-layout__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-consultation-layout__container {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-consultation-layout__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-consultation-layout__container {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-consultation-layout__container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }
    .b-consultation-layout__container-content {
      width: 100%;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: 70px; }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-consultation-layout__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-consultation-layout__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-consultation-layout__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-consultation-layout__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-consultation-layout__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-consultation-layout__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-consultation-layout__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-consultation-layout__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-consultation-layout__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-consultation-layout__container-content {
    margin-left: -12.5px;
    margin-right: -12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-consultation-layout__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-consultation-layout__container-content {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-consultation-layout__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-consultation-layout__container-content {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-consultation-layout__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-consultation-layout__container-content {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-consultation-layout__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-consultation-layout__container-content {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-consultation-layout__container-content {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }
      @media (min-width: 820px) {
        .b-consultation-layout__container-content {
          -webkit-box-pack: start;
              -ms-flex-pack: start;
                  justify-content: start; } }
      @media (min-width: 951px) {
        .b-consultation-layout__container-content {
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center; } }
      @media (min-width: 1150px) {
        .b-consultation-layout__container-content {
          -webkit-box-pack: start;
              -ms-flex-pack: start;
                  justify-content: start; } }
      @media (min-width: 1281px) {
        .b-consultation-layout__container-content {
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-consultation-layout__container-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-consultation-layout__container-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-consultation-layout__container-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-consultation-layout__container-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-consultation-layout__container-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-consultation-layout__container-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-consultation-layout__container-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 1920px) {
  .b-consultation-layout__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 1280px) {
  .b-consultation-layout__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 950px) {
  .b-consultation-layout__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 660px) {
  .b-consultation-layout__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 450px) {
  .b-consultation-layout__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 320px) {
  .b-consultation-layout__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1400px) and (min-width: 1921px) {
  .b-consultation-layout__container-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-consultation-layout__form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    padding: 30px 20px;
    background-color: #fff;
    z-index: 1; }
    @media (min-width: 451px) {
      .b-consultation-layout__form {
        padding: 50px 30px; } }
    @media (min-width: 661px) {
      .b-consultation-layout__form {
        padding: 50px 80px; } }
    @media (min-width: 951px) {
      .b-consultation-layout__form {
        width: 100%;
        padding: 50px 40px; } }
    @media (min-width: 1281px) {
      .b-consultation-layout__form {
        width: 660px;
        padding: 50px; } }
  .b-consultation-layout__image {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    display: none;
    max-height: 300px; }
    @media (min-width: 1281px) {
      .b-consultation-layout__image {
        display: block; } }
  .b-consultation-layout__advantages-new {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    row-gap: 30px;
    margin-top: 40px; }
    @media (min-width: 451px) {
      .b-consultation-layout__advantages-new {
        margin-top: 60px !important; } }
    @media (min-width: 661px) {
      .b-consultation-layout__advantages-new {
        margin-top: 80px !important;
        grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-consultation-layout__advantages-new {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-consultation-layout__advantages-new {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-consultation-layout__advantages-new {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-consultation-layout__advantages-new {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-consultation-layout__advantages-new {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-consultation-layout__advantages-new {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-consultation-layout__advantages-new {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 951px) {
      .b-consultation-layout__advantages-new {
        margin-top: 100px !important; } }
    @media (min-width: 1281px) {
      .b-consultation-layout__advantages-new {
        margin-top: 110px !important; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-consultation-layout__advantages-new {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-consultation-layout__advantages-new {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-consultation-layout__advantages-new {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-consultation-layout__advantages-new {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-consultation-layout__advantages-new {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-consultation-layout__advantages-new {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-consultation-layout__advantages-new {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 1920px) {
  .b-consultation-layout__advantages-new {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 1280px) {
  .b-consultation-layout__advantages-new {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 950px) {
  .b-consultation-layout__advantages-new {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 660px) {
  .b-consultation-layout__advantages-new {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 450px) {
  .b-consultation-layout__advantages-new {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 320px) {
  .b-consultation-layout__advantages-new {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1400px) and (min-width: 1921px) {
  .b-consultation-layout__advantages-new {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-consultation-layout__advantages-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
    gap: 20px;
    padding: 0 20px;
    font-size: 15px; }
    @media (min-width: 451px) {
      .b-consultation-layout__advantages-item {
        gap: 30px; } }
    @media (min-width: 951px) {
      .b-consultation-layout__advantages-item {
        font-size: 17px; } }
  .b-consultation-layout__advantages {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    /*&-text {
            margin-left: 1rem;

            @include for-width('middle') {
                margin-left: 1.25rem;
            }

            @include for-width('middle2') {
                width: 17.5rem;
                margin-left: 1.5rem;
            }
        }*/ }
    @media (min-width: 451px) {
      .b-consultation-layout__advantages {
        margin-top: 60px !important; } }
    @media (min-width: 661px) {
      .b-consultation-layout__advantages {
        margin-top: 80px !important;
        grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-consultation-layout__advantages {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-consultation-layout__advantages {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-consultation-layout__advantages {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-consultation-layout__advantages {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-consultation-layout__advantages {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-consultation-layout__advantages {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-consultation-layout__advantages {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 951px) {
      .b-consultation-layout__advantages {
        font-size: 17px;
        margin-top: 100px !important; } }
    @media (min-width: 1281px) {
      .b-consultation-layout__advantages {
        margin-top: 110px !important; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-consultation-layout__advantages {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-consultation-layout__advantages {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-consultation-layout__advantages {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-consultation-layout__advantages {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-consultation-layout__advantages {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-consultation-layout__advantages {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-consultation-layout__advantages {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 1920px) {
  .b-consultation-layout__advantages {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 1280px) {
  .b-consultation-layout__advantages {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 950px) {
  .b-consultation-layout__advantages {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 660px) {
  .b-consultation-layout__advantages {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 450px) {
  .b-consultation-layout__advantages {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1400px) and (max-width: 320px) {
  .b-consultation-layout__advantages {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1400px) and (min-width: 1921px) {
  .b-consultation-layout__advantages {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    .b-consultation-layout__advantages-content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      gap: 30px;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; }
      @media (min-width: 661px) {
        .b-consultation-layout__advantages-content {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row; } }
      @media (min-width: 951px) {
        .b-consultation-layout__advantages-content {
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center; } }
    .b-consultation-layout__advantages-item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      /* &:first-child {
                margin-right: 1.5rem;
                margin-bottom: 1.5rem;

                @include for-width('mobile2') {
                    margin-bottom: 0;
                }
            } */ }
    .b-consultation-layout__advantages-image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: 3rem; }
      @media (min-width: 451px) {
        .b-consultation-layout__advantages-image {
          width: 4rem; } }
      @media (min-width: 951px) {
        .b-consultation-layout__advantages-image {
          width: 5rem; } }
      @media (min-width: 1281px) {
        .b-consultation-layout__advantages-image {
          width: 5.5rem; } }
      @media (min-width: 1700px) {
        .b-consultation-layout__advantages-image {
          width: 7.5rem; } }

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/contacts-layout/contacts-layout.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-contacts-layout {
  margin-left: auto !important;
  margin-right: auto !important; }
  @media (max-width: 1920px) {
    .b-contacts-layout {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-contacts-layout {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 6.25px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-contacts-layout {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 7.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-contacts-layout {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-contacts-layout {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-contacts-layout {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 2.5px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-contacts-layout {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-contacts-layout {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(83.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
  .b-contacts-layout__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .b-contacts-layout__menu {
    text-align: center; }
  .b-contacts-layout__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-top: -2rem !important; }
    @media (max-width: 1920px) {
      .b-contacts-layout__info {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-contacts-layout__info {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-contacts-layout__info {
        margin-left: -12.5px;
        margin-right: -12.5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-contacts-layout__info {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-contacts-layout__info {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-contacts-layout__info {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-contacts-layout__info {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-contacts-layout__info {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-contacts-layout__info {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-contacts-layout__info {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-contacts-layout__info {
        margin-left: -5px;
        margin-right: -5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-contacts-layout__info {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-contacts-layout__info {
        width: 100vw !important;
        margin-left: calc((50vw - 50%) * -1) !important;
        margin-right: calc((50vw - 50%) * -1) !important; } }
  .b-contacts-layout__item {
    margin-top: 2rem !important; }
    @media (max-width: 1920px) {
      .b-contacts-layout__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-contacts-layout__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-contacts-layout__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-contacts-layout__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-contacts-layout__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-contacts-layout__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-contacts-layout__item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-contacts-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-contacts-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-contacts-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-contacts-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-contacts-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-contacts-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-contacts-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    .b-contacts-layout__item .b-contacts-info {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      height: 100%; }
  .b-contacts-layout__map {
    margin-top: 2rem; }
    .b-contacts-layout__map .b-yandex-map {
      width: 100%;
      height: 19rem; }
      @media (max-width: 450px) {
        .b-contacts-layout__map .b-yandex-map {
          width: 100vw !important;
          margin-left: calc((50vw - 50%) * -1) !important;
          margin-right: calc((50vw - 50%) * -1) !important; } }

/*!*****************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/select2/dist/css/select2.min.css ***!
  \*****************************************************************************************************************************/
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline;list-style:none;padding:0}.select2-container .select2-selection--multiple .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;margin-left:5px;padding:0;max-width:100%;resize:none;height:18px;vertical-align:bottom;font-family:sans-serif;overflow:hidden;word-break:keep-all}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option--selectable{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px;padding-right:0px}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;padding-bottom:5px;padding-right:5px;position:relative}.select2-container--default .select2-selection--multiple.select2-selection--clearable{padding-right:25px}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;font-weight:bold;height:20px;margin-right:10px;margin-top:5px;position:absolute;right:0;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:inline-block;margin-left:5px;margin-top:5px;padding:0;padding-left:20px;position:relative;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}.select2-container--default .select2-selection--multiple .select2-selection__choice__display{cursor:default;padding-left:2px;padding-right:5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{background-color:transparent;border:none;border-right:1px solid #aaa;border-top-left-radius:4px;border-bottom-left-radius:4px;color:#999;cursor:pointer;font-size:1em;font-weight:bold;padding:0 4px;position:absolute;left:0;top:0}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus{background-color:#f1f1f1;color:#333;outline:none}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left:5px;padding-right:2px}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-left:1px solid #aaa;border-right:none;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear{float:left;margin-left:10px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--group{padding:0}.select2-container--default .select2-results__option--disabled{color:#999}.select2-container--default .select2-results__option--selected{background-color:#ddd}.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);background-image:-o-linear-gradient(top, #fff 50%, #eee 100%);background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);background-image:-o-linear-gradient(top, #eee 50%, #ccc 100%);background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #fff 0%, #eee 50%);background-image:-o-linear-gradient(top, #fff 0%, #eee 50%);background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);background-image:-o-linear-gradient(top, #eee 50%, #fff 100%);background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0;padding-bottom:5px;padding-right:5px}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;display:inline-block;margin-left:5px;margin-top:5px;padding:0}.select2-container--classic .select2-selection--multiple .select2-selection__choice__display{cursor:default;padding-left:2px;padding-right:5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{background-color:transparent;border:none;border-top-left-radius:4px;border-bottom-left-radius:4px;color:#888;cursor:pointer;font-size:1em;font-weight:bold;padding:0 4px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555;outline:none}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left:5px;padding-right:2px}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option--group{padding:0}.select2-container--classic .select2-results__option--disabled{color:grey}.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb}

/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/component/select2/style.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
.select2-container--integrations .select2-dropdown {
  background-color: #e2e9ff;
  padding: 0 1.25rem 2rem;
  border: none; }

.select2-container--integrations .select2-results__option {
  list-style: none; }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/documents-layout/documents-layout.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-documents-layout__title {
  text-align: center; }

@media (min-width: 1281px) {
  .b-documents-layout__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-documents-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-documents-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-documents-layout__container {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-documents-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-documents-layout__container {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-documents-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-documents-layout__container {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-documents-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-documents-layout__container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-documents-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-documents-layout__container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-documents-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-documents-layout__control {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 2rem; }
  @media (min-width: 451px) {
    .b-documents-layout__control {
      margin-bottom: 3.5rem; } }
  @media (min-width: 951px) {
    .b-documents-layout__control {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-bottom: 0; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-documents-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-documents-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-documents-layout__control {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-documents-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-documents-layout__control {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-documents-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-documents-layout__control {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-documents-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-documents-layout__control {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-documents-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-documents-layout__control {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-documents-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-documents-layout__control {
      display: block; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-documents-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-documents-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-documents-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-documents-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-documents-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-documents-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-documents-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-documents-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-documents-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-documents-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-documents-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-documents-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-documents-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-documents-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-documents-layout__filter-mobile {
  background-color: #e2e9ff;
  margin-bottom: 1.25rem; }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-documents-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-documents-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-documents-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-documents-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-documents-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-documents-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-documents-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-documents-layout__filter-mobile {
      display: none; } }
  .b-documents-layout__filter-mobile .select2,
  .b-documents-layout__filter-mobile .selection,
  .b-documents-layout__filter-mobile .select2-selection {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .b-documents-layout__filter-mobile .select2-selection {
    padding: 1rem 2rem; }
    .b-documents-layout__filter-mobile .select2-selection::after {
      content: '';
      display: block;
      margin-left: auto;
      width: 11px;
      height: 7px;
      background-image: url("/images/icons/arrow.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
      -webkit-transition: -webkit-transform 0.2s linear;
      transition: -webkit-transform 0.2s linear;
      -o-transition: transform 0.2s linear;
      transition: transform 0.2s linear;
      transition: transform 0.2s linear, -webkit-transform 0.2s linear; }
    .b-documents-layout__filter-mobile .select2-selection[aria-expanded="true"]::after {
      -webkit-transform: rotate(0);
              transform: rotate(0); }
  .b-documents-layout__filter-mobile .select2-selection__rendered {
    padding: 0; }

.b-documents-layout__filter {
  display: none;
  background-color: #e2e9ff;
  padding: 2.5rem 2rem;
  border-radius: 5px; }
  @media (min-width: 1281px) {
    .b-documents-layout__filter {
      display: block; } }
  .b-documents-layout__filter-type {
    margin-bottom: 1rem;
    color: #00a;
    font-weight: 500; }
  .b-documents-layout__filter-items {
    margin-left: 1rem;
    margin-bottom: 2rem; }
    .b-documents-layout__filter-items:last-child {
      margin-bottom: 0; }
  .b-documents-layout__filter-item {
    display: block;
    color: #232323;
    margin: 20px 0; }
    .b-documents-layout__filter-item.disabled {
      pointer-events: none; }
    .b-documents-layout__filter-item.active {
      pointer-events: none;
      font-weight: 700 !important; }
    .b-documents-layout__filter-item.subitem {
      margin-left: 0.5rem;
      margin-top: 10px;
      margin-bottom: 0;
      font-weight: 400;
      color: #595757; }

.b-documents-layout__search {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  margin-bottom: 1.25rem;
  background-color: #ffd9d7;
  border-radius: 5px;
  padding: 1.1rem 2rem; }
  @media (min-width: 661px) {
    .b-documents-layout__search {
      margin-bottom: 2rem; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-documents-layout__search {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-documents-layout__search {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-documents-layout__search {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-documents-layout__search {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-documents-layout__search {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-documents-layout__search {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-documents-layout__search {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-documents-layout__search {
      width: 100%;
      margin-left: 0;
      margin-right: 0; } }
  .b-documents-layout__search::after {
    content: '';
    margin-left: 0.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    -webkit-mask-image: url("/images/icons/search.svg");
            mask-image: url("/images/icons/search.svg");
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    background-color: #232323; }
  .b-documents-layout__search input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background-color: transparent; }
    .b-documents-layout__search input::-webkit-input-placeholder {
      opacity: 1; }
    .b-documents-layout__search input::-moz-placeholder {
      opacity: 1; }
    .b-documents-layout__search input:-ms-input-placeholder {
      opacity: 1; }
    .b-documents-layout__search input::-ms-input-placeholder {
      opacity: 1; }
    .b-documents-layout__search input::placeholder {
      opacity: 1; }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-documents-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-documents-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-documents-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-documents-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-documents-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-documents-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-documents-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-documents-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-documents-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-documents-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-documents-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-documents-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-documents-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-documents-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-documents-layout__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-documents-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-documents-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-documents-layout__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-documents-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-documents-layout__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-documents-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-documents-layout__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-documents-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-documents-layout__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-documents-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-documents-layout__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-documents-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }

.b-documents-layout__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.25rem 1rem;
  position: relative;
  background-color: #fff;
  border-radius: 5px;
  color: #232323;
  overflow: hidden; }
  @media (max-width: 1920px) {
    .b-documents-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-documents-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-documents-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-documents-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-documents-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-documents-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-documents-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  .b-documents-layout__item:hover {
    color: #232323; }
  .b-documents-layout__item object {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50px;
            flex: 0 0 50px;
    margin-left: auto;
    flex: 0 0 50px; }
  @media (min-width: 451px) {
    .b-documents-layout__item {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1500px) and (max-width: 1920px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1500px) and (max-width: 1280px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 1500px) and (max-width: 950px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 1500px) and (max-width: 660px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 1500px) and (max-width: 450px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1500px) and (max-width: 320px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1500px) and (min-width: 1921px) {
  .b-documents-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }
  .b-documents-layout__item-content {
    margin: 0.75rem 0; }
    @media (min-width: 451px) {
      .b-documents-layout__item-content {
        margin: 0.75rem 1.5rem 0; } }
  .b-documents-layout__item-desc {
    margin-top: 0.5rem;
    color: #595757; }
  .b-documents-layout__item-icon {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%; }
    @media (min-width: 451px) {
      .b-documents-layout__item-icon {
        width: auto; } }
  .b-documents-layout__item-link {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    display: block;
    margin-left: auto;
    background-image: url("/images/documents-layout/download.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer; }
    .b-documents-layout__item-link:hover {
      opacity: 0.8; }

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/equipment-setup/equipment-setup.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-equipment-setup__title {
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  @media (min-width: 661px) {
    .b-equipment-setup__title {
      margin-top: 4.25rem;
      margin-bottom: 2rem; } }

.b-equipment-setup__desc {
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.45rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: left;
  max-width: 54rem;
  margin: 0 auto 2rem; }
  @media (min-width: 661px) {
    .b-equipment-setup__desc {
      text-align: center;
      margin: 0 auto 4rem; } }

.b-equipment-setup__filters-wrapper {
  max-width: 52rem;
  width: 100%;
  margin: 0 auto; }

.b-equipment-setup__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: -1rem;
  margin-left: -10px; }

.b-equipment-setup__filter {
  font-weight: 700;
  font-size: 1.25rem;
  margin-top: 1rem;
  line-height: 1.75rem;
  margin-left: 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent !important; }
  .b-equipment-setup__filter:last-child {
    margin-right: 0; }
  .b-equipment-setup__filter:hover {
    color: #00a;
    border-bottom: 2px solid #00a !important; }
  .b-equipment-setup__filter.active {
    color: #00a;
    border-bottom: 2px solid #00a !important; }

.b-equipment-setup__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-equipment-setup__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-equipment-setup__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-equipment-setup__items {
    margin-left: -12.5px;
    margin-right: -12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-equipment-setup__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-equipment-setup__items {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-equipment-setup__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-equipment-setup__items {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-equipment-setup__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-equipment-setup__items {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-equipment-setup__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-equipment-setup__items {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-equipment-setup__items {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0; } }

.b-equipment-setup__img {
  margin-bottom: 1rem; }
  @media (min-width: 951px) {
    .b-equipment-setup__img {
      margin-bottom: 2rem; } }

.b-equipment-setup__item {
  margin-top: 1rem !important; }
  @media (min-width: 661px) {
    .b-equipment-setup__item {
      margin-top: 2rem !important; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-equipment-setup__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-equipment-setup__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-equipment-setup__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-equipment-setup__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-equipment-setup__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-equipment-setup__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-equipment-setup__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) {
    .b-equipment-setup__item {
      margin-top: 4rem !important; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-equipment-setup__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-equipment-setup__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-equipment-setup__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-equipment-setup__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-equipment-setup__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-equipment-setup__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-equipment-setup__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

.b-equipment-setup__item-title {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-bottom: 0.5rem; }
  @media (min-width: 951px) {
    .b-equipment-setup__item-title {
      margin-bottom: 1rem; } }

.b-equipment-setup__item-desc {
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.25rem;
  margin-bottom: 0.5rem; }
  @media (min-width: 951px) {
    .b-equipment-setup__item-desc {
      margin-bottom: 1rem; } }

.b-equipment-setup__wrapper-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0.5rem; }
  @media (min-width: 951px) {
    .b-equipment-setup__wrapper-link {
      margin-bottom: 1rem; } }

.b-equipment-setup__link {
  display: block;
  padding-left: 1rem;
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.25rem;
  color: #252525; }
  .b-equipment-setup__link:hover {
    text-decoration: underline;
    color: #252525; }
  .b-equipment-setup__link--blue {
    color: #00a; }
    .b-equipment-setup__link--blue:hover {
      text-decoration: underline;
      color: #00a; }

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/equipments/equipments-detail-layout/equipments-detail-layout.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
@media (min-width: 451px) {
  .b-equipments-detail-layout__nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; } }

.b-equipments-detail-layout__nav-item {
  margin-top: 1rem;
  cursor: pointer; }
  @media (min-width: 451px) {
    .b-equipments-detail-layout__nav-item {
      margin-left: 2rem;
      margin-top: 0; } }
  @media (min-width: 661px) {
    .b-equipments-detail-layout__nav-item {
      margin-left: 5rem; } }
  .b-equipments-detail-layout__nav-item:first-child {
    margin-left: 0; }
  .b-equipments-detail-layout__nav-item:hover {
    opacity: 0.6; }
  .b-equipments-detail-layout__nav-item.active {
    color: #00a;
    text-decoration: underline;
    pointer-events: none; }

.b-equipments-detail-layout__detail-item {
  display: none; }
  .b-equipments-detail-layout__detail-item.active {
    display: block; }

.b-equipments-detail-layout__features-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1rem 0.5rem; }
  @media (min-width: 951px) {
    .b-equipments-detail-layout__features-item {
      padding: 1rem 1.5rem; } }
  @media (min-width: 661px) {
    .b-equipments-detail-layout__features-item {
      padding: 1rem 2rem; } }
  .b-equipments-detail-layout__features-item.bg-white {
    background-color: #fff; }

.b-equipments-detail-layout__features-name {
  width: 50%;
  margin-right: 1rem; }

.b-equipments-detail-layout__features-desc {
  width: 50%; }

.b-equipments-detail-layout__history-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-equipments-detail-layout__history-items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-equipments-detail-layout__history-items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-equipments-detail-layout__history-items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-equipments-detail-layout__history-items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-equipments-detail-layout__history-items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-equipments-detail-layout__history-items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-equipments-detail-layout__history-items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-equipments-detail-layout__history-items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-equipments-detail-layout__history-items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-equipments-detail-layout__history-items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-equipments-detail-layout__history-items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-equipments-detail-layout__history-items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }

@media (max-width: 1920px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (max-width: 1280px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (max-width: 950px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (max-width: 660px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (max-width: 450px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (max-width: 320px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1921px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-equipments-detail-layout__history-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

.b-equipments-detail-layout__history-item .b-product-with-price {
  height: 100%; }

.b-equipments-detail-layout__history-item .b-product-with-price__main {
  height: 100%; }

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/equipments/equipments-main-layout/equipments-main-layout.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-equipments-main-layout__title {
  text-align: center; }

@media (min-width: 951px) {
  .b-equipments-main-layout__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; } }

.b-equipments-main-layout__left {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 15rem;
  margin-right: 1rem; }
  @media (min-width: 1281px) {
    .b-equipments-main-layout__left {
      width: 19rem;
      margin-right: 2rem; } }

.b-equipments-main-layout__categories {
  display: none;
  margin-bottom: 2rem; }
  @media (min-width: 951px) {
    .b-equipments-main-layout__categories {
      display: block; } }

.b-equipments-main-layout__filter {
  left: 0;
  top: 20%;
  position: fixed;
  z-index: 100;
  height: 30rem;
  overflow: auto;
  -webkit-transition: -webkit-transform 0.2s linear;
  transition: -webkit-transform 0.2s linear;
  -o-transition: transform 0.2s linear;
  transition: transform 0.2s linear;
  transition: transform 0.2s linear, -webkit-transform 0.2s linear;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%); }
  .b-equipments-main-layout__filter.active {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  @media (min-width: 951px) {
    .b-equipments-main-layout__filter {
      position: relative;
      top: 0;
      height: auto;
      -webkit-transform: translateX(0);
              transform: translateX(0); } }
  .b-equipments-main-layout__filter-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    background-image: url("/images/icons/exit.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer; }
    .b-equipments-main-layout__filter-close:hover {
      opacity: 0.8; }
    @media (min-width: 951px) {
      .b-equipments-main-layout__filter-close {
        display: none; } }

.b-equipments-main-layout__filter-mobile {
  background-color: #e2e9ff;
  margin-bottom: 0.5rem; }
  @media (max-width: 1920px) {
    .b-equipments-main-layout__filter-mobile {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-equipments-main-layout__filter-mobile {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-equipments-main-layout__filter-mobile {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-equipments-main-layout__filter-mobile {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-equipments-main-layout__filter-mobile {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-equipments-main-layout__filter-mobile {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-equipments-main-layout__filter-mobile {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-equipments-main-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-equipments-main-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-equipments-main-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-equipments-main-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-equipments-main-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-equipments-main-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-equipments-main-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 951px) {
    .b-equipments-main-layout__filter-mobile {
      display: none; } }
  .b-equipments-main-layout__filter-mobile .select2,
  .b-equipments-main-layout__filter-mobile .selection,
  .b-equipments-main-layout__filter-mobile .select2-selection {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .b-equipments-main-layout__filter-mobile .select2-selection {
    padding: 1rem 2rem; }
    .b-equipments-main-layout__filter-mobile .select2-selection::after {
      content: '';
      display: block;
      margin-left: auto;
      width: 11px;
      height: 7px;
      background-image: url("/images/icons/arrow.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
      -webkit-transition: -webkit-transform 0.2s linear;
      transition: -webkit-transform 0.2s linear;
      -o-transition: transform 0.2s linear;
      transition: transform 0.2s linear;
      transition: transform 0.2s linear, -webkit-transform 0.2s linear; }
    .b-equipments-main-layout__filter-mobile .select2-selection[aria-expanded="true"]::after {
      -webkit-transform: rotate(0);
              transform: rotate(0); }
  .b-equipments-main-layout__filter-mobile .select2-selection__rendered {
    padding: 0; }

.b-equipments-main-layout__right {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; }
  @media (max-width: 1920px) {
    .b-equipments-main-layout__right {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-equipments-main-layout__right {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-equipments-main-layout__right {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-equipments-main-layout__right {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-equipments-main-layout__right {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-equipments-main-layout__right {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-equipments-main-layout__right {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-equipments-main-layout__right {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-equipments-main-layout__right {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-equipments-main-layout__right {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-equipments-main-layout__right {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-equipments-main-layout__right {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-equipments-main-layout__sort {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #9e9d9d;
  margin-bottom: 0.5rem; }
  @media (max-width: 1920px) {
    .b-equipments-main-layout__sort {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-equipments-main-layout__sort {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-equipments-main-layout__sort {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-equipments-main-layout__sort {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-equipments-main-layout__sort {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-equipments-main-layout__sort {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-equipments-main-layout__sort {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) {
    .b-equipments-main-layout__sort {
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
      margin-bottom: 2rem; } }
  .b-equipments-main-layout__sort::after {
    content: '';
    width: 18px;
    height: 9px;
    background-image: url("/images/icons/arrow.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: -webkit-transform 0.2s linear;
    -o-transition: transform 0.2s linear;
    transition: transform 0.2s linear;
    transition: transform 0.2s linear, -webkit-transform 0.2s linear; }
  .b-equipments-main-layout__sort.active::after {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  .b-equipments-main-layout__sort-current, .b-equipments-main-layout__sort-item {
    color: #232323;
    cursor: pointer; }
  .b-equipments-main-layout__sort-current {
    margin: 0 0.5rem; }
  .b-equipments-main-layout__sort-items {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    padding: 0.5rem;
    background-color: #e5e5e5;
    border-radius: 5px;
    z-index: 100; }
    @media (min-width: 951px) {
      .b-equipments-main-layout__sort-items {
        right: 0;
        left: auto; } }
  .b-equipments-main-layout__sort-item.active {
    pointer-events: none;
    color: #00a; }

.b-equipments-main-layout__price-mobile-button {
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media (max-width: 1920px) {
    .b-equipments-main-layout__price-mobile-button {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-equipments-main-layout__price-mobile-button {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-equipments-main-layout__price-mobile-button {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-equipments-main-layout__price-mobile-button {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-equipments-main-layout__price-mobile-button {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-equipments-main-layout__price-mobile-button {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-equipments-main-layout__price-mobile-button {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) {
    .b-equipments-main-layout__price-mobile-button {
      display: none; } }
  .b-equipments-main-layout__price-mobile-button .b-button__content {
    border-radius: 0.25rem; }

@media (max-width: 1920px) {
  .b-equipments-main-layout__items {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (max-width: 1280px) {
  .b-equipments-main-layout__items {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (max-width: 950px) {
  .b-equipments-main-layout__items {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (max-width: 660px) {
  .b-equipments-main-layout__items {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (max-width: 450px) {
  .b-equipments-main-layout__items {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (max-width: 320px) {
  .b-equipments-main-layout__items {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1921px) {
  .b-equipments-main-layout__items {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/events-layout/events-layout.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-events-layout__main {
  position: relative; }

.b-events-layout .b-title-with-desc__title {
  margin-top: 1rem; }
  @media (min-width: 450px) {
    .b-events-layout .b-title-with-desc__title {
      margin-top: 0; } }

.b-events-layout__content {
  position: relative; }
  .b-events-layout__content-loading {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 5; }
    .b-events-layout__content-loading::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: #9e9d9d;
      opacity: 0.2; }
    .b-events-layout__content-loading.active {
      display: block; }
    .b-events-layout__content-loading .b-loading {
      top: 10rem !important; }

.b-events-layout__categories {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-left: -0.5rem;
  margin-top: -1rem; }

.b-events-layout__category {
  margin: 1rem auto 0 !important;
  padding-left: 0.5rem;
  color: #232323;
  font-weight: 400; }
  @media (min-width: 661px) {
    .b-events-layout__category {
      font-weight: 700; } }
  .b-events-layout__category.active {
    color: #00a;
    text-decoration: underline;
    pointer-events: none; }

.b-events-layout__tags-container {
  display: block; }
  @media (min-width: 1281px) {
    .b-events-layout__tags-container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.b-events-layout__tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -1rem;
  margin-left: -0.5rem;
  max-height: 4rem;
  overflow: hidden; }
  @media (min-width: 451px) {
    .b-events-layout__tags {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start; } }
  @media (min-width: 951px) {
    .b-events-layout__tags {
      margin-top: -1.5rem; } }

.b-events-layout__tags-button {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.5rem;
  color: #232323;
  font-weight: 400;
  cursor: pointer; }
  @media (min-width: 451px) {
    .b-events-layout__tags-button {
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end; } }
  @media (min-width: 1281px) {
    .b-events-layout__tags-button {
      margin-left: 1rem; } }
  .b-events-layout__tags-button::after {
    content: '';
    width: 11px;
    height: 100%;
    margin-left: 7px;
    margin-top: 3px;
    -webkit-mask-image: url("/images/arrow-select.svg");
            mask-image: url("/images/arrow-select.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    background-color: #00a;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    -o-transition: transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s; }
  .b-events-layout__tags-button:hover {
    color: #9e9d9d; }
    .b-events-layout__tags-button:hover::after {
      background-color: #9e9d9d; }
  .b-events-layout__tags-button.disabled {
    pointer-events: none; }
  .b-events-layout__tags-button.active::after {
    -webkit-transform: rotate(0.5turn);
            transform: rotate(0.5turn); }

.b-events-layout__tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 10px 30px;
  margin-top: 1rem;
  margin-left: 0.5rem;
  min-height: 2.5rem;
  border-radius: 1.25rem;
  background-color: #d6def4;
  color: #232323; }
  @media (min-width: 951px) {
    .b-events-layout__tag {
      margin-top: 1.5rem; } }
  .b-events-layout__tag.active {
    background-color: #ffd9d7; }

.b-events-layout__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -4rem !important; }
  @media (max-width: 1920px) {
    .b-events-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-events-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-events-layout__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-events-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-events-layout__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-events-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-events-layout__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-events-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-events-layout__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-events-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-events-layout__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-events-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-events-layout__item-info {
  display: none;
  margin-top: 8rem !important;
  margin-bottom: 4rem !important;
  -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
          order: 6; }
  @media (max-width: 1920px) {
    .b-events-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-events-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-events-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-events-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-events-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-events-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-events-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-events-layout__item-info.active {
    display: block; }

.b-events-layout__item {
  display: block;
  position: relative;
  margin-top: 6rem !important;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: opacity 0.3s, margin-top 0.3s;
  -o-transition: opacity 0.3s, margin-top 0.3s;
  transition: opacity 0.3s, margin-top 0.3s; }
  @media (max-width: 1920px) {
    .b-events-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-events-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-events-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-events-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-events-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-events-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-events-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 451px) {
    .b-events-layout__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  @media (min-width: 951px) {
    .b-events-layout__item {
      display: block; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-events-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-events-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-events-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-events-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-events-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-events-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-events-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-events-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-events-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-events-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-events-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-events-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-events-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-events-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-events-layout__item:hover .b-events-layout__item-title {
    color: #00a; }
  .b-events-layout__item.active {
    opacity: 1;
    margin-top: 4rem !important; }
  .b-events-layout__item-type {
    position: absolute;
    left: 1rem;
    top: -0.7rem;
    color: #fff;
    background: #0000AA;
    border-radius: 50px;
    font-size: 0.75rem;
    line-height: 0.4rem;
    padding: 0.5rem 0.6rem; }
  .b-events-layout__item-type.onlayn {
    background: #00A769; }
  .b-events-layout__item-type.zapis {
    background: #FF454F; }
  .b-events-layout__item-type.gibridnyy {
    background: #252525; }
  .b-events-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
    max-height: 16rem;
    overflow: hidden; }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-events-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-events-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-events-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-events-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-events-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-events-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-events-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-events-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-events-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-events-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-events-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-events-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-events-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-events-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
    @media (min-width: 951px) {
      .b-events-layout__item-image {
        width: 100%; } }
  @media (min-width: 451px) {
    .b-events-layout__item-content {
      margin-left: 1.5rem; } }
  @media (min-width: 951px) {
    .b-events-layout__item-content {
      margin-left: 0; } }
  .b-events-layout__item-content-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 1rem 0; }
  .b-events-layout__item-tag {
    color: #9e9d9d;
    margin-right: 0.2rem; }
  .b-events-layout__item-date {
    color: #9e9d9d; }
    @media (min-width: 451px) {
      .b-events-layout__item-date {
        margin: 0; } }
    @media (min-width: 951px) {
      .b-events-layout__item-date {
        margin: 0;
        text-align: end; } }
  .b-events-layout__item-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    font-weight: 700;
    color: #232323; }
  .b-events-layout__item-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    margin-top: 1rem; }
  .b-events-layout__item-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2; }
  .b-events-layout__item-none-example {
    display: none; }

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/footer-landing-vebinar/footer-landing-vebinar.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-footer-landing-vebinar {
  position: relative;
  background-color: #232323;
  border-radius: 40px 40px 0 0; }
  .b-footer-landing-vebinar__content {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-top: 2rem;
    padding-bottom: 3rem;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    @media (max-width: 1920px) {
      .b-footer-landing-vebinar__content {
        padding-left: 7rem;
        padding-right: 7rem; } }
    @media (max-width: 1280px) {
      .b-footer-landing-vebinar__content {
        padding-left: 4rem;
        padding-right: 4rem; } }
    @media (max-width: 950px) {
      .b-footer-landing-vebinar__content {
        padding-left: 2.5rem;
        padding-right: 2.5rem; } }
    @media (max-width: 660px) {
      .b-footer-landing-vebinar__content {
        padding-left: 1.5rem;
        padding-right: 1.5rem; } }
    @media (max-width: 450px) {
      .b-footer-landing-vebinar__content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (max-width: 320px) {
      .b-footer-landing-vebinar__content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (min-width: 1920px) {
      .b-footer-landing-vebinar__content {
        padding-left: 7rem;
        padding-right: 7rem; } }
  .b-footer-landing-vebinar__logo-cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    @media (max-width: 450px) {
      .b-footer-landing-vebinar__logo-cont {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: 100%; } }
    .b-footer-landing-vebinar__logo-cont a {
      background-position: center; }
  .b-footer-landing-vebinar__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: 2rem;
    height: 3rem;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3; }
    .b-footer-landing-vebinar__logo:nth-of-type(1) {
      width: 100px; }
      @media (min-width: 451px) {
        .b-footer-landing-vebinar__logo:nth-of-type(1) {
          margin-right: 50px; } }
    .b-footer-landing-vebinar__logo:nth-of-type(2) {
      width: 130px;
      position: relative;
      top: 17px; }
    @media (min-width: 451px) {
      .b-footer-landing-vebinar__logo {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
        margin-top: 0;
        margin-bottom: 0; } }
    @media (min-width: 951px) {
      .b-footer-landing-vebinar__logo {
        margin-bottom: 0;
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3; } }
  .b-footer-landing-vebinar__info {
    color: #9e9d9d;
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
    margin-bottom: 1rem; }
    @media (max-width: 1920px) {
      .b-footer-landing-vebinar__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-footer-landing-vebinar__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-footer-landing-vebinar__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-footer-landing-vebinar__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-footer-landing-vebinar__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-footer-landing-vebinar__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-footer-landing-vebinar__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    .b-footer-landing-vebinar__info a {
      color: #9e9d9d;
      text-decoration: none;
      border-bottom: none; }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    @media (min-width: 951px) {
      .b-footer-landing-vebinar__info {
        -webkit-box-ordinal-group: 6;
            -ms-flex-order: 5;
                order: 5; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-footer-landing-vebinar__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-footer-landing-vebinar__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-footer-landing-vebinar__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-footer-landing-vebinar__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-footer-landing-vebinar__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-footer-landing-vebinar__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-footer-landing-vebinar__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 1281px) {
      .b-footer-landing-vebinar__info {
        margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-footer-landing-vebinar__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-footer-landing-vebinar__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-footer-landing-vebinar__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-footer-landing-vebinar__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-footer-landing-vebinar__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-footer-landing-vebinar__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-footer-landing-vebinar__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1600px) and (max-width: 1920px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1600px) and (max-width: 1280px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1600px) and (max-width: 950px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1600px) and (max-width: 660px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1600px) and (max-width: 450px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1600px) and (max-width: 320px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1600px) and (min-width: 1921px) {
  .b-footer-landing-vebinar__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-footer-landing-vebinar__cell {
    display: none;
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5; }
    @media (max-width: 1920px) {
      .b-footer-landing-vebinar__cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(8.33333% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-footer-landing-vebinar__cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(8.33333% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-footer-landing-vebinar__cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(8.33333% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-footer-landing-vebinar__cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(8.33333% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-footer-landing-vebinar__cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(8.33333% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-footer-landing-vebinar__cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(8.33333% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-footer-landing-vebinar__cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(8.33333% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (min-width: 661px) {
      .b-footer-landing-vebinar__cell {
        display: block; } }
  .b-footer-landing-vebinar__another {
    margin-left: auto;
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
    .b-footer-landing-vebinar__another a {
      display: block;
      border: none;
      width: 100%;
      color: #9e9d9d;
      margin-bottom: 0.5rem; }
    .b-footer-landing-vebinar__another div {
      display: block;
      border: none;
      width: 100%;
      color: #9e9d9d;
      margin-bottom: 0.5rem; }
    @media (max-width: 660px) {
      .b-footer-landing-vebinar__another {
        margin-right: auto; } }

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/footer-landing/footer-landing.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-footer-landing {
  position: relative;
  background-color: #232323;
  border-radius: 40px 40px 0 0; }
  .b-footer-landing__content {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-top: 3.5rem;
    padding-bottom: 2.5rem; }
    @media (max-width: 1920px) {
      .b-footer-landing__content {
        padding-left: 7rem;
        padding-right: 7rem; } }
    @media (max-width: 1280px) {
      .b-footer-landing__content {
        padding-left: 4rem;
        padding-right: 4rem; } }
    @media (max-width: 950px) {
      .b-footer-landing__content {
        padding-left: 2.5rem;
        padding-right: 2.5rem; } }
    @media (max-width: 660px) {
      .b-footer-landing__content {
        padding-left: 1.5rem;
        padding-right: 1.5rem; } }
    @media (max-width: 450px) {
      .b-footer-landing__content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (max-width: 320px) {
      .b-footer-landing__content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (min-width: 1920px) {
      .b-footer-landing__content {
        padding-left: 7rem;
        padding-right: 7rem; } }
    @media (min-width: 451px) {
      .b-footer-landing__content {
        padding-top: 4rem;
        padding-bottom: 3rem; } }
  @media (min-width: 451px) and (max-width: 1920px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 1280px) {
    .b-footer-landing__content {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 950px) {
    .b-footer-landing__content {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 660px) {
    .b-footer-landing__content {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 450px) {
    .b-footer-landing__content {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 320px) {
    .b-footer-landing__content {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
    @media (min-width: 661px) {
      .b-footer-landing__content {
        padding-top: 4.5rem;
        padding-bottom: 3.5rem; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-footer-landing__content {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-footer-landing__content {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-footer-landing__content {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-footer-landing__content {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-footer-landing__content {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
    @media (min-width: 951px) {
      .b-footer-landing__content {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        padding-top: 5rem;
        padding-bottom: 4.5rem; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-footer-landing__content {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-footer-landing__content {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-footer-landing__content {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-footer-landing__content {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-footer-landing__content {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
    @media (min-width: 1281px) {
      .b-footer-landing__content {
        padding-top: 6rem;
        padding-bottom: 5rem; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-footer-landing__content {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-footer-landing__content {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-footer-landing__content {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-footer-landing__content {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-footer-landing__content {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-footer-landing__content {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  .b-footer-landing__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: 2rem;
    height: 3rem;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3; }
    @media (max-width: 1920px) {
      .b-footer-landing__logo {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-footer-landing__logo {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-footer-landing__logo {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-footer-landing__logo {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-footer-landing__logo {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-footer-landing__logo {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-footer-landing__logo {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (min-width: 451px) {
      .b-footer-landing__logo {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
        margin-top: 0;
        margin-bottom: 0; } }
  @media (min-width: 451px) and (max-width: 1920px) {
    .b-footer-landing__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 1280px) {
    .b-footer-landing__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 950px) {
    .b-footer-landing__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 660px) {
    .b-footer-landing__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 450px) {
    .b-footer-landing__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 320px) {
    .b-footer-landing__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-footer-landing__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-footer-landing__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-footer-landing__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-footer-landing__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-footer-landing__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-footer-landing__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-footer-landing__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-footer-landing__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    @media (min-width: 951px) {
      .b-footer-landing__logo {
        margin-bottom: 0;
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3;
        margin-top: 2rem; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-footer-landing__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-footer-landing__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-footer-landing__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-footer-landing__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-footer-landing__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-footer-landing__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-footer-landing__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-footer-landing__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-footer-landing__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-footer-landing__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-footer-landing__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-footer-landing__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-footer-landing__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-footer-landing__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-footer-landing__info {
    color: #9e9d9d;
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
    margin-bottom: 1rem; }
    @media (max-width: 1920px) {
      .b-footer-landing__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-footer-landing__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-footer-landing__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-footer-landing__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-footer-landing__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-footer-landing__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-footer-landing__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    .b-footer-landing__info a {
      color: #9e9d9d;
      text-decoration: none;
      border-bottom: none; }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    @media (min-width: 951px) {
      .b-footer-landing__info {
        -webkit-box-ordinal-group: 6;
            -ms-flex-order: 5;
                order: 5; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-footer-landing__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-footer-landing__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-footer-landing__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-footer-landing__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-footer-landing__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-footer-landing__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-footer-landing__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 1281px) {
      .b-footer-landing__info {
        margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-footer-landing__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-footer-landing__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-footer-landing__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-footer-landing__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-footer-landing__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-footer-landing__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-footer-landing__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1600px) and (max-width: 1920px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1600px) and (max-width: 1280px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1600px) and (max-width: 950px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1600px) and (max-width: 660px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1600px) and (max-width: 450px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1600px) and (max-width: 320px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1600px) and (min-width: 1921px) {
  .b-footer-landing__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-footer-landing__cell {
    display: none;
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5; }
    @media (max-width: 1920px) {
      .b-footer-landing__cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(8.33333% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-footer-landing__cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(8.33333% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-footer-landing__cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(8.33333% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-footer-landing__cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(8.33333% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-footer-landing__cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(8.33333% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-footer-landing__cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(8.33333% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-footer-landing__cell {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(8.33333% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (min-width: 661px) {
      .b-footer-landing__cell {
        display: block; } }
  .b-footer-landing__another {
    display: block;
    margin-left: auto;
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6; }
    @media (max-width: 1920px) {
      .b-footer-landing__another {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-footer-landing__another {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-footer-landing__another {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-footer-landing__another {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-footer-landing__another {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-footer-landing__another {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-footer-landing__another {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    .b-footer-landing__another a {
      display: block;
      border: none;
      width: 100%;
      color: #9e9d9d;
      margin-bottom: 0.5rem; }
    .b-footer-landing__another div {
      display: block;
      border: none;
      width: 100%;
      color: #9e9d9d;
      margin-bottom: 0.5rem; }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-footer-landing__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/footer/alert.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-alert {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 2000; }
  .b-alert__content {
    display: block;
    position: absolute;
    margin: 0 auto;
    top: 50%;
    left: 0;
    right: 0;
    width: 230px;
    background: #fff0e6;
    -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 25px 15px 10px; }
  .b-alert__content-text {
    font-weight: 400;
    font-size: 0.7rem;
    line-height: 1.05rem; }
  .b-alert__content-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 10px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end; }
  .b-alert__content-button-text {
    color: #9d9d9d;
    cursor: pointer;
    font-weight: 400;
    font-size: 0.7rem;
    line-height: 21px; }

/*!**********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/footer/footer.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-footer {
  position: relative;
  background-color: #232323;
  border-radius: 40px 40px 0 0;
  max-width: 1920px;
  margin: auto; }
  .b-footer__content {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-top: 5rem;
    padding-bottom: 3rem; }
    @media (max-width: 1920px) {
      .b-footer__content {
        padding-left: 7rem;
        padding-right: 7rem; } }
    @media (max-width: 1280px) {
      .b-footer__content {
        padding-left: 4rem;
        padding-right: 4rem; } }
    @media (max-width: 950px) {
      .b-footer__content {
        padding-left: 2.5rem;
        padding-right: 2.5rem; } }
    @media (max-width: 660px) {
      .b-footer__content {
        padding-left: 1.5rem;
        padding-right: 1.5rem; } }
    @media (max-width: 450px) {
      .b-footer__content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (max-width: 320px) {
      .b-footer__content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (min-width: 1920px) {
      .b-footer__content {
        padding-left: 7rem;
        padding-right: 7rem; } }
    @media (min-width: 951px) {
      .b-footer__content {
        padding-top: 8rem;
        padding-bottom: 4rem; } }
  .b-footer__top {
    margin-bottom: 2rem;
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0; }
    @media (max-width: 1920px) {
      .b-footer__top {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-footer__top {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-footer__top {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-footer__top {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-footer__top {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-footer__top {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-footer__top {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    .b-footer__top a {
      display: block;
      border: none;
      width: 100%;
      color: #fff0e6;
      margin-bottom: 0.25rem; }
      .b-footer__top a:hover {
        color: #9e9d9d; }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-footer__top {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-footer__top {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-footer__top {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-footer__top {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-footer__top {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-footer__top {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-footer__top {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-footer__top {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-footer__top {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-footer__top {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-footer__top {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-footer__top {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-footer__top {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-footer__top {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-footer__list {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2; }
    @media (max-width: 1920px) {
      .b-footer__list {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-footer__list {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-footer__list {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-footer__list {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-footer__list {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-footer__list {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-footer__list {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (min-width: 451px) {
      .b-footer__list {
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3;
        margin-bottom: 1.5rem; } }
  @media (min-width: 451px) and (max-width: 1920px) {
    .b-footer__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 1280px) {
    .b-footer__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 950px) {
    .b-footer__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 660px) {
    .b-footer__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 450px) {
    .b-footer__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 320px) {
    .b-footer__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-footer__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 951px) {
      .b-footer__list {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
        margin-bottom: 4rem; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-footer__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-footer__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-footer__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-footer__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-footer__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-footer__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-footer__list {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    .b-footer__list-items {
      display: none;
      margin-bottom: 1rem; }
      @media (min-width: 451px) {
        .b-footer__list-items {
          display: block !important;
          margin-bottom: 0; } }
    .b-footer__list-label {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      color: #fff0e6;
      margin-bottom: 1rem;
      cursor: pointer; }
      .b-footer__list-label::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-left: 5px;
        background-color: #fff0e6;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-image: url("/images/icons/arrow-menu.svg");
                mask-image: url("/images/icons/arrow-menu.svg");
        -webkit-transition: -webkit-transform 0.6s;
        transition: -webkit-transform 0.6s;
        -o-transition: transform 0.6s;
        transition: transform 0.6s;
        transition: transform 0.6s, -webkit-transform 0.6s; }
      @media (min-width: 451px) {
        .b-footer__list-label {
          cursor: text; }
          .b-footer__list-label::after {
            content: none; } }
    .b-footer__list-label.active::after {
      -webkit-transform: rotate(0.5turn);
              transform: rotate(0.5turn); }
    .b-footer__list a {
      display: block;
      border: 0;
      color: #9e9d9d; }
      .b-footer__list a:hover {
        color: #fff0e6; }
      @media (min-width: 451px) {
        .b-footer__list a {
          width: 100%; } }
  .b-footer__list-label a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    color: #fff0e6 !important;
    pointer-events: none;
    cursor: default; }
    .b-footer__list-label a:hover {
      color: #9e9d9d !important; }
    @media (min-width: 451px) {
      .b-footer__list-label a {
        pointer-events: auto;
        cursor: pointer; } }
  .b-footer__bottom {
    padding-bottom: 2rem; }
    @media (min-width: 951px) {
      .b-footer__bottom {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-bottom: 5rem; } }
  .b-footer__little-head-mobile {
    display: block; }
    @media (min-width: 451px) {
      .b-footer__little-head-mobile {
        display: none !important; } }
  .b-footer__logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-top: 4rem;
    margin-bottom: 2rem;
    height: 3rem;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3; }
    @media (max-width: 1920px) {
      .b-footer__logo {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-footer__logo {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-footer__logo {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-footer__logo {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-footer__logo {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-footer__logo {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-footer__logo {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (min-width: 451px) {
      .b-footer__logo {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
        margin-top: 0;
        margin-bottom: 0; } }
  @media (min-width: 451px) and (max-width: 1920px) {
    .b-footer__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 1280px) {
    .b-footer__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 950px) {
    .b-footer__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 660px) {
    .b-footer__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 450px) {
    .b-footer__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 320px) {
    .b-footer__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-footer__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 951px) {
      .b-footer__logo {
        margin-bottom: 0;
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3;
        margin-top: 2rem; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-footer__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(16.66667% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-footer__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(16.66667% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-footer__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(16.66667% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-footer__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(16.66667% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-footer__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(16.66667% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-footer__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(16.66667% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-footer__logo {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(16.66667% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-footer__soc {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
    margin-bottom: 2rem; }
    @media (max-width: 1920px) {
      .b-footer__soc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-footer__soc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-footer__soc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-footer__soc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-footer__soc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-footer__soc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-footer__soc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (min-width: 451px) {
      .b-footer__soc {
        -webkit-box-ordinal-group: 6;
            -ms-flex-order: 5;
                order: 5; } }
  @media (min-width: 451px) and (max-width: 1920px) {
    .b-footer__soc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 1280px) {
    .b-footer__soc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 950px) {
    .b-footer__soc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 660px) {
    .b-footer__soc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 450px) {
    .b-footer__soc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (max-width: 320px) {
    .b-footer__soc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 451px) and (min-width: 1921px) {
    .b-footer__soc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 951px) {
      .b-footer__soc {
        -webkit-box-ordinal-group: 5;
            -ms-flex-order: 4;
                order: 4;
        margin-top: 2rem; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-footer__soc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-footer__soc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-footer__soc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-footer__soc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-footer__soc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-footer__soc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-footer__soc {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    .b-footer__soc a {
      display: block;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      background-color: #9e9d9d;
      -webkit-mask-position: center;
              mask-position: center;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-size: contain;
              mask-size: contain;
      width: 3rem;
      height: 3rem;
      margin-right: 0.5rem;
      border: none;
      cursor: pointer; }
      .b-footer__soc a:hover {
        background-color: #fff0e6; }
      @media (min-width: 451px) {
        .b-footer__soc a {
          width: 1.75rem;
          height: 1.75rem;
          margin-right: 0.75rem; } }
  .b-footer__soc-block {
    margin-bottom: 20px; }
  .b-footer__soc-title {
    font-size: 0.7rem;
    line-height: 1.25rem;
    color: #9e9d9d;
    margin-bottom: 10px; }
  .b-footer__soc-elems {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .b-footer__telegram {
    -webkit-mask-image: url("/images/social/telegram.svg");
            mask-image: url("/images/social/telegram.svg"); }
  .b-footer__vc {
    -webkit-mask-image: url("/images/social/vc.ru.svg");
            mask-image: url("/images/social/vc.ru.svg"); }
  .b-footer__zen {
    -webkit-mask-image: url("/images/social/zen.svg");
            mask-image: url("/images/social/zen.svg"); }
  .b-footer__facebook {
    -webkit-mask-image: url("/images/social/facebook.svg");
            mask-image: url("/images/social/facebook.svg"); }
  .b-footer__youtube {
    -webkit-mask-image: url("/images/social/youtube.svg");
            mask-image: url("/images/social/youtube.svg"); }
  .b-footer__rutube {
    -webkit-mask-image: url("/images/social/RuTube.svg");
            mask-image: url("/images/social/RuTube.svg"); }
  .b-footer__vk {
    -webkit-mask-image: url("/images/social/vk.svg");
            mask-image: url("/images/social/vk.svg"); }
  .b-footer__insta {
    -webkit-mask-image: url("/images/social/insta.svg");
            mask-image: url("/images/social/insta.svg"); }
  .b-footer__payment {
    margin-right: 0.75rem; }
  .b-footer__info {
    color: #9e9d9d;
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4; }
    @media (max-width: 1920px) {
      .b-footer__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-footer__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-footer__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-footer__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-footer__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-footer__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-footer__info {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    .b-footer__info a {
      color: #9e9d9d;
      border-bottom: none;
      text-decoration: none; }
      .b-footer__info a:hover {
        color: #fff0e6; }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-footer__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-footer__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-footer__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-footer__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-footer__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-footer__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-footer__info {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    @media (min-width: 951px) {
      .b-footer__info {
        -webkit-box-ordinal-group: 6;
            -ms-flex-order: 5;
                order: 5;
        margin-top: 2rem; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-footer__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-footer__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-footer__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-footer__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-footer__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-footer__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-footer__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
    @media (min-width: 1600px) {
      .b-footer__info {
        margin-left: 0; } }
  @media (min-width: 1600px) and (max-width: 1920px) {
    .b-footer__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 1280px) {
    .b-footer__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 950px) {
    .b-footer__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 660px) {
    .b-footer__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 450px) {
    .b-footer__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (max-width: 320px) {
    .b-footer__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1600px) and (min-width: 1921px) {
    .b-footer__info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(25% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-footer__another {
    display: none;
    margin-left: auto !important;
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
    margin-top: 2rem; }
    @media (max-width: 1920px) {
      .b-footer__another {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(25% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    @media (max-width: 1280px) {
      .b-footer__another {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(25% - 25px);
        margin-left: 12.5px;
        margin-right: 12.5px;
        margin-top: 0; } }
    @media (max-width: 950px) {
      .b-footer__another {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(25% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0; } }
    @media (max-width: 660px) {
      .b-footer__another {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(25% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0; } }
    @media (max-width: 450px) {
      .b-footer__another {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(25% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (max-width: 320px) {
      .b-footer__another {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(25% - 10px);
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0; } }
    @media (min-width: 1921px) {
      .b-footer__another {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: calc(25% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0; } }
    .b-footer__another a {
      display: block;
      border: none;
      width: 100%;
      color: #9e9d9d;
      margin-bottom: 0.5rem; }
      .b-footer__another a:hover {
        color: #fff0e6; }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-footer__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-footer__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-footer__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-footer__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-footer__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-footer__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-footer__another {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
    @media (min-width: 951px) {
      .b-footer__another {
        display: block; } }
  .b-footer__another.mini {
    display: block;
    width: auto;
    margin-left: 0;
    margin-top: 1rem; }
    @media (min-width: 951px) {
      .b-footer__another.mini {
        display: none; } }
  .b-footer__all {
    display: inline-block !important;
    width: auto !important;
    color: #9e9d9d;
    border-bottom: 1px solid #9e9d9d !important; }
    .b-footer__all:hover {
      color: #fff0e6;
      border-bottom: 1px solid #fff0e6 !important; }
  .b-footer__techart {
    color: #9e9d9d;
    margin-bottom: 0.5rem; }
    .b-footer__techart span {
      color: #9e9d9d; }

/*!******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/form/form.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-form input[type='text'],
.b-form input[type='tel'] {
  width: 100%;
  height: 2.5rem;
  max-width: 17.5rem;
  padding: 0 1.5rem;
  border-radius: 50px;
  border: none;
  text-align: start;
  background-color: #fff; }

.b-form input[type='submit'] {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: end;
      align-self: flex-end;
  padding: 0 1.5rem;
  height: 2.5rem;
  -webkit-transition: background-color 0.3s, color 0.3s;
  -o-transition: background-color 0.3s, color 0.3s;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  background-color: #00a;
  color: #fff0e6; }
  .b-form input[type='submit']:hover {
    background-color: #99cdf1; }

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/header-landing-vebinar/header-landing-vebinar.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-header-landing-vebinar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  border-top: 1px solid transparent;
  margin-top: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 2rem; }
  @media (min-width: 451px) {
    .b-header-landing-vebinar {
      height: auto;
      border-top: none;
      background-color: #f4f4f4; } }
  .b-header-landing-vebinar__back {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #232323;
    width: 100vw !important;
    margin-left: calc((50vw - 50%) * -1) !important;
    margin-right: calc((50vw - 50%) * -1) !important; }
    @media (min-width: 451px) {
      .b-header-landing-vebinar__back {
        display: none; } }
  .b-header-landing-vebinar__logo {
    position: relative;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 4.45rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    margin-right: 1.5rem;
    height: 60px; }
    .b-header-landing-vebinar__logo:nth-of-type(1) {
      width: 100px; }
      @media (min-width: 661px) {
        .b-header-landing-vebinar__logo:nth-of-type(1) {
          margin-right: 50px; } }
    .b-header-landing-vebinar__logo:nth-of-type(2) {
      width: 140px;
      position: relative;
      top: 17px; }
  .b-header-landing-vebinar__container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end; }
    @media (max-width: 580px) {
      .b-header-landing-vebinar__container {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        height: 20px; } }
  .b-header-landing-vebinar__phone {
    margin: 0;
    margin-right: 15.25rem;
    width: auto;
    color: #232323;
    font-weight: normal;
    border: none !important; }
    .b-header-landing-vebinar__phone:hover {
      color: #9e9d9d; }
    @media (max-width: 1100px) {
      .b-header-landing-vebinar__phone {
        margin-right: 9.35rem; } }
    @media (max-width: 580px) {
      .b-header-landing-vebinar__phone {
        display: none; } }
  .b-header-landing-vebinar__recall {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 2.5rem; }
    @media (min-width: 1100px) {
      .b-header-landing-vebinar__recall {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
  .b-header-landing-vebinar__recall-mini {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    right: 0;
    height: 2rem;
    top: 0;
    bottom: 0;
    margin: auto; }
    .b-header-landing-vebinar__recall-mini:hover {
      border-radius: 1.5rem;
      background-color: #008654; }
    @media (min-width: 451px) {
      .b-header-landing-vebinar__recall-mini {
        height: 2.5rem; } }
    @media (min-width: 661px) {
      .b-header-landing-vebinar__recall-mini {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
    @media (min-width: 1100px) {
      .b-header-landing-vebinar__recall-mini {
        display: none; } }

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/header-landing/header-landing.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-header-landing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  border-top: 1px solid transparent;
  margin-top: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 2rem; }
  @media (min-width: 451px) {
    .b-header-landing {
      height: auto;
      border-top: none;
      background-color: #f4f4f4; } }
  .b-header-landing__back {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #232323;
    width: 100vw !important;
    margin-left: calc((50vw - 50%) * -1) !important;
    margin-right: calc((50vw - 50%) * -1) !important; }
    @media (min-width: 451px) {
      .b-header-landing__back {
        display: none; } }
  .b-header-landing__logo {
    position: relative;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 4.45rem;
    height: 2.5rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    margin-right: 1.5rem; }
    @media (min-width: 820px) {
      .b-header-landing__logo {
        margin-right: 3rem; } }
    @media (min-width: 951px) {
      .b-header-landing__logo {
        width: 6.9rem; } }
    @media (min-width: 1400px) {
      .b-header-landing__logo {
        margin-right: 4rem; } }
    @media (max-width: 580px) {
      .b-header-landing__logo {
        height: 2rem; } }
  .b-header-landing__container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end; }
    @media (max-width: 580px) {
      .b-header-landing__container {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        height: 20px; } }
  .b-header-landing__phone {
    margin: 0;
    margin-right: 15.25rem;
    width: auto;
    color: #232323;
    font-weight: normal;
    border: none !important; }
    .b-header-landing__phone:hover {
      color: #9e9d9d; }
    @media (max-width: 1100px) {
      .b-header-landing__phone {
        margin-right: 9.35rem; } }
    @media (max-width: 580px) {
      .b-header-landing__phone {
        font-size: 14px;
        margin-right: 0;
        position: relative;
        top: 30px;
        right: 4px; } }
    @media (max-width: 450px) {
      .b-header-landing__phone {
        right: 12px; } }
  .b-header-landing__recall {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 2.5rem; }
    @media (min-width: 1100px) {
      .b-header-landing__recall {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
  .b-header-landing__recall-mini {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    right: 0;
    height: 2rem;
    top: 0;
    bottom: 0;
    margin: auto; }
    .b-header-landing__recall-mini:hover {
      border-radius: 1.5rem;
      background-color: #008654; }
    @media (min-width: 451px) {
      .b-header-landing__recall-mini {
        height: 2.5rem; } }
    @media (min-width: 661px) {
      .b-header-landing__recall-mini {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
    @media (min-width: 1100px) {
      .b-header-landing__recall-mini {
        display: none; } }
    @media (max-width: 580px) {
      .b-header-landing__recall-mini {
        height: 2rem;
        top: -20px; } }

/*!**********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/header/header.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-header__button-blue {
  font-weight: bold;
  font-size: .75rem;
  color: #FFF0E6;
  background-color: #0000AA;
  border-radius: 25px;
  padding: .3rem 1.25rem; }
  @media (min-width: 661px) {
    .b-header__button-blue {
      padding: .5rem 1.25rem; } }
  .b-header__button-blue:hover {
    color: #FFF0E6;
    background-color: #99CDF1; }

.b-header__button-bordered {
  display: inline-block;
  padding: .2rem 1.25rem;
  border: 1px solid #232323 !important;
  border-radius: 8px;
  font-size: .7rem;
  background: none;
  color: #232323; }
  .b-header__button-bordered:hover {
    color: #0000AA;
    border-color: #0000AA !important; }

.b-header__fade {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: none;
  z-index: 99; }

.b-header__top, .b-header__bottom {
  margin: auto; }

.b-header__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 2rem;
  padding-top: .5rem;
  padding-bottom: .5rem; }
  @media (min-width: 1281px) {
    .b-header__top {
      padding-top: .75rem;
      padding-bottom: .75rem; } }
  .b-header__top .b-header__menu-btn {
    width: 2rem;
    text-align: right; }
    @media (min-width: 451px) {
      .b-header__top .b-header__menu-btn {
        width: 2.5rem; } }
    @media (min-width: 661px) {
      .b-header__top .b-header__menu-btn {
        width: 5rem; } }

.b-header__logo {
  width: 2rem;
  height: 2rem;
  background: url(/images/header/logo-xs.svg) no-repeat center center;
  background-size: 1.5rem;
  display: block; }
  @media (min-width: 451px) {
    .b-header__logo {
      width: 2.5rem;
      height: 2.5rem;
      background-size: 1.5rem; } }
  @media (min-width: 661px) {
    .b-header__logo {
      background-image: url(/images/header/logo-md.svg);
      width: 5rem;
      background-size: 4.3rem 1.5rem; } }

.b-header__search {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: .3rem .6rem;
  background: #fff;
  border-radius: 12px;
  gap: .5rem;
  width: 25%; }
  .b-header__search-text, .b-header__search-button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: none;
    border: none;
    outline: none;
    width: calc(100% - 1.5rem);
    font-size: .7rem; }
  .b-header__search-button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 1.2rem;
    height: 1.2rem;
    background: url(/images/header/search.svg) no-repeat center center; }

.b-header__phone {
  color: #252525;
  font-size: .85rem; }
  .b-header__top .b-header__phone {
    margin-left: auto; }

.b-header__top-links {
  display: none; }
  @media (min-width: 1281px) {
    .b-header__top-links {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: .6rem; } }

.b-header__basket {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.35rem;
  border-radius: .4rem;
  background-color: #C4C4C4;
  text-align: center; }
  .b-header__basket svg {
    vertical-align: middle; }
  .b-header__basket:hover path {
    fill: #0000AA; }
  .b-header__basket.active {
    background-color: #0000AA; }
    .b-header__basket.active:hover {
      background-color: #99CDF1; }
      .b-header__basket.active:hover path {
        fill: #fff; }

.b-header__menu-btn {
  line-height: 30px; }
  .b-header__menu-btn svg {
    vertical-align: middle; }

.b-header__menu {
  background-color: #fff;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  display: none;
  padding: .5rem 1rem 6rem 1rem;
  -webkit-box-shadow: -10px 0px 40px rgba(0, 0, 0, 0.25);
          box-shadow: -10px 0px 40px rgba(0, 0, 0, 0.25);
  font-size: .75rem; }
  .b-header__menu.active {
    display: block; }
  .b-header__menu .b-header__button-blue {
    margin-left: auto;
    padding: .75rem 1.5rem; }
  @media (min-width: 451px) {
    .b-header__menu {
      padding: .5rem 1.5rem 6rem 1.5rem; } }
  @media (min-width: 661px) {
    .b-header__menu {
      max-width: 500px;
      padding: .5rem 2.5rem 6rem 2rem; } }
  @media (min-width: 951px) {
    .b-header__menu {
      padding: .5rem 4rem 6rem 2rem; } }
  @media (min-width: 1281px) {
    .b-header__menu {
      height: auto;
      overflow: visible;
      position: relative;
      background: none;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: .4rem;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-shadow: none;
              box-shadow: none;
      max-width: none;
      padding: 0; } }

.b-header__bottom-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem; }
  .b-header__bottom-bar .b-header__search {
    border: 1px solid #EAEAEA;
    width: auto;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .b-header__bottom-bar .b-header__search-text {
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1; }
  @media (min-width: 1281px) {
    .b-header__bottom-bar {
      display: none; } }

.b-header__bottom-footer {
  margin-top: 1.2rem; }
  .b-header__bottom-footer a {
    color: #252525; }
  .b-header__bottom-footer > div {
    margin-top: .6rem; }
  @media (min-width: 1281px) {
    .b-header__bottom-footer {
      display: none; } }

.b-header__menu-sub {
  display: none;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 1rem 0;
  border-radius: .5rem;
  gap: .6rem; }
  .b-header__menu-sub > div {
    background: #F4F4F4;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    width: 100%;
    padding: .6rem;
    border-radius: 10px; }
  .opened .b-header__menu-sub {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 100; }
  @media (min-width: 1281px) {
    .b-header__menu-sub {
      display: none;
      position: absolute;
      padding: .6rem;
      left: 0;
      right: 0;
      top: 2rem;
      background-color: #fff;
      border-radius: 1rem; }
      .b-header__menu-sub > div {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        background: none;
        max-width: 400px; }
        .b-header__menu-sub > div:hover {
          background-color: #F4F4F4; } }

.b-header__menu-link {
  display: block;
  color: #252525;
  padding: .75rem 2rem .75rem 1rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.5) url(/images/header/chevron-down.svg) no-repeat right 0.75rem center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  cursor: pointer;
  -webkit-box-shadow: 0 10px 25px rgba(71, 41, 21, 0.01);
          box-shadow: 0 10px 25px rgba(71, 41, 21, 0.01);
  border: 1px solid #EAEAEA !important;
  margin-top: 1.2rem; }
  @media (min-width: 1281px) {
    .b-header__menu-link {
      -webkit-box-flex: 1;
          -ms-flex: auto;
              flex: auto;
      -webkit-box-shadow: none;
              box-shadow: none;
      border: 1px solid rgba(255, 255, 255, 0.5) !important;
      margin-top: 0; } }
  .b-header__menu-link:hover {
    color: #0000AA;
    background-color: #fff; }
  .opened .b-header__menu-link {
    border-color: #EAEAEA !important;
    -webkit-box-shadow: inset 0px 10px 20px rgba(48, 48, 97, 0.1);
            box-shadow: inset 0px 10px 20px rgba(48, 48, 97, 0.1);
    color: #0000AA;
    background: #fff url(/images/header/chevron-up.svg) no-repeat right 0.75rem center; }

.b-header__menu-sub-title {
  border: 1px solid transparent;
  border-bottom: 1px solid #EAEAEA;
  padding: .75rem 1rem;
  display: block;
  text-align: center; }

.b-header a.b-header__menu-sub-title {
  color: #252525;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #EAEAEA !important;
  padding-right: 2.2rem;
  background: #fff url(/images/header/arrow-right.svg) no-repeat right 1rem center; }
  .b-header a.b-header__menu-sub-title:hover {
    color: #0000AA;
    -webkit-box-shadow: 0px 1.85185px 3.14815px rgba(0, 0, 0, 0.07);
            box-shadow: 0px 1.85185px 3.14815px rgba(0, 0, 0, 0.07);
    background: #fff url(/images/header/arrow-right-hover.svg) no-repeat right 1rem center; }

.b-header__menu-sub-items, .b-header__menu-sub-promo {
  margin-top: .6rem; }

.b-header__menu-sub-item {
  color: #252525;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: .4rem;
  padding: .55rem .55rem;
  border-radius: 8px; }
  .b-header__menu-sub-item:hover {
    color: #0000AA;
    background-color: #E6E6E6; }
  .b-header__menu-sub-item img {
    width: 20px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 20px;
            flex: 0 0 20px; }

.b-header__menu-sub-promo {
  border-radius: 7.5px;
  padding: .6rem;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff; }
  .b-header__menu-sub-promo-title {
    margin: 1.8rem 0; }
  .b-header__menu-sub-promo-button {
    margin-top: .6rem;
    height: 2.5rem; }

.body-overflow {
  overflow: hidden !important; }
  .body-overflow .b-header__fade {
    display: block; }

/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/help-center/help-center-forms/help-center-forms.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
@media (min-width: 951px) {
  .b-help-center-forms {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% - 80px);
    margin-left: 40px;
    margin-right: 40px; } }

.b-help-center-forms__line {
  width: 100%;
  height: 1px;
  background-color: #232323; }

.b-help-center-forms__count {
  font-weight: 400; }
  .b-help-center-forms__count span {
    display: inline-block;
    padding: 0.3rem 0.5rem;
    background-color: #00a;
    color: #fff0e6; }

.b-help-center-forms__main {
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.b-help-center-forms__image {
  display: none; }
  @media (min-width: 661px) {
    .b-help-center-forms__image {
      display: block; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-help-center-forms__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(190px - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-help-center-forms__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(190px - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-help-center-forms__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(190px - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-help-center-forms__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(190px - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-help-center-forms__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(190px - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-help-center-forms__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(190px - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-help-center-forms__image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(190px - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-help-center-forms__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(286px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-help-center-forms__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(286px - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-help-center-forms__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(286px - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-help-center-forms__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(286px - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-help-center-forms__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(286px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-help-center-forms__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(286px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-help-center-forms__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(286px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-help-center-forms__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(280px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-help-center-forms__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(280px - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-help-center-forms__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(280px - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-help-center-forms__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(280px - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-help-center-forms__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(280px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-help-center-forms__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(280px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-help-center-forms__image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(280px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-help-center-forms__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media (min-width: 451px) {
    .b-help-center-forms__buttons {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }
  @media (min-width: 661px) {
    .b-help-center-forms__buttons {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: start; } }
  .b-help-center-forms__buttons.disabled {
    display: none; }

.b-help-center-forms__button {
  display: inline-block;
  height: 2.5rem; }
  .b-help-center-forms__button:first-child {
    margin-right: 0;
    margin-bottom: 1rem; }
    @media (min-width: 451px) {
      .b-help-center-forms__button:first-child {
        margin-right: 1rem;
        margin-bottom: 0; } }

.b-help-center-forms__good {
  display: none; }

.b-help-center-forms__bad {
  display: none; }

.b-help-center-forms__form {
  width: 100%; }
  @media (min-width: 661px) {
    .b-help-center-forms__form {
      -webkit-box-flex: 1 !important;
          -ms-flex: 1 1 auto !important;
              flex: 1 1 auto !important;
      margin-right: auto !important; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-help-center-forms__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(660px - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-help-center-forms__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(660px - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-help-center-forms__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(660px - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-help-center-forms__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(660px - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-help-center-forms__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(660px - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-help-center-forms__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(660px - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-help-center-forms__form {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: calc(660px - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1920px) {
  .b-help-center-forms__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(573px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 1280px) {
  .b-help-center-forms__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(573px - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 950px) {
  .b-help-center-forms__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(573px - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 660px) {
  .b-help-center-forms__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(573px - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 450px) {
  .b-help-center-forms__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(573px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (max-width: 320px) {
  .b-help-center-forms__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(573px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 951px) and (min-width: 1921px) {
  .b-help-center-forms__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(573px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-help-center-forms__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(560px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-help-center-forms__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(560px - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-help-center-forms__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(560px - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-help-center-forms__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(560px - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-help-center-forms__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(560px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-help-center-forms__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(560px - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-help-center-forms__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    max-width: calc(560px - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-help-center-forms__fields {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.b-help-center-forms__field-container {
  width: 100%;
  margin: 0 !important;
  margin-bottom: 0.75rem !important; }
  @media (min-width: 451px) {
    .b-help-center-forms__field-container.tao-form-field-name {
      width: 50%;
      margin-right: 15px !important; } }
  @media (min-width: 451px) {
    .b-help-center-forms__field-container.tao-form-field-company {
      width: calc(50% - 15px); } }
  .b-help-center-forms__field-container.tao-error-field input[type="text"] {
    border: 1px solid #ff4c62 !important; }
  .b-help-center-forms__field-container.tao-error-field textarea {
    border: 1px solid #ff4c62 !important; }
  .b-help-center-forms__field-container.tao-error-field input[type='checkbox'] + label::before {
    border-color: #ff4c62 !important; }

.b-help-center-forms__field {
  width: 100%; }

.b-help-center-forms textarea {
  outline: none;
  border-radius: 5px;
  border: 1px solid #9e9d9d !important;
  padding: 1.5rem 0 0.5rem 1.5rem;
  padding-right: 1.5rem;
  width: 100%;
  height: 7.5rem;
  resize: none; }

.b-help-center-forms input[type="text"] {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-radius: 5px;
  border: 1px solid #9e9d9d !important;
  width: 100%;
  height: 2.5rem; }

.b-help-center-forms select {
  position: relative;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-radius: 5px;
  border: 1px solid #9e9d9d !important;
  width: 100%;
  height: 2.5rem;
  color: #9e9d9d;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }

.b-help-center-forms__custom-select-arrow {
  position: relative; }
  .b-help-center-forms__custom-select-arrow::before {
    content: "";
    width: 11px;
    height: 7px;
    top: 22px;
    right: 1.5rem;
    background-image: url("/images/arrow-select.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 1; }

.b-help-center-forms__errors {
  border-radius: 5px;
  border-color: #ff4c62 !important; }
  .b-help-center-forms__errors li {
    color: #ff4c62 !important;
    font-size: inherit !important;
    line-height: inherit !important; }

.b-help-center-forms__form-submit {
  height: 1.5rem;
  margin-top: 0.5rem; }
  .b-help-center-forms__form-submit input {
    color: #9e9d9d !important;
    border: 1px solid #9e9d9d !important;
    background-color: #fff !important; }
  .b-help-center-forms__form-submit:hover input {
    color: #00a769 !important;
    border-color: #00a769 !important; }

.b-help-center-forms__ok {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .b-help-center-forms__ok::before {
    content: '';
    display: block;
    width: 0.95rem;
    height: 1rem;
    margin-right: 0.5rem;
    background-image: url("/images/icons/checkbox.svg");
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer; }

.b-help-center-forms .checkbox-label::before {
  content: none; }

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/help-center/help-center-main/help-center-main.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-help-center-main__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-help-center-main__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-help-center-main__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-help-center-main__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-help-center-main__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-help-center-main__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-help-center-main__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-help-center-main__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-help-center-main__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-help-center-main__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-help-center-main__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-help-center-main__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-help-center-main__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }

.b-help-center-main__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1.5rem 1rem;
  background-color: #fff;
  min-height: 20rem; }
  @media (max-width: 1920px) {
    .b-help-center-main__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-help-center-main__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-help-center-main__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-help-center-main__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-help-center-main__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-help-center-main__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-help-center-main__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 450px) {
    .b-help-center-main__item {
      width: 100vw !important;
      margin-left: calc((50vw - 50%) * -1) !important;
      margin-right: calc((50vw - 50%) * -1) !important; } }
  @media (min-width: 451px) {
    .b-help-center-main__item {
      padding: 1.5rem; } }
  @media (min-width: 820px) {
    .b-help-center-main__item {
      min-height: 18.5rem; } }
  @media (min-width: 820px) and (max-width: 1920px) {
    .b-help-center-main__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 820px) and (max-width: 1280px) {
    .b-help-center-main__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (min-width: 820px) and (max-width: 950px) {
    .b-help-center-main__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (min-width: 820px) and (max-width: 660px) {
    .b-help-center-main__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (min-width: 820px) and (max-width: 450px) {
    .b-help-center-main__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 820px) and (max-width: 320px) {
    .b-help-center-main__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 820px) and (min-width: 1921px) {
    .b-help-center-main__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (min-width: 951px) {
    .b-help-center-main__item {
      padding: 2rem;
      min-height: 20rem; } }

@media (min-width: 1500px) and (max-width: 1920px) {
  .b-help-center-main__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1500px) and (max-width: 1280px) {
  .b-help-center-main__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 1500px) and (max-width: 950px) {
  .b-help-center-main__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 1500px) and (max-width: 660px) {
  .b-help-center-main__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 1500px) and (max-width: 450px) {
  .b-help-center-main__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1500px) and (max-width: 320px) {
  .b-help-center-main__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1500px) and (min-width: 1921px) {
  .b-help-center-main__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }
  .b-help-center-main__item-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; }
    .b-help-center-main__item-title img {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      margin-right: 1rem; }
    .b-help-center-main__item-title div {
      padding-top: 10px; }
  .b-help-center-main__item-list {
    margin-top: 2rem;
    margin-bottom: 1rem; }
    @media (min-width: 1281px) {
      .b-help-center-main__item-list {
        margin-left: 1rem; } }
    .b-help-center-main__item-list a {
      margin-top: 1rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      color: #232323; }
      .b-help-center-main__item-list a:first-child {
        margin-top: 0; }
      .b-help-center-main__item-list a:hover {
        color: #00a; }
      .b-help-center-main__item-list a::before {
        content: "";
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: 12px;
        height: 15px;
        margin-right: 0.5rem;
        margin-top: 0.25rem;
        background-image: url("/images/icons/blue-file.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain; }
  .b-help-center-main__item-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: auto;
    color: #9e9d9d;
    margin-bottom: 0.5rem; }
    .b-help-center-main__item-link:hover {
      color: #232323; }
      .b-help-center-main__item-link:hover::after {
        background-color: #232323; }
    .b-help-center-main__item-link::after {
      content: '';
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: 1rem;
      height: 1rem;
      margin-left: 0.5rem;
      -webkit-mask-image: url("/images/icons/arrow-right.svg");
              mask-image: url("/images/icons/arrow-right.svg");
      -webkit-mask-position: center;
              mask-position: center;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-size: contain;
              mask-size: contain;
      background-color: #9e9d9d; }

/*!************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/help-center/help-center-section/help-center-section.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-help-center-section__item {
  padding: 1rem;
  margin-top: 1rem;
  background-color: #fff; }
  .b-help-center-section__item:first-child {
    margin-top: 0; }
  @media (min-width: 451px) {
    .b-help-center-section__item {
      padding: 1.5rem 2rem; } }
  @media (min-width: 951px) {
    .b-help-center-section__item {
      padding: 2rem 3.5rem 2rem 1.5rem; } }

.b-help-center-section__image {
  text-align: center; }

/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/history-path/history-path.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-history-path__image {
  display: none;
  margin: 0 auto; }
  @media (min-width: 321px) {
    .b-history-path__image.mobile, .b-history-path__image.mobile2, .b-history-path__image.middle, .b-history-path__image.middle2 {
      display: none; }
    .b-history-path__image.min {
      display: block; } }
  @media (min-width: 451px) {
    .b-history-path__image.min, .b-history-path__image.mobile2, .b-history-path__image.middle, .b-history-path__image.middle2 {
      display: none; }
    .b-history-path__image.mobile {
      display: block; } }
  @media (min-width: 661px) {
    .b-history-path__image.min, .b-history-path__image.mobile, .b-history-path__image.middle, .b-history-path__image.middle2 {
      display: none; }
    .b-history-path__image.mobile2 {
      display: block; } }
  @media (min-width: 951px) {
    .b-history-path__image.min, .b-history-path__image.mobile, .b-history-path__image.mobile2, .b-history-path__image.middle2 {
      display: none; }
    .b-history-path__image.middle {
      display: block; } }
  @media (min-width: 1281px) {
    .b-history-path__image.min, .b-history-path__image.mobile, .b-history-path__image.mobile2, .b-history-path__image.middle {
      display: none; }
    .b-history-path__image.middle2 {
      display: block; } }

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/integrations-layout/integrations-layout.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-integrations-layout__title {
  text-align: center; }

@media (min-width: 1281px) {
  .b-integrations-layout__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-integrations-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-integrations-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-integrations-layout__container {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-integrations-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-integrations-layout__container {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-integrations-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-integrations-layout__container {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-integrations-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-integrations-layout__container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-integrations-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-integrations-layout__container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-integrations-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-integrations-layout__control {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 2rem; }
  @media (min-width: 451px) {
    .b-integrations-layout__control {
      margin-bottom: 3.5rem; } }
  @media (min-width: 661px) {
    .b-integrations-layout__control {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-bottom: 0; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-integrations-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-integrations-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-integrations-layout__control {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-integrations-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-integrations-layout__control {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-integrations-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-integrations-layout__control {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-integrations-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-integrations-layout__control {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-integrations-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-integrations-layout__control {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-integrations-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-integrations-layout__control {
      display: block; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-integrations-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-integrations-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-integrations-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-integrations-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-integrations-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-integrations-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-integrations-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-integrations-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-integrations-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-integrations-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-integrations-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-integrations-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-integrations-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-integrations-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-integrations-layout__search {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  margin-bottom: 1.25rem;
  background-color: #ffd9d7;
  border-radius: 5px;
  padding: 1.1rem 2rem; }
  @media (min-width: 661px) {
    .b-integrations-layout__search {
      margin-bottom: 2rem; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-integrations-layout__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-integrations-layout__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-integrations-layout__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-integrations-layout__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-integrations-layout__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-integrations-layout__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-integrations-layout__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-integrations-layout__search {
      width: 100%;
      margin-left: 0;
      margin-right: 0; } }
  .b-integrations-layout__search::after {
    content: '';
    margin-left: 0.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    -webkit-mask-image: url("/images/icons/search.svg");
            mask-image: url("/images/icons/search.svg");
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    background-color: #232323; }
  .b-integrations-layout__search input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background-color: transparent; }
    .b-integrations-layout__search input::-webkit-input-placeholder {
      opacity: 1; }
    .b-integrations-layout__search input::-moz-placeholder {
      opacity: 1; }
    .b-integrations-layout__search input:-ms-input-placeholder {
      opacity: 1; }
    .b-integrations-layout__search input::-ms-input-placeholder {
      opacity: 1; }
    .b-integrations-layout__search input::placeholder {
      opacity: 1; }

.b-integrations-layout__filter-mobile {
  background-color: #e2e9ff; }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-integrations-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-integrations-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-integrations-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-integrations-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-integrations-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-integrations-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-integrations-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-integrations-layout__filter-mobile {
      display: none; } }
  .b-integrations-layout__filter-mobile .select2,
  .b-integrations-layout__filter-mobile .selection,
  .b-integrations-layout__filter-mobile .select2-selection {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .b-integrations-layout__filter-mobile .select2-selection {
    padding: 1rem 2rem; }
    .b-integrations-layout__filter-mobile .select2-selection::after {
      content: '';
      display: block;
      margin-left: auto;
      width: 11px;
      height: 7px;
      background-image: url("/images/icons/arrow.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
      -webkit-transition: -webkit-transform 0.2s linear;
      transition: -webkit-transform 0.2s linear;
      -o-transition: transform 0.2s linear;
      transition: transform 0.2s linear;
      transition: transform 0.2s linear, -webkit-transform 0.2s linear; }
    .b-integrations-layout__filter-mobile .select2-selection[aria-expanded="true"]::after {
      -webkit-transform: rotate(0);
              transform: rotate(0); }
  .b-integrations-layout__filter-mobile .select2-selection__rendered {
    padding: 0; }

.b-integrations-layout__filter {
  display: none;
  background-color: #e2e9ff;
  padding: 2.5rem 2rem;
  border-radius: 5px; }
  @media (min-width: 1281px) {
    .b-integrations-layout__filter {
      display: block; } }
  .b-integrations-layout__filter-type {
    margin-bottom: 1rem;
    color: #00a;
    font-weight: 500; }
  .b-integrations-layout__filter-items {
    margin-left: 1rem;
    margin-bottom: 2rem; }
    .b-integrations-layout__filter-items:last-child {
      margin-bottom: 0; }
  .b-integrations-layout__filter-item {
    display: block;
    color: #232323; }
    .b-integrations-layout__filter-item.active {
      pointer-events: none;
      font-weight: 700; }
    .b-integrations-layout__filter-item.all {
      margin-bottom: 1rem; }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-integrations-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-integrations-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-integrations-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-integrations-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-integrations-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-integrations-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-integrations-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-integrations-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-integrations-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-integrations-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-integrations-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-integrations-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-integrations-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-integrations-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-integrations-layout__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-integrations-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-integrations-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-integrations-layout__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-integrations-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-integrations-layout__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-integrations-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-integrations-layout__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-integrations-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-integrations-layout__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-integrations-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-integrations-layout__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-integrations-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }

.b-integrations-layout__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.25rem 1rem;
  position: relative;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden; }
  @media (max-width: 1920px) {
    .b-integrations-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-integrations-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-integrations-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-integrations-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-integrations-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-integrations-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-integrations-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-integrations-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-integrations-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-integrations-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-integrations-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-integrations-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-integrations-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-integrations-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-integrations-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-integrations-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-integrations-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-integrations-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-integrations-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-integrations-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-integrations-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }
  .b-integrations-layout__item:hover {
    outline: 1px solid #00a; }
  .b-integrations-layout__item-content {
    margin-top: 0.75rem; }
  .b-integrations-layout__item-title {
    font-weight: 700; }
  .b-integrations-layout__item-desc {
    margin-top: 0.5rem; }
  .b-integrations-layout__item-icon {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto; }
  .b-integrations-layout__item-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer; }

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/landing-layout/landing-layout.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-landing-layout__banner {
  position: relative;
  text-align: center;
  padding: 1.5rem 0;
  border-radius: 5px;
  z-index: 0; }
  @media (min-width: 451px) {
    .b-landing-layout__banner {
      padding: 4.5rem 0; } }
  @media (min-width: 661px) {
    .b-landing-layout__banner {
      padding: 6rem 0; } }
  @media (min-width: 951px) {
    .b-landing-layout__banner {
      padding: 8rem 0; } }
  @media (min-width: 1281px) {
    .b-landing-layout__banner {
      padding: 7.3rem 0; } }
  .b-landing-layout__banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/images/integracija-s-klientiks/banner.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    z-index: 0;
    /*@include for-width('mobile') {
				background-size: 170%;
			}

			@include for-width('mobile2') {
				background-size: 130%;
			}

			@include for-width('middle') {
				background-size: 105%;
			}

			@include for-width('middle2') {
				background-size: cover;
			}*/ }
    .b-landing-layout__banner-image::before {
      content: '';
      top: 0;
      left: 0;
      position: absolute;
      width: 100%;
      border-radius: 5px;
      height: 100%;
      background-color: #232323;
      opacity: 0.3; }
    .b-landing-layout__banner-image::after {
      content: "";
      position: absolute;
      width: 120%;
      background-position: right bottom;
      height: 100%;
      border-radius: 5px;
      background-repeat: no-repeat;
      top: 0;
      left: 0;
      background-image: url("/images/blue-gradient.png");
      background-size: cover;
      z-index: 1; }
      @media (min-width: 451px) {
        .b-landing-layout__banner-image::after {
          width: 80%; } }
      @media (min-width: 661px) {
        .b-landing-layout__banner-image::after {
          width: 60%; } }
      @media (min-width: 951px) {
        .b-landing-layout__banner-image::after {
          width: 50%; } }
  .b-landing-layout__banner-logo {
    position: relative;
    z-index: 1; }
  .b-landing-layout__banner-desc {
    position: relative;
    margin-top: 2rem;
    color: #fff0e6;
    z-index: 1; }
    @media (min-width: 451px) {
      .b-landing-layout__banner-desc {
        margin-top: 2.5rem; } }
    @media (min-width: 1281px) {
      .b-landing-layout__banner-desc {
        margin-top: 3rem; } }
    @media (min-width: 1600px) {
      .b-landing-layout__banner-desc .b-title-with-desc__title {
        white-space: nowrap; } }

.b-landing-layout__title {
  text-align: center;
  font-size: 30px;
  line-height: 39px; }
  @media (min-width: 951px) {
    .b-landing-layout__title {
      font-size: 42px;
      line-height: 50px;
      width: 60%; } }
  @media (min-width: 1281px) {
    .b-landing-layout__title {
      font-size: 35px;
      line-height: 42px;
      width: 100%; } }

.b-landing-layout__container-images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 30px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .b-landing-layout__container-images div {
    width: 100%; }
    @media (min-width: 451px) {
      .b-landing-layout__container-images div {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content; } }
  @media (min-width: 451px) {
    .b-landing-layout__container-images {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; } }
  @media (min-width: 951px) {
    .b-landing-layout__container-images {
      gap: 35px; } }
  @media (min-width: 1281px) {
    .b-landing-layout__container-images {
      gap: 60px; } }

.b-landing-layout__form {
  position: relative;
  max-width: 40rem;
  border-radius: 5px;
  background-color: #fff;
  margin: 0 auto !important;
  padding: 2rem 1.5rem;
  z-index: 1;
  left: -1rem;
  width: calc(100% + 2rem); }
  @media (min-width: 451px) {
    .b-landing-layout__form {
      padding: 2.5rem;
      top: -50px;
      left: inherit;
      width: 100%; } }
  @media (min-width: 661px) {
    .b-landing-layout__form {
      padding: 3rem; } }
  @media (min-width: 951px) {
    .b-landing-layout__form {
      padding: 3.5rem 3rem;
      top: -90px; } }
  @media (min-width: 1281px) {
    .b-landing-layout__form {
      padding: 4rem 4.5rem; } }

/*!**********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/layout/layout.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-layout {
  background-color: #f4f4f4;
  position: relative;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: visible;
  font-size: 1rem; }
  .b-layout--no-scroll {
    overflow: hidden; }
  .b-layout--no-cursor,
  .b-layout--no-cursor * {
    cursor: none !important; }
  .b-layout__cookie {
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    z-index: 100000002;
    max-width: none; }
    @media (min-width: 451px) {
      .b-layout__cookie {
        max-width: 320px;
        left: 1.5rem;
        right: auto;
        bottom: 1.5rem; } }
  .b-layout__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: 100vh;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem; }
    @media (max-width: 1920px) {
      .b-layout__content {
        padding-left: 7rem;
        padding-right: 7rem; } }
    @media (max-width: 1280px) {
      .b-layout__content {
        padding-left: 4rem;
        padding-right: 4rem; } }
    @media (max-width: 950px) {
      .b-layout__content {
        padding-left: 2.5rem;
        padding-right: 2.5rem; } }
    @media (max-width: 660px) {
      .b-layout__content {
        padding-left: 1.5rem;
        padding-right: 1.5rem; } }
    @media (max-width: 450px) {
      .b-layout__content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (max-width: 320px) {
      .b-layout__content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (min-width: 1920px) {
      .b-layout__content {
        padding-left: 7rem;
        padding-right: 7rem; } }
    .popmechanic-loaded .b-layout__content {
      margin-top: 0 !important; }
  .b-layout__header--fixed .b-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100; }
  .b-layout__header--fixed .b-header__content {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem; }
    @media (max-width: 1920px) {
      .b-layout__header--fixed .b-header__content {
        padding-left: 7rem;
        padding-right: 7rem; } }
    @media (max-width: 1280px) {
      .b-layout__header--fixed .b-header__content {
        padding-left: 4rem;
        padding-right: 4rem; } }
    @media (max-width: 950px) {
      .b-layout__header--fixed .b-header__content {
        padding-left: 2.5rem;
        padding-right: 2.5rem; } }
    @media (max-width: 660px) {
      .b-layout__header--fixed .b-header__content {
        padding-left: 1.5rem;
        padding-right: 1.5rem; } }
    @media (max-width: 450px) {
      .b-layout__header--fixed .b-header__content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (max-width: 320px) {
      .b-layout__header--fixed .b-header__content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (min-width: 1920px) {
      .b-layout__header--fixed .b-header__content {
        padding-left: 7rem;
        padding-right: 7rem; } }
  .b-layout__header--absolute .b-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100; }
  .b-layout__header--absolute .b-header__content {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem; }
    @media (max-width: 1920px) {
      .b-layout__header--absolute .b-header__content {
        padding-left: 7rem;
        padding-right: 7rem; } }
    @media (max-width: 1280px) {
      .b-layout__header--absolute .b-header__content {
        padding-left: 4rem;
        padding-right: 4rem; } }
    @media (max-width: 950px) {
      .b-layout__header--absolute .b-header__content {
        padding-left: 2.5rem;
        padding-right: 2.5rem; } }
    @media (max-width: 660px) {
      .b-layout__header--absolute .b-header__content {
        padding-left: 1.5rem;
        padding-right: 1.5rem; } }
    @media (max-width: 450px) {
      .b-layout__header--absolute .b-header__content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (max-width: 320px) {
      .b-layout__header--absolute .b-header__content {
        padding-left: 1rem;
        padding-right: 1rem; } }
    @media (min-width: 1920px) {
      .b-layout__header--absolute .b-header__content {
        padding-left: 7rem;
        padding-right: 7rem; } }
  .b-layout__main {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    position: relative;
    z-index: 9;
    width: 100%;
    min-height: 0;
    padding-left: 0;
    padding-right: 0; }
    @media (max-width: 1920px) {
      .b-layout__main {
        padding-left: 0;
        padding-right: 0; } }
    @media (max-width: 1280px) {
      .b-layout__main {
        padding-left: 0;
        padding-right: 0; } }
    @media (max-width: 950px) {
      .b-layout__main {
        padding-left: 0;
        padding-right: 0; } }
    @media (max-width: 660px) {
      .b-layout__main {
        padding-left: 0;
        padding-right: 0; } }
    @media (max-width: 450px) {
      .b-layout__main {
        padding-left: 0;
        padding-right: 0; } }
    @media (max-width: 320px) {
      .b-layout__main {
        padding-left: 0;
        padding-right: 0; } }
    @media (min-width: 1920px) {
      .b-layout__main {
        padding-left: 0;
        padding-right: 0; } }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      .b-layout__main {
        height: 100%; } }
    .b-layout__main-content {
      position: relative;
      z-index: 5;
      max-width: 100%;
      max-height: 100%;
      margin: 0 0; }
  .b-layout__main-global {
    position: absolute;
    z-index: 999;
    margin-top: -3rem; }
  .b-layout__footer {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    position: relative;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
    margin-top: 0;
    padding: 0 0;
    font-size: 0.65rem; }

.b-layout--fix-height {
  height: 100vh;
  max-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  overflow: hidden; }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .b-layout--fix-height .b-layout__content {
      height: 100%; } }
  .b-layout--fix-height .b-layout__main-content {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden; }
    @media (max-width: 1920px) {
      .b-layout--fix-height .b-layout__main-content {
        width: calc(100% - 0 * 2); } }
    @media (max-width: 1280px) {
      .b-layout--fix-height .b-layout__main-content {
        width: calc(100% - 0 * 2); } }
    @media (max-width: 950px) {
      .b-layout--fix-height .b-layout__main-content {
        width: calc(100% - 0 * 2); } }
    @media (max-width: 660px) {
      .b-layout--fix-height .b-layout__main-content {
        width: calc(100% - 0 * 2); } }
    @media (max-width: 450px) {
      .b-layout--fix-height .b-layout__main-content {
        width: calc(100% - 0 * 2); } }
    @media (max-width: 320px) {
      .b-layout--fix-height .b-layout__main-content {
        width: calc(100% - 0 * 2); } }
    @media (min-width: 2020px) {
      .b-layout--fix-height .b-layout__main-content {
        width: calc(100% - 0 * 2); } }

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/main-header-alert/main-header-alert.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-main-header-alert {
  gap: 20px;
  position: relative;
  background: #FFF6D5;
  padding: 20px;
  display: none;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: -1.5rem;
  margin-right: -1.5rem; }
  .b-main-header-alert .h3 {
    margin-bottom: 10px; }
  @media (min-width: 661px) {
    .b-main-header-alert {
      margin-left: -2.5rem;
      margin-right: -2.5rem;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; }
      .b-main-header-alert .h3 {
        margin-bottom: 20px; } }
  @media (min-width: 951px) {
    .b-main-header-alert {
      padding: 40px 80px;
      margin-left: -4rem;
      margin-right: -4rem; } }
  @media (min-width: 1281px) {
    .b-main-header-alert {
      margin-left: -7rem;
      margin-right: -7rem;
      padding: 40px 140px; } }
  .b-main-header-alert__close {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer; }
  .b-main-header-alert__btn {
    width: auto;
    height: 60px;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; }
    .b-main-header-alert__btn .b-button {
      min-width: 130px;
      display: inline-block; }
    @media (min-width: 951px) {
      .b-main-header-alert__btn {
        text-align: center; } }
  .b-main-header-alert__text {
    width: 100%; }
    @media (min-width: 451px) {
      .b-main-header-alert__text {
        width: 90%; } }
    @media (min-width: 951px) {
      .b-main-header-alert__text .p:last-child {
        margin-top: 10px; } }

/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/main-header/main-header.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-main-header {
  position: relative;
  display: none;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  background-color: #f4f4f4;
  padding-top: 1rem;
  padding-bottom: 1rem;
  z-index: 50; }
  @media (min-width: 451px) {
    .b-main-header {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  .b-main-header__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end; }
    @media (min-width: 1500px) {
      .b-main-header__container {
        position: relative; } }
  .b-main-header__item {
    position: relative;
    display: none;
    border: none;
    color: #00a;
    margin-bottom: 0;
    margin-right: 1.5rem; }
    .b-main-header__item:hover {
      border-bottom: none;
      color: #00a; }
      .b-main-header__item:hover + div {
        opacity: 1;
        max-height: 5000px;
        z-index: 50; }
    .b-main-header__item::before {
      content: "";
      position: absolute;
      width: 0;
      height: 0.1rem;
      bottom: -0.25rem;
      background-color: #00a;
      -webkit-transition: width 0.6s;
      -o-transition: width 0.6s;
      transition: width 0.6s; }
    .b-main-header__item.active::before {
      width: 100%; }
    .b-main-header__item:nth-child(-n+6) {
      display: block; }
    @media (min-width: 820px) {
      .b-main-header__item {
        margin-right: 2rem;
        display: block; } }
    @media (min-width: 951px) {
      .b-main-header__item {
        margin-right: 1rem; } }
    @media (min-width: 1281px) {
      .b-main-header__item {
        margin-right: 2rem; } }
    @media (min-width: 1400px) {
      .b-main-header__item {
        margin-right: 3rem; } }
  .b-main-header__menu {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    right: 0;
    height: auto;
    top: 100%;
    width: 100%;
    background-color: #fff0e6;
    padding-left: 2rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    -webkit-transition: opacity 0.3s, max-height 0.7s;
    -o-transition: opacity 0.3s, max-height 0.7s;
    transition: opacity 0.3s, max-height 0.7s;
    -webkit-transition-delay: 0.1s;
         -o-transition-delay: 0.1s;
            transition-delay: 0.1s;
    z-index: 0; }
    .b-main-header__menu:hover {
      opacity: 1;
      max-height: 5000px;
      z-index: 50; }
    @media (max-width: 950px) {
      .b-main-header__menu {
        display: none !important; } }
    @media (max-width: 1100px) {
      .b-main-header__menu {
        width: 100vw !important;
        margin-left: calc((50vw - 50%) * -1) !important;
        margin-right: calc((50vw - 50%) * -1) !important; } }
    @media (min-width: 1281px) {
      .b-main-header__menu {
        width: 50rem;
        padding-left: 1rem; } }
    @media (min-width: 1500px) {
      .b-main-header__menu {
        left: 0;
        width: 50rem;
        top: 200%;
        padding-left: 3rem; } }
    @media (min-width: 1700px) {
      .b-main-header__menu {
        width: 60rem; } }
    .b-main-header__menu-another-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: 15rem;
      background-color: #fff;
      padding: 1.5rem 2.5rem; }
      @media (min-width: 1100px) {
        .b-main-header__menu-another-content {
          padding: 1.5rem 3rem;
          width: 17.5rem; } }
      @media (min-width: 1281px) {
        .b-main-header__menu-another-content {
          width: 20rem; } }
    .b-main-header__menu-container {
      margin-left: -0;
      margin-right: -0;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 1.5rem 0; }
      @media (min-width: 1281px) {
        .b-main-header__menu-container {
          padding: 1rem 0; } }
      @media (min-width: 1500px) {
        .b-main-header__menu-container {
          padding: 1.5rem 0; } }
    .b-main-header__menu-items {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: 33.33333%;
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 2rem;
      padding-right: 1rem; }
    .b-main-header__menu-title {
      margin-bottom: 1rem;
      color: #00a; }
    .b-main-header__menu-item {
      color: #232323;
      border-bottom: none; }
      .b-main-header__menu-item:hover {
        color: #9e9d9d;
        border-color: #9e9d9d; }
  .b-main-header__logo {
    position: relative;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 4.45rem;
    height: 2.5rem;
    background-image: url("/images/logo.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    margin-right: 1.5rem; }
    .b-main-header__logo-link {
      position: absolute;
      width: 100%;
      height: 100%;
      border: none !important;
      cursor: pointer; }
    @media (min-width: 820px) {
      .b-main-header__logo {
        margin-right: 3rem; } }
    @media (min-width: 951px) {
      .b-main-header__logo {
        width: 6.9rem; } }
    @media (min-width: 1400px) {
      .b-main-header__logo {
        margin-right: 4rem; } }
  .b-main-header__hamburger {
    position: absolute;
    display: none;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 1.25rem;
    height: 1rem;
    top: 50%;
    left: -2.75rem;
    cursor: pointer;
    z-index: 500; }
    .b-main-header__hamburger div {
      position: relative;
      opacity: 1;
      width: 35px;
      height: 2px;
      background-color: #00a;
      -webkit-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; }
    .b-main-header__hamburger.active :nth-child(1) {
      -webkit-transform: rotate(45deg) translateY(10px);
              transform: rotate(45deg) translateY(10px); }
    .b-main-header__hamburger.active :nth-child(2) {
      opacity: 0; }
    .b-main-header__hamburger.active :nth-child(3) {
      -webkit-transform: rotate(-45deg) translateY(-10px);
              transform: rotate(-45deg) translateY(-10px); }
    @media (min-width: 951px) {
      .b-main-header__hamburger {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
    @media (min-width: 1281px) {
      .b-main-header__hamburger {
        left: -3.75rem; } }
  .b-main-header__recall {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    margin-left: auto;
    height: 2.5rem; }
    @media (min-width: 1100px) {
      .b-main-header__recall {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
  .b-main-header__recall-mini {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    height: 2rem; }
    @media (min-width: 661px) {
      .b-main-header__recall-mini {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
    @media (min-width: 951px) {
      .b-main-header__recall-mini {
        height: 2.5rem; } }
    @media (min-width: 1100px) {
      .b-main-header__recall-mini {
        display: none; } }

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/map-page-layout/map-page-layout.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-map-page-layout {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px; }

/*!********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/modal/modal.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-modal {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: none;
  z-index: 8031; }
  .b-modal__fade {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); }
  .b-modal__inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    max-width: 600px;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 50px 40px;
    background-color: #fff;
    font-size: 14px;
    z-index: 1; }
    @media (min-width: 661px) {
      .b-modal__inner {
        font-size: 17px; } }
  .b-modal__close {
    position: absolute;
    cursor: pointer;
    width: 24px;
    height: 24px;
    top: 13px;
    right: 13px;
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6.00049L6 18.0005' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 6.00049L18 18.0005' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center center;
    background-size: 100%; }

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/opportunities-layout/opportunities-layout.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-opportunities-layout__title {
  text-align: center; }

.b-opportunities-layout__desc {
  text-align: center; }

@media (min-width: 1281px) {
  .b-opportunities-layout__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-opportunities-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-opportunities-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-opportunities-layout__container {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-opportunities-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-opportunities-layout__container {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-opportunities-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-opportunities-layout__container {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-opportunities-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-opportunities-layout__container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-opportunities-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-opportunities-layout__container {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-opportunities-layout__container {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-opportunities-layout__control {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 2rem; }
  @media (min-width: 451px) {
    .b-opportunities-layout__control {
      margin-bottom: 3.5rem; } }
  @media (min-width: 661px) {
    .b-opportunities-layout__control {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-bottom: 0; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-opportunities-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-opportunities-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-opportunities-layout__control {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-opportunities-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-opportunities-layout__control {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-opportunities-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-opportunities-layout__control {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-opportunities-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-opportunities-layout__control {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-opportunities-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-opportunities-layout__control {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-opportunities-layout__control {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-opportunities-layout__control {
      display: block; } }
  @media (min-width: 1281px) and (max-width: 1920px) {
    .b-opportunities-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 1280px) {
    .b-opportunities-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 950px) {
    .b-opportunities-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 660px) {
    .b-opportunities-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 450px) {
    .b-opportunities-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (max-width: 320px) {
    .b-opportunities-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1281px) and (min-width: 1921px) {
    .b-opportunities-layout__control {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(33.33333% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-opportunities-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-opportunities-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-opportunities-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-opportunities-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-opportunities-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-opportunities-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-opportunities-layout__control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-opportunities-layout__search {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  margin-bottom: 1.25rem;
  background-color: #ffd9d7;
  border-radius: 5px;
  padding: 1.1rem 2rem; }
  @media (min-width: 661px) {
    .b-opportunities-layout__search {
      margin-bottom: 2rem; } }
  @media (min-width: 661px) and (max-width: 1920px) {
    .b-opportunities-layout__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 1280px) {
    .b-opportunities-layout__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 950px) {
    .b-opportunities-layout__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 660px) {
    .b-opportunities-layout__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 450px) {
    .b-opportunities-layout__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (max-width: 320px) {
    .b-opportunities-layout__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 661px) and (min-width: 1921px) {
    .b-opportunities-layout__search {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-opportunities-layout__search {
      width: 100%;
      margin-left: 0;
      margin-right: 0; } }
  .b-opportunities-layout__search::after {
    content: '';
    margin-left: 0.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    -webkit-mask-image: url("/images/icons/search.svg");
            mask-image: url("/images/icons/search.svg");
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    background-color: #232323; }
  .b-opportunities-layout__search input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background-color: transparent; }
    .b-opportunities-layout__search input::-webkit-input-placeholder {
      opacity: 1; }
    .b-opportunities-layout__search input::-moz-placeholder {
      opacity: 1; }
    .b-opportunities-layout__search input:-ms-input-placeholder {
      opacity: 1; }
    .b-opportunities-layout__search input::-ms-input-placeholder {
      opacity: 1; }
    .b-opportunities-layout__search input::placeholder {
      opacity: 1; }

.b-opportunities-layout__filter-mobile {
  background-color: #e2e9ff; }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-opportunities-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-opportunities-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-opportunities-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-opportunities-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-opportunities-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-opportunities-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-opportunities-layout__filter-mobile {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  @media (min-width: 1281px) {
    .b-opportunities-layout__filter-mobile {
      display: none; } }
  .b-opportunities-layout__filter-mobile .select2,
  .b-opportunities-layout__filter-mobile .selection,
  .b-opportunities-layout__filter-mobile .select2-selection {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .b-opportunities-layout__filter-mobile .select2-selection {
    padding: 1rem 2rem; }
    .b-opportunities-layout__filter-mobile .select2-selection::after {
      content: '';
      display: block;
      margin-left: auto;
      width: 11px;
      height: 7px;
      background-image: url("/images/icons/arrow.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
      -webkit-transition: -webkit-transform 0.2s linear;
      transition: -webkit-transform 0.2s linear;
      -o-transition: transform 0.2s linear;
      transition: transform 0.2s linear;
      transition: transform 0.2s linear, -webkit-transform 0.2s linear; }
    .b-opportunities-layout__filter-mobile .select2-selection[aria-expanded="true"]::after {
      -webkit-transform: rotate(0);
              transform: rotate(0); }
  .b-opportunities-layout__filter-mobile .select2-selection__rendered {
    padding: 0; }

.b-opportunities-layout__filter {
  display: none;
  background-color: #e2e9ff;
  padding: 2.5rem 2rem;
  border-radius: 5px; }
  @media (min-width: 1281px) {
    .b-opportunities-layout__filter {
      display: block; } }
  .b-opportunities-layout__filter-type {
    margin-bottom: 1rem;
    color: #00a;
    font-weight: 500; }
  .b-opportunities-layout__filter-items {
    margin-left: 1rem;
    margin-bottom: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px; }
    .b-opportunities-layout__filter-items:last-child {
      margin-bottom: 0; }
  .b-opportunities-layout__filter-item {
    display: block;
    color: #232323; }
    .b-opportunities-layout__filter-item.active {
      pointer-events: none;
      font-weight: 700;
      color: #0000AA; }
    .b-opportunities-layout__filter-item.all {
      margin-bottom: 1rem; }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-opportunities-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-opportunities-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-opportunities-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-opportunities-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-opportunities-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-opportunities-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-opportunities-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(66.66667% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-opportunities-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-opportunities-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-opportunities-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-opportunities-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-opportunities-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-opportunities-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-opportunities-layout__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(75% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

.b-opportunities-layout__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (max-width: 1920px) {
    .b-opportunities-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (min-width: 1921px) {
    .b-opportunities-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 1280px) {
    .b-opportunities-layout__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: -25px; } }
  @media (min-width: 1921px) {
    .b-opportunities-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 950px) {
    .b-opportunities-layout__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: -30px; } }
  @media (min-width: 1921px) {
    .b-opportunities-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 660px) {
    .b-opportunities-layout__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: -20px; } }
  @media (min-width: 1921px) {
    .b-opportunities-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 450px) {
    .b-opportunities-layout__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-opportunities-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }
  @media (max-width: 320px) {
    .b-opportunities-layout__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: -10px; } }
  @media (min-width: 1921px) {
    .b-opportunities-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -40px; } }

.b-opportunities-layout__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 2rem 1.5rem 1.5em;
  position: relative;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer; }
  @media (max-width: 1920px) {
    .b-opportunities-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }
  @media (max-width: 1280px) {
    .b-opportunities-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 25px; } }
  @media (max-width: 950px) {
    .b-opportunities-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 30px; } }
  @media (max-width: 660px) {
    .b-opportunities-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px; } }
  @media (max-width: 450px) {
    .b-opportunities-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (max-width: 320px) {
    .b-opportunities-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px; } }
  @media (min-width: 1921px) {
    .b-opportunities-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-opportunities-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-opportunities-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-opportunities-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-opportunities-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-opportunities-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-opportunities-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-opportunities-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1700px) and (max-width: 1920px) {
  .b-opportunities-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }

@media (min-width: 1700px) and (max-width: 1280px) {
  .b-opportunities-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 25px; } }

@media (min-width: 1700px) and (max-width: 950px) {
  .b-opportunities-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px; } }

@media (min-width: 1700px) and (max-width: 660px) {
  .b-opportunities-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px; } }

@media (min-width: 1700px) and (max-width: 450px) {
  .b-opportunities-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1700px) and (max-width: 320px) {
  .b-opportunities-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px; } }

@media (min-width: 1700px) and (min-width: 1921px) {
  .b-opportunities-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px; } }
  .b-opportunities-layout__item:hover {
    outline: 1px solid #00a; }
  .b-opportunities-layout__item-content {
    margin-right: 0.5rem; }
  .b-opportunities-layout__item-title {
    font-weight: 700;
    color: #232323 !important;
    pointer-events: none; }
  .b-opportunities-layout__item-desc {
    margin-top: 0.5rem; }
  .b-opportunities-layout__item-icon {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto; }
  .b-opportunities-layout__item-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer; }

/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/pagination/pagination.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-pagination {
  margin-top: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .b-pagination__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 0.5rem;
    padding-top: 3px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    .b-pagination__items a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      width: 2rem;
      height: 2rem;
      color: #232323;
      border: 1px solid #232323 !important;
      border-radius: 25px;
      margin-right: 0.5rem; }
      .b-pagination__items a:last-child {
        margin-right: 0; }
      .b-pagination__items a:hover {
        background-color: #99cdf1;
        color: #fff;
        border: 0 !important; }
    .b-pagination__items span {
      margin-right: 0.5rem; }
    .b-pagination__items a.active {
      pointer-events: none;
      background-color: #00a;
      color: #fff;
      border: 0 !important; }
    @media (min-width: 451px) {
      .b-pagination__items a,
      .b-pagination__items span {
        margin-right: 1rem; } }

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/personal-data-form/personal-data-form.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-personal-data-form h3 {
  text-align: start; }
  @media (min-width: 661px) {
    .b-personal-data-form h3 {
      text-align: center; } }

.b-personal-data-form__field {
  width: 100%;
  height: 3rem;
  padding: 0 1.25rem;
  border-radius: 2.5rem;
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none; }
  .b-personal-data-form__field.error {
    border: 1px solid #ff4c62;
    background-color: #ffedef; }

.b-personal-data-form__error {
  display: none;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  color: #ff4c62;
  text-align: center; }

.b-personal-data-form__title .b-title-with-desc__title {
  text-align: start; }
  @media (min-width: 661px) {
    .b-personal-data-form__title .b-title-with-desc__title {
      text-align: center; } }

.b-personal-data-form__content {
  max-width: 41rem;
  margin: 0 auto; }

.b-personal-data-form__fio {
  display: block; }
  @media (min-width: 951px) {
    .b-personal-data-form__fio {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }
  .b-personal-data-form__fio-label {
    margin-bottom: 1rem; }
    @media (min-width: 951px) {
      .b-personal-data-form__fio-label {
        margin-bottom: 0;
        margin-top: 1rem;
        margin-right: 1rem; } }
  .b-personal-data-form__fio-field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    margin-top: 1.5rem; }
    .b-personal-data-form__fio-field:first-child {
      margin-top: 0; }
    @media (min-width: 661px) {
      .b-personal-data-form__fio-field {
        width: 20rem; } }
    @media (min-width: 951px) {
      .b-personal-data-form__fio-field {
        width: 22rem; } }
    .b-personal-data-form__fio-field input {
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2; }
      .b-personal-data-form__fio-field input.error + label {
        display: block; }

.b-personal-data-form__contacts {
  display: block; }
  @media (min-width: 661px) {
    .b-personal-data-form__contacts {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }
  .b-personal-data-form__contacts-left {
    margin-right: 2rem; }
  .b-personal-data-form__contacts-label {
    margin-bottom: 0.5rem; }
  .b-personal-data-form__contacts-navigations {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    margin-bottom: 1rem; }
    @media (min-width: 451px) {
      .b-personal-data-form__contacts-navigations {
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row; } }
    @media (min-width: 661px) {
      .b-personal-data-form__contacts-navigations {
        width: auto;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: start;
        margin-bottom: 0; } }
    @media (min-width: 951px) {
      .b-personal-data-form__contacts-navigations {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row; } }
    .b-personal-data-form__contacts-navigations input {
      display: none; }
    .b-personal-data-form__contacts-navigations label {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: relative;
      cursor: pointer; }
      @media (min-width: 951px) {
        .b-personal-data-form__contacts-navigations label {
          margin-right: 1rem; } }
      .b-personal-data-form__contacts-navigations label:last-child {
        margin-right: 0; }
      .b-personal-data-form__contacts-navigations label::before {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        content: "";
        margin-top: 0.25rem;
        margin-right: 5px;
        width: 0.9rem;
        height: 0.9rem;
        background-color: #fff;
        border-radius: 100%; }
      .b-personal-data-form__contacts-navigations label::after {
        position: absolute;
        display: none;
        content: '';
        width: 0.45rem;
        height: 0.45rem;
        border-radius: 100px;
        background-color: #00a;
        top: 0.45rem;
        left: 0.2rem; }
    .b-personal-data-form__contacts-navigations input:checked + label::after {
      display: block; }
  .b-personal-data-form__contacts-fields {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  .b-personal-data-form__contacts-field {
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%; }
    @media (min-width: 661px) {
      .b-personal-data-form__contacts-field {
        width: 20rem; } }
    @media (min-width: 951px) {
      .b-personal-data-form__contacts-field {
        width: 22rem; } }
    .b-personal-data-form__contacts-field.active {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    .b-personal-data-form__contacts-field input {
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2; }
      .b-personal-data-form__contacts-field input.error ~ label {
        display: block; }
    .b-personal-data-form__contacts-field .iti {
      width: 100%; }

.b-personal-data-form__info {
  display: block; }
  @media (min-width: 661px) {
    .b-personal-data-form__info {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }
  .b-personal-data-form__info-label {
    margin-bottom: 1rem; }
    @media (min-width: 661px) {
      .b-personal-data-form__info-label {
        margin-right: 2rem; } }
  .b-personal-data-form__info-desc {
    width: 100%;
    padding: 0.5rem 2rem;
    background: #d6def4;
    border-radius: 15px; }
    @media (min-width: 661px) {
      .b-personal-data-form__info-desc {
        width: 20rem; } }
    @media (min-width: 951px) {
      .b-personal-data-form__info-desc {
        width: 22rem; } }

.b-personal-data-form__resources {
  display: block; }
  @media (min-width: 661px) {
    .b-personal-data-form__resources {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  .b-personal-data-form__resources.error .b-personal-data-form__error {
    display: block; }
  .b-personal-data-form__resources.error .b-personal-data-form__resources-list {
    border: 1px solid #ff4c62; }
  .b-personal-data-form__resources.error label::before {
    border: 1px solid #ff4c62; }
  .b-personal-data-form__resources-all {
    max-width: 10rem; }
  .b-personal-data-form__resources-info {
    margin-bottom: 0.5rem; }
    @media (min-width: 661px) {
      .b-personal-data-form__resources-info {
        margin-bottom: 0;
        margin-right: 2rem; } }
  .b-personal-data-form__resources-items {
    width: 100%; }
    @media (min-width: 661px) {
      .b-personal-data-form__resources-items {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: 20rem; } }
    @media (min-width: 951px) {
      .b-personal-data-form__resources-items {
        width: 22rem; } }
  .b-personal-data-form__resources-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 0.75rem; }
    .b-personal-data-form__resources-item:first-child {
      margin-top: 0; }
    .b-personal-data-form__resources-item input[type="checkbox"] {
      display: none; }
    .b-personal-data-form__resources-item label {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: relative;
      cursor: pointer;
      word-break: break-word; }
    .b-personal-data-form__resources-item label::before {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      content: '';
      display: block;
      width: 1rem;
      height: 1rem;
      margin-top: 5px;
      -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.25);
              box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.25);
      background-color: #fff;
      border-radius: 100%;
      margin-right: 1.25rem; }
    .b-personal-data-form__resources-item label::after {
      content: '';
      display: none;
      position: absolute;
      width: 0.6rem;
      height: 0.6rem;
      -webkit-mask-image: url("/images/icons/checkbox_ok.png");
              mask-image: url("/images/icons/checkbox_ok.png");
      -webkit-mask-position: center;
              mask-position: center;
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      background-color: #fff;
      top: 0.45rem;
      left: 0.2rem; }
    .b-personal-data-form__resources-item input[type="checkbox"]:checked + label::before {
      background-color: #00a; }
    .b-personal-data-form__resources-item input[type="checkbox"]:checked + label::after {
      display: block; }
    .b-personal-data-form__resources-item.another {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; }
      .b-personal-data-form__resources-item.another textarea[type="text"] {
        pointer-events: none;
        padding-top: 0.75rem;
        opacity: 0.6; }
      .b-personal-data-form__resources-item.another input[type="checkbox"]:checked ~ textarea[type="text"] {
        pointer-events: all;
        opacity: 1; }

.b-personal-data-form__target {
  display: block;
  background: #d6def4;
  border-radius: 15px;
  padding: 1rem; }
  @media (min-width: 661px) {
    .b-personal-data-form__target {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      padding: 2rem; } }
  .b-personal-data-form__target-label {
    font-weight: 500;
    margin-bottom: 1rem; }
    @media (min-width: 661px) {
      .b-personal-data-form__target-label {
        margin-bottom: 0; } }
  .b-personal-data-form__target-desc {
    width: 100%; }
    @media (min-width: 661px) {
      .b-personal-data-form__target-desc {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: 18rem; } }
    @media (min-width: 951px) {
      .b-personal-data-form__target-desc {
        width: 22rem; } }

.b-personal-data-form__categories-item {
  display: block;
  margin-bottom: 1rem; }
  @media (min-width: 661px) {
    .b-personal-data-form__categories-item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      margin-bottom: 0; } }

.b-personal-data-form__categories-list {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%; }
  @media (min-width: 661px) {
    .b-personal-data-form__categories-list {
      width: 20rem; } }
  @media (min-width: 951px) {
    .b-personal-data-form__categories-list {
      width: 22rem; } }
  .b-personal-data-form__categories-list div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    .b-personal-data-form__categories-list div::before {
      content: '';
      display: block;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: 1.1rem;
      height: 0.15rem;
      background-color: #00a;
      border-radius: 0.15rem;
      margin-right: 1.25rem; }
  .b-personal-data-form__categories-list p {
    margin-top: 0.5rem;
    color: #00a;
    font-weight: 500; }

.b-personal-data-form__taboo {
  display: block; }
  @media (min-width: 661px) {
    .b-personal-data-form__taboo {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }
  .b-personal-data-form__taboo-label {
    margin-right: 2rem; }
    .b-personal-data-form__taboo-label span {
      color: #adadad; }
  .b-personal-data-form__taboo-fields {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto; }
    @media (min-width: 661px) {
      .b-personal-data-form__taboo-fields {
        width: 20rem; } }
    @media (min-width: 951px) {
      .b-personal-data-form__taboo-fields {
        width: 22rem; } }
    .b-personal-data-form__taboo-fields input[type="radio"] {
      display: none; }
    .b-personal-data-form__taboo-fields input[type='text'] {
      margin-top: 1rem;
      opacity: 0.6;
      pointer-events: none; }
    .b-personal-data-form__taboo-fields label {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: relative;
      cursor: pointer;
      margin-top: 1rem;
      color: #9e9d9d; }
      .b-personal-data-form__taboo-fields label:first-child {
        margin-top: 0; }
    .b-personal-data-form__taboo-fields label::before {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      content: '';
      display: block;
      width: 1rem;
      height: 1rem;
      -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.25);
              box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.25);
      background-color: #fff;
      border-radius: 100%;
      margin-right: 1.25rem; }
    .b-personal-data-form__taboo-fields label::after {
      content: '';
      display: none;
      position: absolute;
      width: 0.6rem;
      height: 0.6rem;
      -webkit-mask-image: url("/images/icons/checkbox_ok.png");
              mask-image: url("/images/icons/checkbox_ok.png");
      -webkit-mask-position: center;
              mask-position: center;
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      background-color: #fff;
      top: 0.2rem;
      left: 0.2rem; }
    .b-personal-data-form__taboo-fields input[type="radio"]:checked + label {
      color: #232323; }
      .b-personal-data-form__taboo-fields input[type="radio"]:checked + label::before {
        background-color: #00a; }
      .b-personal-data-form__taboo-fields input[type="radio"]:checked + label::after {
        display: block; }
    .b-personal-data-form__taboo-fields input[id="taboo-yes"]:checked ~ input[type="text"] {
      opacity: 1;
      pointer-events: all; }
    .b-personal-data-form__taboo-fields input[id="conditions-yes"]:checked ~ input[type="text"] {
      opacity: 1;
      pointer-events: all; }

.b-personal-data-form__another {
  font-weight: 500; }
  .b-personal-data-form__another.blue {
    color: #00a; }

.b-personal-data-form__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 2.5rem; }

.b-personal-data-form__comment {
  text-align: center;
  margin-top: 1rem;
  color: #8d8d8d; }

.b-personal-data-form__recapcha-error {
  display: none;
  text-align: center;
  color: #ff4c62; }

.b-personal-data-form__success {
  display: none;
  text-align: center;
  padding: 0.75rem 1rem;
  background-color: #ccede9; }
  @media (max-width: 450px) {
    .b-personal-data-form__success {
      width: 100vw !important;
      margin-left: calc((50vw - 50%) * -1) !important;
      margin-right: calc((50vw - 50%) * -1) !important; } }

.b-personal-data-form__form {
  display: none; }

/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/search-page/search-page.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-search-page__content {
  position: relative;
  padding: 2.5rem 0; }
  .b-search-page__content::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: -1; }
    @media (max-width: 950px) {
      .b-search-page__content::before {
        width: 100vw !important;
        margin-left: calc((50vw - 50%) * -1) !important;
        margin-right: calc((50vw - 50%) * -1) !important; } }
  @media (min-width: 661px) {
    .b-search-page__content {
      padding: 3rem 0; } }
  @media (min-width: 951px) {
    .b-search-page__content {
      padding: 3.5rem 4.75rem; } }
  @media (min-width: 1281px) {
    .b-search-page__content {
      padding: 4rem 7rem; } }

.b-search-page__title {
  text-align: center; }

.b-search-page__form {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .b-search-page__form-input {
    position: relative;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    border-radius: 50px;
    background-color: #f4f4f4;
    max-width: none; }
    .b-search-page__form-input::before {
      content: "";
      display: none;
      position: absolute;
      width: 1.2rem;
      height: 1rem;
      left: 1.25rem;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto 0;
      background-image: url("/images/icons/search-cloud.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain; }
    @media (min-width: 451px) {
      .b-search-page__form-input {
        margin-right: 2rem; }
        .b-search-page__form-input::before {
          display: block; } }
  .b-search-page__form-exit {
    position: absolute;
    width: 1.2rem;
    height: 1rem;
    right: 1.25rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-image: url("/images/icons/exit.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer; }
  .b-search-page__form input[type='text'] {
    background-color: #f4f4f4;
    max-width: none;
    padding-right: 3.5rem; }
  .b-search-page__form input[type='submit'] {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 7rem;
    -ms-flex-item-align: center;
        align-self: center;
    margin-top: 2rem; }
  @media (min-width: 451px) {
    .b-search-page__form {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; }
      .b-search-page__form::before {
        display: block; }
      .b-search-page__form input[type='text'] {
        padding-left: 3.5rem; }
      .b-search-page__form input[type='submit'] {
        margin-top: 0; } }

.b-search-page__items {
  margin-top: 1rem; }

.b-search-page__item {
  position: relative;
  margin-top: 1.5rem;
  padding: 0 1rem;
  -webkit-transition: background-color 0.2s linear;
  -o-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear; }
  .b-search-page__item:hover {
    background-color: #e1efff; }
  .b-search-page__item:first-child {
    margin-top: 0; }
  .b-search-page__item::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #e5e5e5; }
  .b-search-page__item-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .b-search-page__item-title {
    color: #00a;
    border: 0;
    font-weight: 700;
    font-size: 15px; }
    .b-search-page__item-title:visited {
      color: #7343d9; }
    .b-search-page__item-title b {
      color: #fff;
      background-color: #00a; }
    @media (min-width: 951px) {
      .b-search-page__item-title {
        font-size: 17px; } }
  .b-search-page__item-url {
    color: #9e9d9d;
    margin-top: 0.75rem; }
  .b-search-page__item-desc {
    word-break: break-all;
    margin-top: 0.75rem; }
    .b-search-page__item-desc b {
      color: #fff;
      background-color: #00a;
      font-weight: 400; }

.b-search-page__preview {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #00a; }
  .b-search-page__preview-image {
    max-width: 12rem; }

.b-search-page__not-found-desc {
  margin-top: 1rem; }
  .b-search-page__not-found-desc a {
    color: #232323;
    border-color: #232323; }

.b-search-page__not-found-image {
  text-align: center; }
  .b-search-page__not-found-image img {
    max-width: 12rem; }

.b-search-page .search-language-guess a {
  color: #00a;
  border-color: #00a; }

.b-search-page__categories {
  margin-top: 1rem; }

.b-search-page__category {
  display: none; }
  .b-search-page__category.active {
    display: block; }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/site/solutions-layout/solutions-layout.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-solutions-layout__main {
  position: relative; }

.b-solutions-layout__content {
  position: relative; }
  .b-solutions-layout__content-loading {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 5; }
    .b-solutions-layout__content-loading::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: #9e9d9d;
      opacity: 0.2; }
    .b-solutions-layout__content-loading.active {
      display: block; }
    .b-solutions-layout__content-loading .b-loading {
      top: 10rem !important; }

.b-solutions-layout__categories {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-left: -0.5rem;
  margin-top: -1rem; }

.b-solutions-layout__category {
  margin: 1rem auto 0 !important;
  padding-left: 0.5rem;
  color: #232323;
  font-weight: 400; }
  @media (min-width: 661px) {
    .b-solutions-layout__category {
      font-weight: 700; } }
  .b-solutions-layout__category.active {
    color: #00a;
    text-decoration: underline;
    pointer-events: none; }

.b-solutions-layout__tags-container {
  display: block; }
  @media (min-width: 1281px) {
    .b-solutions-layout__tags-container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  .b-solutions-layout__tags-container.disabled {
    display: none !important; }

.b-solutions-layout__tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -1rem;
  margin-left: -0.5rem;
  max-height: 4rem;
  overflow: hidden; }
  @media (min-width: 451px) {
    .b-solutions-layout__tags {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start; } }
  @media (min-width: 951px) {
    .b-solutions-layout__tags {
      margin-top: -1.5rem; } }

.b-solutions-layout__tags-button {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.5rem;
  color: #232323;
  font-weight: 400;
  cursor: pointer; }
  @media (min-width: 451px) {
    .b-solutions-layout__tags-button {
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end; } }
  @media (min-width: 1281px) {
    .b-solutions-layout__tags-button {
      margin-left: 1rem; } }
  .b-solutions-layout__tags-button::after {
    content: '';
    width: 11px;
    height: 100%;
    margin-left: 7px;
    margin-top: 3px;
    -webkit-mask-image: url("/images/arrow-select.svg");
            mask-image: url("/images/arrow-select.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    background-color: #00a;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    -o-transition: transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s; }
  .b-solutions-layout__tags-button:hover {
    color: #9e9d9d; }
    .b-solutions-layout__tags-button:hover::after {
      background-color: #9e9d9d; }
  .b-solutions-layout__tags-button.disabled {
    pointer-events: none; }
  .b-solutions-layout__tags-button.active::after {
    -webkit-transform: rotate(0.5turn);
            transform: rotate(0.5turn); }

.b-solutions-layout__tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 10px 30px;
  margin-top: 1rem;
  margin-left: 0.5rem;
  min-height: 2.5rem;
  border-radius: 1.25rem;
  background-color: #d6def4;
  color: #232323; }
  @media (min-width: 951px) {
    .b-solutions-layout__tag {
      margin-top: 1.5rem; } }
  .b-solutions-layout__tag.active {
    background-color: #ffd9d7; }

.b-solutions-layout__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -4rem !important; }
  @media (max-width: 1920px) {
    .b-solutions-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-solutions-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-solutions-layout__items {
      margin-left: -12.5px;
      margin-right: -12.5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-solutions-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-solutions-layout__items {
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-solutions-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-solutions-layout__items {
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-solutions-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-solutions-layout__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-solutions-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-solutions-layout__items {
      margin-left: -5px;
      margin-right: -5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-solutions-layout__items {
      margin-left: -20px;
      margin-right: -20px;
      margin-top: 0; } }

.b-solutions-layout__item-info {
  display: none;
  margin-top: 8rem !important;
  margin-bottom: 4rem !important;
  -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
          order: 6; }
  @media (max-width: 1920px) {
    .b-solutions-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-solutions-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-solutions-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-solutions-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-solutions-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-solutions-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-solutions-layout__item-info {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  .b-solutions-layout__item-info.active {
    display: block; }

.b-solutions-layout__item {
  display: block;
  position: relative;
  margin-top: 6rem !important;
  opacity: 0;
  -webkit-transition: opacity 0.3s, margin-top 0.3s;
  -o-transition: opacity 0.3s, margin-top 0.3s;
  transition: opacity 0.3s, margin-top 0.3s; }
  @media (max-width: 1920px) {
    .b-solutions-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (max-width: 1280px) {
    .b-solutions-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (max-width: 950px) {
    .b-solutions-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (max-width: 660px) {
    .b-solutions-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (max-width: 450px) {
    .b-solutions-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (max-width: 320px) {
    .b-solutions-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 1921px) {
    .b-solutions-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(100% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 451px) {
    .b-solutions-layout__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  @media (min-width: 951px) {
    .b-solutions-layout__item {
      display: block; } }
  @media (min-width: 951px) and (max-width: 1920px) {
    .b-solutions-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 1280px) {
    .b-solutions-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 25px);
      margin-left: 12.5px;
      margin-right: 12.5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 950px) {
    .b-solutions-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 660px) {
    .b-solutions-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 450px) {
    .b-solutions-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (max-width: 320px) {
    .b-solutions-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 10px);
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 0; } }
  @media (min-width: 951px) and (min-width: 1921px) {
    .b-solutions-layout__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: calc(50% - 40px);
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1920px) {
  .b-solutions-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 1280px) {
  .b-solutions-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 25px);
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 950px) {
  .b-solutions-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 660px) {
  .b-solutions-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 450px) {
  .b-solutions-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (max-width: 320px) {
  .b-solutions-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0; } }

@media (min-width: 1281px) and (min-width: 1921px) {
  .b-solutions-layout__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0; } }
  .b-solutions-layout__item:hover .b-solutions-layout__item-title {
    color: #00a; }
  .b-solutions-layout__item.active {
    opacity: 1;
    margin-top: 4rem !important; }
  .b-solutions-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
    max-height: 16rem;
    overflow: hidden; }

@media (min-width: 451px) and (max-width: 1920px) {
  .b-solutions-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 1280px) {
  .b-solutions-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 950px) {
  .b-solutions-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 660px) {
  .b-solutions-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 450px) {
  .b-solutions-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (max-width: 320px) {
  .b-solutions-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 451px) and (min-width: 1921px) {
  .b-solutions-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(33.33333% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1920px) {
  .b-solutions-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 1280px) {
  .b-solutions-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 6.25px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 950px) {
  .b-solutions-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 7.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 660px) {
  .b-solutions-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 450px) {
  .b-solutions-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (max-width: 320px) {
  .b-solutions-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 2.5px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }

@media (min-width: 661px) and (min-width: 1921px) {
  .b-solutions-layout__item-image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 10px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; } }
    @media (min-width: 951px) {
      .b-solutions-layout__item-image {
        width: 100%; } }
  @media (min-width: 451px) {
    .b-solutions-layout__item-content {
      margin-left: 1.5rem; } }
  @media (min-width: 951px) {
    .b-solutions-layout__item-content {
      margin-left: 0; } }
  .b-solutions-layout__item-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    font-weight: 700; }
  .b-solutions-layout__item-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    margin-top: 1rem; }
  .b-solutions-layout__item-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2; }

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/promo/new-year-blocks/new-year-banner/new-year-banner.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-new-year-banner {
  position: relative;
  padding: 2.25rem 0 3rem; }
  @media (min-width: 661px) {
    .b-new-year-banner {
      padding: 4.5rem 0 6rem; } }
  @media (min-width: 1281px) {
    .b-new-year-banner {
      padding: 4.5rem 0 6rem; } }

@-webkit-keyframes box2top {
  20% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  21% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg); }
  22% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg); }
  23% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg); }
  24% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg); }
  25% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

@keyframes box2top {
  20% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  21% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg); }
  22% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg); }
  23% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg); }
  24% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg); }
  25% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }
  .b-new-year-banner__back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-image: url("/images/promo/new-year-landing/back-banner.png");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1; }
  .b-new-year-banner__main {
    position: relative; }
    @media (min-width: 1000px) {
      .b-new-year-banner__main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
  .b-new-year-banner__content {
    text-align: center; }
    @media (min-width: 1000px) {
      .b-new-year-banner__content {
        text-align: start;
        max-width: 30rem; } }
  .b-new-year-banner__container {
    display: none;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 30rem;
    height: 29rem; }
    @media (min-width: 661px) {
      .b-new-year-banner__container {
        display: block;
        margin-top: 3rem; } }
    @media (min-width: 1000px) {
      .b-new-year-banner__container {
        margin-right: 0;
        margin-top: 0; } }
    .b-new-year-banner__container::before {
      content: "";
      position: absolute;
      width: 7.5rem;
      height: 9rem;
      top: 0.5rem;
      right: 0;
      background-image: url("/images/promo/new-year-landing/candy.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      z-index: 0; }
    .b-new-year-banner__container .b-new-year-banner__present:nth-child(1) {
      width: 11.35rem;
      height: 11rem;
      -webkit-transform: rotate(13deg);
              transform: rotate(13deg);
      right: 0.55rem;
      top: 8rem;
      z-index: 6; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(1) .b-new-year-banner__present-top {
        left: 0.3rem;
        top: -1.65rem;
        -webkit-animation-delay: 1s;
                animation-delay: 1s; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(1) .b-new-year-banner__present-content {
        -webkit-transform: translateY(1.85rem);
                transform: translateY(1.85rem); }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(1):hover .b-new-year-banner__present-top {
        -webkit-animation: none;
                animation: none;
        left: 0.3rem;
        top: -5.5rem; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(1):hover .b-new-year-banner__present-content {
        -webkit-transform: translateY(-0.5rem);
                transform: translateY(-0.5rem); }
    .b-new-year-banner__container .b-new-year-banner__present:nth-child(2) {
      width: 10.55rem;
      height: 12rem;
      right: 4rem;
      top: 3rem;
      z-index: 2; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(2) .b-new-year-banner__present-top {
        -ms-flex-item-align: end;
            align-self: flex-end;
        -webkit-animation: none;
                animation: none;
        z-index: 3; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(2) .b-new-year-banner__present-content {
        z-index: 2;
        left: -0.3rem;
        top: 0; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(2) .b-new-year-banner__present-bottom {
        top: 0.1rem;
        left: -0.25rem;
        z-index: 1; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(2):hover .b-new-year-banner__present-content {
        top: -4rem; }
    .b-new-year-banner__container .b-new-year-banner__present:nth-child(3) {
      width: 9rem;
      height: 12rem;
      left: 10rem;
      top: 1rem;
      z-index: 1; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(3) .b-new-year-banner__present-content {
        z-index: 1;
        left: -0.85rem;
        top: 0; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(3) .b-new-year-banner__present-bottom {
        top: 0.5rem;
        left: -0.25rem;
        z-index: 2; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(3):hover .b-new-year-banner__present-content {
        top: -4.5rem;
        left: -1.5rem; }
    .b-new-year-banner__container .b-new-year-banner__present:nth-child(4) {
      width: 9.5rem;
      height: 9.5rem;
      right: 8rem;
      top: 8.5rem;
      z-index: 4; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(4) .b-new-year-banner__present-top {
        left: -0.6rem;
        top: 0;
        -webkit-animation-delay: 4s;
                animation-delay: 4s; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(4) .b-new-year-banner__present-content {
        top: 1.75rem; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(4):hover .b-new-year-banner__present-top {
        -webkit-animation: none;
                animation: none;
        top: -4rem; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(4):hover .b-new-year-banner__present-content {
        top: 0.75rem; }
    .b-new-year-banner__container .b-new-year-banner__present:nth-child(5) {
      width: 8.5rem;
      height: 10.5rem;
      z-index: 3;
      left: 7.5rem;
      top: 5rem; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(5) .b-new-year-banner__present-top {
        top: 0;
        -webkit-animation-delay: 6s;
                animation-delay: 6s; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(5) .b-new-year-banner__present-content {
        top: 1.75rem; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(5):hover .b-new-year-banner__present-top {
        -webkit-animation: none;
                animation: none;
        top: -4rem; }
      .b-new-year-banner__container .b-new-year-banner__present:nth-child(5):hover .b-new-year-banner__present-content {
        top: -0.5rem; }
  .b-new-year-banner__title {
    color: #fff0e6;
    font-weight: 500; }
  .b-new-year-banner__desc {
    color: #fff0e6; }
  .b-new-year-banner__comment {
    display: none;
    color: #fff0e6;
    opacity: 0.5; }
    @media (min-width: 1000px) {
      .b-new-year-banner__comment {
        display: block; } }
  .b-new-year-banner__present {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    cursor: pointer; }
    .b-new-year-banner__present-top {
      position: absolute;
      width: 100%;
      text-align: center;
      -ms-flex-item-align: start;
          align-self: flex-start;
      z-index: 3;
      -webkit-animation: box2top 10s linear infinite;
              animation: box2top 10s linear infinite;
      -webkit-transition: 0.15s cubic-bezier(0.71, 0.09, 0.27, 1.69);
      -o-transition: 0.15s cubic-bezier(0.71, 0.09, 0.27, 1.69);
      transition: 0.15s cubic-bezier(0.71, 0.09, 0.27, 1.69); }
    .b-new-year-banner__present-content {
      position: absolute;
      width: 100%;
      text-align: center;
      -ms-flex-item-align: center;
          align-self: center;
      z-index: 1;
      -webkit-transition: 0.2s cubic-bezier(0.71, 0.09, 0.27, 1.69);
      -o-transition: 0.2s cubic-bezier(0.71, 0.09, 0.27, 1.69);
      transition: 0.2s cubic-bezier(0.71, 0.09, 0.27, 1.69); }
    .b-new-year-banner__present-bottom {
      position: absolute;
      width: 100%;
      text-align: center;
      -ms-flex-item-align: end;
          align-self: flex-end;
      z-index: 2; }
  .b-new-year-banner__bag {
    position: absolute;
    z-index: 10;
    bottom: 0;
    background-image: url("/images/promo/new-year-landing/bug.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 17.7rem;
    pointer-events: none; }
  .b-new-year-banner__container-mobile {
    margin-top: 1.5rem; }
    @media (min-width: 661px) {
      .b-new-year-banner__container-mobile {
        display: none; } }
    .b-new-year-banner__container-mobile .b-new-year-banner__promo {
      position: fixed;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      left: 0;
      right: 0;
      margin: auto; }
  .b-new-year-banner__mobile-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 1rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    .b-new-year-banner__mobile-item-image {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      min-width: 5rem;
      margin-right: 0.5rem; }
    .b-new-year-banner__mobile-item-content {
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
      color: #fff0e6; }
    .b-new-year-banner__mobile-item-title {
      color: inherit;
      font-weight: 700; }
    .b-new-year-banner__mobile-item-desc {
      display: none;
      color: inherit; }
      @media (min-width: 451px) {
        .b-new-year-banner__mobile-item-desc {
          display: block; } }
    .b-new-year-banner__mobile-item-desc-mobile {
      margin-top: 0.5rem;
      color: #fff0e6; }
      @media (min-width: 451px) {
        .b-new-year-banner__mobile-item-desc-mobile {
          display: none; } }
  .b-new-year-banner__comment-mobile {
    text-align: center;
    color: #fff0e6;
    opacity: 0.5; }
    @media (min-width: 1000px) {
      .b-new-year-banner__comment-mobile {
        display: none; } }
  .b-new-year-banner__promo {
    display: none;
    position: relative;
    z-index: 100;
    padding: 1rem;
    max-width: 25.75rem;
    border: 0.3rem solid #f2d545;
    background-color: #fff6bc;
    border-radius: 0.75rem; }
    @media (min-width: 661px) {
      .b-new-year-banner__promo {
        padding: 2.5rem; } }
    .b-new-year-banner__promo::before {
      content: '';
      display: block;
      width: 100%;
      max-width: 16.75rem;
      height: 0.5rem;
      -webkit-mask-image: url("/images/promo/new-year-landing/line.svg");
              mask-image: url("/images/promo/new-year-landing/line.svg");
      background-color: #232323;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-size: contain;
              mask-size: contain;
      z-index: -1; }
    .b-new-year-banner__promo::after {
      content: '';
      position: absolute;
      width: 3.5rem;
      height: 3.5rem;
      right: 0;
      bottom: 0;
      background-color: #232323;
      -webkit-mask-image: url("/images/promo/new-year-landing/oval.svg");
              mask-image: url("/images/promo/new-year-landing/oval.svg");
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-size: contain;
              mask-size: contain;
      z-index: -1; }
      @media (min-width: 661px) {
        .b-new-year-banner__promo::after {
          width: 5.5rem;
          height: 5.5rem; } }
    .b-new-year-banner__promo-exit {
      position: absolute;
      width: 0.75rem;
      height: 0.75rem;
      right: 0.75rem;
      top: 0.75rem;
      -webkit-mask-image: url("/images/icons/exit.svg");
              mask-image: url("/images/icons/exit.svg");
      background-color: #9e9d9d;
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-position: center;
              mask-position: center;
      cursor: pointer; }
      @media (min-width: 951px) {
        .b-new-year-banner__promo-exit {
          display: block; } }
      .b-new-year-banner__promo-exit:hover {
        background-color: #232323; }
    .b-new-year-banner__promo-title, .b-new-year-banner__promo-desc, .b-new-year-banner__promo-label {
      display: block;
      font-weight: 400;
      margin-top: 1rem; }
    .b-new-year-banner__promo-input {
      border: none !important;
      width: 100%;
      height: 2.5rem;
      padding-left: 1.75rem;
      background-color: #fff;
      outline: none;
      overflow: hidden;
      margin-top: 0.5rem;
      border-radius: 2.5rem; }
      .b-new-year-banner__promo-input::-webkit-input-placeholder {
        color: #9e9d9d; }
      .b-new-year-banner__promo-input::-moz-placeholder {
        color: #9e9d9d; }
      .b-new-year-banner__promo-input:-ms-input-placeholder {
        color: #9e9d9d; }
      .b-new-year-banner__promo-input::-ms-input-placeholder {
        color: #9e9d9d; }
      .b-new-year-banner__promo-input::placeholder {
        color: #9e9d9d; }
    .b-new-year-banner__promo-button {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-top: 1.5rem;
      height: 2.5rem; }

/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/block/promo/new-year-blocks/new-year-present/new-year-present.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
Задаёт минимальный размер текста.

Зачем это нужно?

Если задавать размер меньше базового, то часто бывает, что на миналке он получается уж слишком маленьким.

Например:
- нужно задать 16px
- базовый размер 20px
- значит размер пишем как 0.8rem

Но если на минималке базовый размер 14px, то тогда:
14 * 0,8 = 11,2px - что выглядит весьма убого...

Вариант 1 - писать другой размер на брекпоинтах. Муторно и бесит :(
Вариант 2 - эта функция.

Она считает, что минимальный размер шрифта на сайте - 14px и от этого пляшет.
Если $fs >= базовому размеру (1.1rem например), то выводит переданный $fs.
Если $fs для большой версии <= 14px, то выводит 14px.
Если $fs для минимальной версии < 14px, то выводит формулу типа calc(10px + 0.2rem)

10px - подобранный фиксированный размер
0.2rem - сколько нужно к нему прибавить (от базового размера), чтобы на биг версии получился нужный $fs.

Например:

mfs($fs-16) выведет calc(10px + 0.3rem)
Что на биг версии будет 10px + 20 * 0.3 = 16px
А на минималке будет 10px + 14 * 0.3 = 14.2px

mfs($fs-18) выведет calc(10px + 0.4rem)
Что на биг версии будет 10px + 20 * 0.4 = 18px
А на минималке будет 10px + 14 * 0.4 = 15.6px

mfs($fs-14) выведет 14px

mfs($fs-30) выведет 1.5rem
Хотя, если заранее известно, что размер больше базового, то использовать mfs вообще не надо.
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт контейнеру отрицательные боковые маржины равные половине $gutter
$top - даст отрицательный margin-top равный $gutter, чтобы подтянуть элементы (если у них есть отступы по вертикале)
$gutter-output - задавать отступы или нет
*/
/*
Миксин сетки, который работает по типу миксина foundation:
- даёт элементу ширину за вычетом $gutter
- даёт элементу боковые маржины равные половине $gutter

$size - кол-во ячеек (можно указать как: 2 | 20% | 300px | 3 of 12 | stretch)
$gutter - пустое пространство между ячейками (в любых единицах)
$gutter-output - нужно выводить отступы или нет. Если false, то боковые маржины не даются, а из ширины вычитается ($gutter / 4)
$top - нужно давать отступ с верху или нет. нужно, чтобы сделать отступы у элементов по вертикале. тогда тут и в grid-container пишется $top: true.
$max-width: если true, то вместо width поставится max-width

Например:

	@include grid-cell(2); - две ячейки (по 50%)
	@include grid-cell(20%); - пять ячеек (по 20%)
	@include grid-cell(300px); - ячейки по 300px (сколько влезет)
	@include grid-cell(3 of 12); - 4 ячейки (по 25%)
	@include grid-cell('stretch'); - растянуть с помощью flex: 1 1 auto;

	Две ячейки (первая 20%, а вторая 80%):
	&__item {
		@include grid-cell(20%);
	}
	&__item:nth-child(even) {
		@include grid-cell(80%);
	}
*/
/*
Просто выполняет grid-cell с уже указанным $max-width: true.
Для удобства замены в коде.
*/
/*
Миксин даёт блоку стандартные стили
*/
/*
Вычисляет ширину в зависимости от переданных данных:

get-width(2); - 50%
get-width(20%); - 20%
get-width(300px); - 300px
get-width(1 of 12); - 8.333%
*/
/*
Функция для перевода значения $value в пикселях в значение в ремах на основе $base-value
*/
/*
Функция для перевода значения $value в пикселях в значение в емах на основе $base-value
*/
/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.b-new-year-present {
  position: relative;
  padding: 2.25rem 0 3rem; }
  @media (min-width: 661px) {
    .b-new-year-present {
      padding: 4.5rem 0 6rem; } }
  @media (min-width: 1281px) {
    .b-new-year-present {
      padding: 4.5rem 0 6rem; } }
  .b-new-year-present__back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-image: url("/images/promo/new-year-landing/back-form.png");
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1; }
  @media (min-width: 661px) {
    .b-new-year-present__main {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start; } }
  .b-new-year-present__form {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    padding: 2rem 1rem;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff6bc;
    border-radius: 1.05rem;
    margin-top: 2.5rem;
    max-width: 20rem;
    overflow: hidden; }
    @media (min-width: 661px) {
      .b-new-year-present__form {
        max-width: 30rem;
        margin-right: 0; } }
    @media (min-width: 951px) {
      .b-new-year-present__form {
        padding: 3rem 1.5rem; } }
    @media (min-width: 1281px) {
      .b-new-year-present__form {
        padding: 3rem; } }
  .b-new-year-present__content {
    color: #fff0e6;
    max-width: 30rem;
    margin-right: 1rem; }
  .b-new-year-present__title {
    color: inherit;
    text-align: center; }
    @media (min-width: 661px) {
      .b-new-year-present__title {
        text-align: start; } }
  .b-new-year-present__comment {
    display: none;
    color: inherit;
    opacity: 0.5;
    margin-top: 2rem; }
    @media (min-width: 661px) {
      .b-new-year-present__comment {
        display: block; } }
  .b-new-year-present__comment-mobile {
    text-align: center;
    color: #fff0e6;
    opacity: 0.5;
    margin-top: 2rem; }
    @media (min-width: 661px) {
      .b-new-year-present__comment-mobile {
        display: none; } }
  .b-new-year-present__presents {
    display: block;
    margin-top: 2rem;
    max-width: 18rem;
    margin-left: auto;
    margin-right: auto; }
    @media (min-width: 661px) {
      .b-new-year-present__presents {
        max-width: none;
        margin-left: 0;
        margin-right: 0; } }
  .b-new-year-present__present {
    margin-top: 1.5rem; }
    .b-new-year-present__present:first-child {
      margin-top: 0; }
    .b-new-year-present__present input {
      display: none; }
    .b-new-year-present__present label {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      cursor: pointer; }
      .b-new-year-present__present label::before {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        content: '';
        display: block;
        width: 1.15rem;
        height: 1.15rem;
        border-radius: 100%;
        overflow: hidden;
        background-color: #fff;
        margin-right: 0.75rem; }
    .b-new-year-present__present input:checked + label::after {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      content: '';
      width: 0.75rem;
      height: 0.75rem;
      position: absolute;
      left: 0.2rem;
      background-color: #f2d545;
      border-radius: 100%;
      overflow: hidden; }