.swiper-hero-container {
    display: flex;
}

/* Homepage's main content stack — wraps the sections rendered between the
   hero swiper and the categories grid. Desktop adds 40px gutters; mobile
   resets so children sit at the full viewport width (matching the hero
   above and the banner-style sections inside). */
.sections {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    padding: 0 40px;
    margin-top: 24px;
}

@media (max-width: 768px) {
    .sections {
        max-width: 100vw;
        width: 100%;
        padding: 0 20px; /* tighter than desktop's 40px — gives section text/buttons
                            breathing room from the viewport edge without eating
                            too much card width */
        margin-top: 24px; /* knob: vertical gap between hero and first section on mobile */
        gap: 12px;        /* knob: vertical gap BETWEEN sections */
    }
}

/* Default layout for sections inside the homepage stack. Scoped to
   .sections > section so the rule doesn't leak site-wide now that this
   stylesheet is loaded only on the homepage. */
.sections > section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
}

@media (max-width: 768px) {
    .sections > section {
        max-width: 100vw;
        gap: 12px; /* knob: vertical gap between section title and its content */
    }
}

/* Desktop only: benefit-section escapes .sections's 40px gutters via negative
   margins so it spans main's full content width — matching the top banner
   above which has no inner padding. Lives here (not in benefit-section.css)
   because the math depends on the .sections parent's specific 40px padding. */
@media (min-width: 769px) {
    .sections > section.benefit-section {
        width: calc(100% + 80px);
        margin-left: -40px;
        margin-right: -40px;
        padding: 0;
    }
}

section.banners {
    background-color: #F5F5F5;
    padding: 20px 0;
    display: flex;
    flex-direction: row;
    align-items: centrer;
    justify-content: center;
    /* Full-bleed: the section is inside <main> (capped at 1920px), but width: 100vw
       plus margin-left/right that pulls from the parent's center to the viewport's
       edge makes the grey background span the full viewport on screens of any width.
       The inner .swiper-banners-container keeps its own max-width: 1445px and stays
       centered, so the banner image position doesn't shift. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

@media (max-width: 768px) {
    section.banners {
        padding: 12px 0;
    }
}

section.banners-2 {
    flex-direction: row;
    align-items: centrer;
    justify-content: center;
    width: 100%;
    /* padding: 68px 0; */
    padding: 12px 60px;
}

@media (max-width: 768px) {
    section.banners-2 {
        padding: 0px;
        width: calc(100% + 80px);
        margin-left: -40px;
        margin-right: -40px;
    }
}

section.categories {
    display: flex;
    background: linear-gradient(90deg, #F4F4F4 -5.61%, #FFF 109.76%);
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}