/**
 * jp-434-home-oekosystem-mobile.css — Home "JTL Ökosystem" logo card on mobile
 *
 * Scope: ONLY body.home section.home-logobox-section, inside
 *        @media (max-width: 991.98px). Page: https://dev-jtl.betterscale.dev/de/
 *
 * Problem at ≤991px (audited at 375px):
 *   1. Two 64px side paddings stack — the section (padding: 0 64px 80px) AND
 *      the navy card wrapper (padding: 46px 64px) — leaving only ~119px of
 *      content. The heading "Lösungen für jede Challenge" clips on the right
 *      and the logos are crushed into the left half of the card.
 *   2. The mobile swiper (.swiper.is-mobile) renders one logo per slide and the
 *      slides are forced into a static stack (swiper-wrapper is display:block)
 *      with no gap, so the logo tiles sit directly on top of each other
 *      ("stuck together vertically"). The existing ≤991px override re-grids
 *      .home-logobox-grid — the outer wrapper that only holds the two swiper
 *      divs — not the slides, so it never reaches the tiles.
 *
 * Fix: shrink both side paddings so the card uses the screen width, and lay
 * the mobile logo slides out as a real 2-column grid with gaps.
 */

@media (max-width: 991.98px) {

    /* 1. Reclaim horizontal space — unstack the two 64px side paddings. */
    body.home section.home-logobox-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    body.home section.home-logobox-section .decorated-container-wrapper {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* 2. Mobile logo grid: one tile per slide, forced to a static stack. Lay
          the slides into a 2-col grid with gaps so the tiles breathe instead
          of touching. Scoped to .is-mobile so the desktop swiper is untouched. */
    body.home section.home-logobox-section .swiper.is-mobile .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    body.home section.home-logobox-section .swiper.is-mobile .swiper-slide {
        display: block !important;          /* was grid repeat(4,1fr); 1 tile */
        grid-template-columns: none !important;
        width: 100% !important;
        height: auto !important;
    }
}