.buy-reasons__media {
    grid-column: 1 / 1;
    position: relative;
    border-radius: 2.5rem;
    overflow: hidden;
}

.buy-reasons__img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    inset: 0;
}

.buy-reasons__list {
    grid-column: 2 / 4;
}


.buy-reasons__title {
    margin: 0 0 calc(var(--space-7) + var(--space-2));
    font-family: var(--font-heading);
    max-width: 50%;
}

.buy-reasons__item {
    border-radius: 2.5rem;
    padding: calc(var(--space-6) + var(--space-1));
    background: var(--brand-muted);
}


.buy-reasons__item-title {
    font-weight: 500;
    padding: var(--space-3);
    background: var(--bg-white-muted);
    border-radius: 2.5rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.buy-reasons__item-title-icon {
    width: 1rem;
    height: 1rem;
    display: flex;
}

.buy-reasons__item-text {
    color: var(--text-muted);
}


@media (max-width: 1024px) {

    .buy-reasons__inner {
        grid-template-columns: 1fr !important;
    }

    .buy-reasons__title {
        margin: 0 0 var(--space-5);
        max-width: 100%;
    }

    /* Items become a swipeable row. Card width mirrors the recommended-products
       slide: one slot of the row = (100% - gaps) / slidesPerView. */
    .buy-reasons__inner .buy-reasons__list {
        display: flex;
        /* The desktop rule puts the list into columns 2–4; with a single column
           that would create implicit tracks and break the overflow. */
        grid-column: 1 / -1;
        gap: var(--space-3);
        overflow-x: auto;
        overflow-y: hidden;
        /* Grid item must be allowed to shrink, otherwise overflow never kicks in. */
        min-width: 0;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* Mirrors the recommended-products slider on the same breakpoints. */
        --br-slides-per-view: 1.4;
    }

    .buy-reasons__list::-webkit-scrollbar {
        display: none;
    }

    .buy-reasons__item {
        flex: 0 0 auto;
        width: calc((100% - var(--space-3) * (var(--br-slides-per-view) - 1)) / var(--br-slides-per-view));
        scroll-snap-align: start;
    }

    .buy-reasons__media {
        max-width: 75%;
        margin: 0 auto;
        aspect-ratio: 16 / 9;
    }

    .buy-reasons__img {
        position: static;

    }
}



@media (min-width: 640px) and (max-width: 1024px) {
    .buy-reasons__inner .buy-reasons__list {
        --br-slides-per-view: 2.2;
    }
}

@media (max-width: 568px) {
    .buy-reasons__media {
        max-width: 100%;
        aspect-ratio: 38 / 40;
    }
}