/* ==========================================================================
   Responsive — Home Page Adaptive Grids & Fluid Hero
   Loaded after components-pages.css. Uses :root tokens from responsive.css.
   ========================================================================== */

/* Layout/grid + img-fit handled in responsive.css §31b. This file holds
   only home-page-specific cosmetics that don't fit the shared utilities. */

#blog-slider { width: 100%; max-width: 100vw; }
#blog-slider .splide__slide { padding: var(--space-xs); }
#blog-slider .slide-title { font-size: var(--fs-h3); padding: var(--space-sm); }
#blog-slider .read-more-btn { padding: var(--space-xs) var(--space-md); }
@media (max-width: 575.98px) {
    #blog-slider .slide-image { aspect-ratio: 4 / 3; }
}

/* Suppliers swiper alignment (aspect-ratio is in components-pages.css) */
.swiper-section .container-swiper { width: 100%; padding-inline: var(--container-pad); }
.swiper-section .swiper-slide { padding-inline: var(--space-xs); }