/*
====================================================================

Front page: Banner (промо-слайдер)

Простой полноэкранный (full-bleed) слайдер промо-изображений на
общем движке (assets/css/slider.css, assets/js/slider.js). Здесь -
только собственный визуал блока: полоса край в край и высота секции.

Баннер - двойное исключение из каркаса .dd-front-section:
- секция не растягивается на экран (в отличие от остальных блоков
  главной), высота - по содержимому слайдера;
- секция не входит в контентную ленту (.dd-front-section__inner
  здесь не используется) - полоса идёт во всю ширину вьюпорта, как
  в референсе.

Горизонтальные изображения подготовлены в пропорции 16:9 с
безопасными зонами под диагональные разделители. На mobile карусель
полностью отключается, а вертикальный баннер показывается без
диагональной маски.

====================================================================
*/


.dd-banner {
    padding: 0;
    background: var(--dd-background);
}

.dd-banner__mobile {
    display: none;
}

@media (min-width: 769px) {

    .dd-banner {
        display: block;

        min-height: 0;
    }

}

.dd-banner__link {
    display: block;
    position: relative;

    aspect-ratio: 16 / 9;
}

.dd-banner__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {

    .dd-cut--banner-top,
    .dd-cut--banner-bottom,
    .dd-banner__slider {
        display: none;
    }

    .dd-banner__mobile,
    .dd-banner__mobile-link,
    .dd-banner__mobile-image {
        display: block;
        width: 100%;
    }

    .dd-banner__mobile-link {
        position: relative;
        aspect-ratio: 2 / 3;
    }

    .dd-banner__mobile-image {
        height: 100%;
        object-fit: cover;
    }

}


/*
 * Стрелки: общий вид задаёт движок (assets/css/slider.css) - этот
 * вид и был утверждён на баннере. Здесь только отступ от края.
 */
.dd-banner .dd-slider__arrow--prev {
    left: 14px;
}

.dd-banner .dd-slider__arrow--next {
    right: 14px;
}