/*
 * Рекламные баннеры: ряд под шапкой и полоса под рекомендациями на главной, полоса в выдаче каталога.
 * Картинки при загрузке обрезаются до нужных пропорций, aspect-ratio держит место до загрузки.
 */

.promo-banner {
    display: block;
    overflow: hidden;
    border-radius: 1.5rem;
    background-color: #F4F4F4;
}

.promo-banner picture,
.promo-banner img {
    display: block;
    width: 100%;
    height: 100%;
}

.promo-banner img {
    object-fit: cover;
    transition: transform .3s ease;
}

.promo-banner[href]:hover img {
    transform: scale(1.02);
}

.promo-banner_small {
    aspect-ratio: 3 / 1;
}

.promo-banner_wide {
    aspect-ratio: 6 / 1;
}

/* ---------- Ряд под шапкой ---------- */

.promo-row.margin-title {
    padding-top: 1.5rem;
    padding-bottom: 0;
}

.promo-row__list {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 1.75rem;
}

.promo-row__list > .promo-banner {
    flex: 0 0 calc((100% - 2 * 1.75rem) / 3);
}

/* Лента рекомендаций сразу под рядом баннеров */
.home-feed.home-feed_after-promo.margin-title {
    padding-top: 4rem;
}

/* ---------- Полоса под рекомендациями ---------- */

.promo-wide-section__banner {
    grid-column: 1 / -1;
}

/* ---------- Полоса в выдаче каталога ---------- */

.catalog-page__grid > .promo-banner {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .promo-banner {
        border-radius: 1rem;
    }

    .promo-banner_wide.promo-banner_has-mobile {
        aspect-ratio: 3 / 1;
    }

    .promo-row.margin-title {
        padding-top: 7.5rem;
    }

    /* На телефоне ряд листается вбок, следующий баннер выглядывает из-за края */
    .promo-row__list {
        justify-content: flex-start;
        gap: .75rem;
        margin: 0 -1.25rem;
        padding: 0 1.25rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 1.25rem;
        scrollbar-width: none;
    }

    .promo-row__list::-webkit-scrollbar {
        display: none;
    }

    .promo-row__list > .promo-banner {
        flex-basis: 85%;
        scroll-snap-align: start;
    }

    .promo-row__list > .promo-banner:only-child {
        flex-basis: 100%;
    }

    .home-feed.home-feed_after-promo.margin-title {
        padding-top: 2.5rem;
    }
}