/*
 * Aspect-ratio по брейкпоинтам как у <picture>: моб / pt / 1440 / pc.
 * Числовые переменные (--hero-ar-*) задаются на каждом <picture> в template.php.
 */
.main-hero-slider .main-hero-slide > a {
    display: block;
    line-height: 0;
}

.main-hero-slider .main-hero-picture {
    display: block;
    width: 100%;
    line-height: 0;
    overflow: hidden;
    aspect-ratio: var(--hero-ar-mob-w) / var(--hero-ar-mob-h);
}

@media screen and (min-width: 768px) {
    .main-hero-slider .main-hero-picture {
        aspect-ratio: var(--hero-ar-pt-w) / var(--hero-ar-pt-h);
    }
}

@media screen and (min-width: 1279px) {
    .main-hero-slider .main-hero-picture {
        aspect-ratio: var(--hero-ar-1440-w) / var(--hero-ar-1440-h);
    }
}

@media screen and (min-width: 1537px) {
    .main-hero-slider .main-hero-picture {
        aspect-ratio: var(--hero-ar-pc-w) / var(--hero-ar-pc-h);
    }
}

.main-hero-slider .main-hero-picture-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}