.news-list__grid {
    align-items: stretch;
    gap: 2.8rem;
}

.news-list .section-header {
    margin-bottom: calc(var(--space-7) + var(--space-2));
}

@media (max-width: 1024px) {

    /* Cards become a swipeable row. Card width mirrors the recommended-products
       slide: one slot of the row = (100% - gaps) / slidesPerView. */
    .news-list .news-list__grid {
        display: flex;
        gap: var(--space-5);
        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. */
        --nl-slides-per-view: 1.1;
    }

    .news-list__grid::-webkit-scrollbar {
        display: none;
    }





}

@media (min-width: 640px) and (max-width: 1024px) {
    .news-list .news-list__grid {
        --nl-slides-per-view: 2.2;
    }
}