/*
 * Главная страница atim-belaz.com: сетка продуктовых карточек 2x2.
 *
 * Важно: файл не меняет размер, пропорции или кадрирование баннера.
 * Первая строка новых карточек сохраняет исходное положение карточек
 * из текущего бэкапа; увеличившийся блок растёт только вниз.
 */

/* Слои баннера: изображение, стрелки и меню. */
.homepage-slider .swiper {
  z-index: 0 !important;
}

.homepage-slider .rel-menu {
  z-index: 5;
}

/*
 * Стрелки привязаны к исходной высоте баннера, а не к общей высоте
 * секции после добавления второго ряда карточек.
 */
.homepage-slider .homepage-slider-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1200px;
  z-index: 4;
  pointer-events: none;
}

.homepage-slider .homepage-slider-controls a {
  pointer-events: auto;
}

.homepage-slider .swiper-button-disabled {
  display: none;
}

/*
 * В исходном бэкапе верх карточек зависел от нижней границы баннера
 * и высоты одной старой карточки. Значения margin-top повторяют эту
 * позицию на прежних брейкпоинтах с погрешностью не более 0,5 px.
 */
.homepage-slider .main-c {
  position: relative !important;
  bottom: auto !important;
  width: 100% !important;
  margin-top: -196px;
  background: #000d29 !important;
}

/* Bootstrap container 1320 px: старая карточка имела высоту около 230 px. */
@media (min-width: 1400px) {
  .homepage-slider .main-c {
    margin-top: -230px;
  }
}

/* Старая мобильная/планшетная карточка имела высоту около 185 px. */
@media (min-width: 768.02px) and (max-width: 1200px) {
  .homepage-slider .main-c {
    margin-top: -185px;
  }
}

/* Высота баннера из действующего style.css на ширине до 960 px. */
@media (max-width: 960px) {
  .homepage-slider .homepage-slider-controls {
    height: 800px;
  }
}

/* На мобильной ширине действующий баннер имеет высоту 280 px. */
@media (max-width: 768px) {
  .homepage-slider .main-c {
    margin-top: 0;
  }

  .homepage-slider .homepage-slider-controls {
    height: 280px;
  }

  .homepage-slider-controls img {
    height: 35px;
  }
}

/*
 * Отключение старой горизонтальной ленты из /assets/css/style.css
 * и включение обычной переносимой сетки.
 */
.main-c > .container > .main-c-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  white-space: normal !important;
  gap: 0 !important;
}

.main-c > .container > .main-c-grid > .bl {
  display: block !important;
  float: none !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.main-c > .container > .main-c-grid > .bl > a {
  display: block;
  width: 100%;
}

.main-c > .container > .main-c-grid > .bl img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* От 768 px: две карточки в строке. */
@media (min-width: 768px) {
  .main-c > .container > .main-c-grid > .bl {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
  }
}

/* До 767,98 px: одна карточка в строке. */
@media (max-width: 767.98px) {
  .main-c > .container > .main-c-grid > .bl {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}