/* ─────────────────────────────────────────────────────────────
   Epitech Africa — responsive baseline overrides
   Loaded AFTER epitech-overrides.css and the WP theme.
   Goal: minimum-viable responsive defaults so every page renders
   correctly on phones (320-480 px) and tablets (481-1023 px)
   without touching the WP theme or the Astro components.

   Rules:
   - Additive only. Desktop layout (>= 1024 px) is untouched.
   - No selector targets a single instance — only structural
     classes used across the site (.wp-block-*, .hero-*, .entry-content).
   - Editor "Apparence" knobs and per-section style overrides are
     preserved (we don't !important-strip inline styles, only
     theme-level hardcoded widths).
   ───────────────────────────────────────────────────────────── */


/* ── 1. Global guards: never let any element trigger horizontal scroll ─
   The site uses .alignfull with `width: 100vw; margin-left: calc(50% - 50vw)`
   to break out of constrained containers. On viewports where the scrollbar
   takes width (most desktops, some tablets), 100vw exceeds the document
   width by ~15px → horizontal scrollbar at every page bottom.
   `overflow-x: clip` absorbs it without creating a scrolling context
   (position: sticky on the header still works). */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}


/* ── 2. Images: default to fluid ─────────────────────────────────────
   The WP theme already sets `max-width: 100%` on .wp-block-image img,
   but bare <img> tags in custom Astro blocks (Footer logo, JPO card,
   etc.) skip that rule. Apply globally inside the rendered shell. */
.wp-site-blocks img,
.entry-content img,
footer img {
  max-width: 100%;
  height: auto;
}


/* ── 3. Long headings never break the layout ─────────────────────────
   Anton uppercase + long French labels ("Programme Grande École", etc.)
   can overflow narrow viewports. `overflow-wrap: anywhere` lets the
   browser break inside a word as a last resort while preserving
   normal word breaks first. */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.wp-block-heading,
.hero-home_punchline,
.hero-home_title,
.hero-custom__title {
  overflow-wrap: anywhere;
  word-break: normal;
}


/* ── 4. Hero home — JPO booking card ─────────────────────────────────
   The theme hardcodes `.hero-home_card { width: 386px; }` with no mobile
   breakpoint. On phones (<=480 px) the card overflows; on portrait
   tablets (768-1023 px) the card is below the content (theme stacks)
   but stays narrow + centered, leaving large empty bands. Make it
   stretch on tablet and full-width on phone. */
@media (max-width: 1023px) {
  .hero-home_card {
    width: 100% !important;
    max-width: 560px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 480px) {
  .hero-home_card {
    max-width: 100%;
  }
  /* The campus list inside uses `is-not-stacked-on-mobile` (intentional
     on tablet+), but at 360-480 px the two-column layout makes link
     labels ("Programme Grande École") wrap to 3 lines per cell. Stack. */
  .hero-home_card .wp-block-columns.is-not-stacked-on-mobile {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .hero-home_card .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
    width: 100% !important;
  }
}


/* ── 5. Page hero (`is-style-hero-v2`) — image safety on tablet ──────
   Theme stacks at <=1023 px (column-reverse) but the figure sits
   OUTSIDE the inner `.has-global-padding` container, so without
   horizontal padding here the image ends up full-bleed and looks
   crammed against the viewport edges (epitech.eu keeps it inset by
   --spacing--l, ~32-40px each side, so the photo breathes). Match
   that by giving the figure the same horizontal padding as the rest
   of the hero content. */
@media (max-width: 1023px) {
  .wp-block-group.is-style-hero-v2 > .wp-block-image:last-child {
    /* Override the desktop `flex: 1 1 0px` (style.css :is-style-hero-v2 > *)
       which collapses the figure to 0 + its 48px top/bottom padding (= 96px)
       when the layout flips to column-reverse on mobile, then clips the
       image via overflow:hidden. flex: 0 0 auto sizes the figure to its
       content so the photo renders at its natural aspect ratio. */
    flex: 0 0 auto !important;
    max-width: 100%;
    padding-left: var(--wp--preset--spacing--l);
    padding-right: var(--wp--preset--spacing--l);
    box-sizing: border-box;
    /* No overflow:hidden — that was the trigger that hid the image. */
  }
  .wp-block-group.is-style-hero-v2 > .wp-block-image:last-child img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    display: block;
  }
}


/* ── 6. Stats block — KPI grid wraps before becoming illegible ───────
   StatsBlock.astro generates `grid-template-columns: repeat(N, 1fr)`
   inline with N up to 4. At 1024 px, 4 columns is fine; at 768 px it
   crushes labels ("Étudiants accompagnés depuis l'ouverture"). Wrap to
   2 columns on tablet, 1 on phone. The inline-style attribute selector
   targets only the StatsBlock pattern. */
@media (max-width: 900px) {
  .wp-block-group.is-style-section [style*="grid-template-columns:repeat(4"],
  .wp-block-group.is-style-section [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .wp-block-group.is-style-section [style*="grid-template-columns:repeat(2"],
  .wp-block-group.is-style-section [style*="grid-template-columns:repeat(3"],
  .wp-block-group.is-style-section [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}


/* ── 7. Stats block — chart variant labels shrink on phone ───────────
   The chart variant uses a fixed 180 px label column + flex bar. On a
   375 px screen, the label takes half the width and the bar becomes
   too short to read. Reduce the label column. */
@media (max-width: 600px) {
  .wp-block-group.is-style-section > div[style*="max-width:800px"] > div[style*="align-items:center"] > div:first-child {
    width: 110px !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }
}


/* ── 8. Footer — 5 columns don't fit on tablet/phone ─────────────────
   wp-inline-styles.css stacks columns at <=781 px via
   `.wp-block-column { flex-basis: 100% !important }`, BUT inline style
   `flex-basis:30%` on the About column wins over the stylesheet. At
   782-1023 px the columns stay nowrap with 5 cells in a row → labels
   wrap awkwardly and CTAs get clipped.
   Strategy:
   - Tablet (782-1023 px): allow wrap, give About full row + 4 nav cols
     in row 2 wrapping to 2x2.
   - Phone (<=781 px): stack everything to single column. */
@media (min-width: 782px) and (max-width: 1023px) {
  footer .wp-block-columns {
    flex-wrap: wrap !important;
    gap: 24px;
  }
  footer .wp-block-columns > .wp-block-column[style*="flex-basis:30%"],
  footer .wp-block-columns > .wp-block-column[style*="flex-basis: 30%"] {
    flex-basis: 100% !important;
  }
  footer .wp-block-columns > .wp-block-column:not([style*="flex-basis:30%"]):not([style*="flex-basis: 30%"]) {
    flex-basis: calc(50% - 12px) !important;
    flex-grow: 0;
  }
}
@media (max-width: 781px) {
  footer .wp-block-columns {
    flex-wrap: wrap !important;
  }
  footer .wp-block-columns > .wp-block-column[style*="flex-basis:30%"],
  footer .wp-block-columns > .wp-block-column[style*="flex-basis: 30%"] {
    flex-basis: 100% !important;
  }
}


/* ── 9. Section padding — scales down progressively ──────────────────
   `.has-global-padding` uses --wp--style--root--padding-* tokens
   (typically 5vw or 6rem). On phones it leaves only a thin column for
   content; on portrait tablets the 5vw still produces ~50 px which is
   fine, but `.is-style-section` adds an extra clamp(2rem, 5vw, 6rem)
   on top so the inner text becomes a narrow strip. */
@media (max-width: 1023px) {
  .entry-content .is-style-section {
    padding-left: clamp(20px, 4vw, 40px) !important;
    padding-right: clamp(20px, 4vw, 40px) !important;
  }
}
@media (max-width: 600px) {
  .wp-site-blocks .has-global-padding {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
  .entry-content .is-style-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* ── 10. Vertical rhythm — tighter section spacing on tablet/phone ───
   Layout.astro injects `margin-top: clamp(4rem, 6vw, 8rem)` between
   top-level blocks. On a 600 px-tall phone screen, 4rem = ~64 px is
   eaten on every section. Reduce progressively. */
@media (max-width: 1023px) {
  main > .entry-content > * + *,
  main > .entry-content > .hero-home + * {
    margin-top: clamp(3rem, 5vw, 5rem) !important;
  }
}
@media (max-width: 600px) {
  main > .entry-content > * + *,
  main > .entry-content > .hero-home + * {
    margin-top: clamp(2rem, 6vw, 3.5rem) !important;
  }
}


/* ── 11. Hero custom block — keep title from overflowing ─────────────
   .hero-custom__title has `max-width: 12ch`. With a long Anton word
   that's still > viewport width on phones; on tablets the 12ch can
   leave the title unnecessarily narrow vs the desc. */
@media (max-width: 1023px) {
  .hero-custom__title {
    max-width: 18ch !important;
  }
  .hero-custom__desc {
    max-width: 100% !important;
  }
}
@media (max-width: 600px) {
  .hero-custom {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .hero-custom__title {
    max-width: 100% !important;
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }
  .hero-custom__ctas {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-custom__cta {
    justify-content: center;
  }
}


/* ── 12. Hero home punchline — fit on phone width ───────────────────
   The clamp() inline in Layout.astro produces 3.5rem at small widths.
   With 3-letter words (Tech / Together / Tomorrow) this is fine, but
   the third word "Tomorrow" is 8 chars and overflows < 360 px. */
@media (max-width: 480px) {
  .hero-home_punchline {
    font-size: clamp(2.5rem, 11vw, 4rem) !important;
  }
}


/* ── 13. Buttons inside hero — full-width and stack on phone ────────
   wp-block-buttons defaults to flex-row. On a 320 px screen with a
   long label ("PRENDRE RDV POUR UNE JPO") + a secondary CTA, the row
   overflows or the labels wrap unevenly. */
@media (max-width: 480px) {
  .hero-home_card .wp-block-buttons,
  .hero-home_card .wp-block-buttons.is-layout-flex,
  .hero-custom__ctas {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-home_card .wp-block-button,
  .hero-home_card .wp-block-button .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}


/* ── 14. Forms — fields are full-width on phone ─────────────────────
   ContactBlock and PrendreRDV use bare <input> / <select> nodes that
   fall back to user-agent default widths (~150 px). Phone users want
   them edge-to-edge. */
@media (max-width: 600px) {
  form input,
  form textarea,
  form select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}


/* ── 15. Cards grid — already auto-fit-minmax in epitech-overrides ──
   .is-style-cards-2 uses minmax(340px, 1fr); at 360 px, single column
   shrinks to 100 % and reveals: cards have padding 24 px from
   epitech-overrides.css. Plus the parent has 20 px from rule #9 →
   total 44 px / side. Reduce inner padding. */
@media (max-width: 480px) {
  .is-style-cards-3 > .wp-block-group,
  .is-style-cards-4 > .wp-block-group,
  .is-style-cards-2 > .wp-block-group {
    padding: 18px !important;
  }
}


/* ── 16. Heading sizes scale on tablet/phone ───────────────────────
   epitech-overrides has `clamp(2rem, 4vw, 3rem)` for centered h2
   inside .is-style-section. Tighten the upper bound on tablet and
   the lower bound on phone. */
@media (max-width: 1023px) {
  .wp-block-group.is-style-section h2.has-text-align-center {
    font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
    line-height: 1.18 !important;
  }
}
@media (max-width: 480px) {
  .wp-block-group.is-style-section h2.has-text-align-center {
    font-size: clamp(1.4rem, 7vw, 2rem) !important;
    line-height: 1.15 !important;
  }
  .entry-content h2 {
    font-size: 1.45rem !important;
  }
  .entry-content h3 {
    font-size: 1.05rem !important;
  }
}


/* ── 17. Tables — already responsive in epitech-overrides ───────────
   No-op here, but reaffirm caption sizing on tiny screens. */
@media (max-width: 480px) {
  .edms-table__caption {
    font-size: 0.78rem !important;
    padding: 0 8px;
  }
}


/* ── 18. Site header — sticky CTA fits at 320 px ────────────────────
   The custom .edms-landing-header (server.ts) has padding 18px 32px;
   shrink horizontally so the "Contacter nous →" CTA isn't clipped. */
@media (max-width: 480px) {
  .edms-landing-header {
    padding: 14px 16px !important;
  }
  .edms-landing-header > div:last-child a {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
}


/* ── 19. Megamenu mobile — campus column scrolls cleanly ─────────────
   Layout.astro pins .site-header-megaMenu to `inset: 0; overflow-y: auto`
   when active. Add a bottom safe-area inset so iPhone home indicator
   doesn't cover the last menu item. */
.site-header-megaMenu.is-active,
.site-header-megaMenu.active {
  padding-bottom: env(safe-area-inset-bottom);
}


/* ── 19bis. Megamenu mobile — submenu visual parity with epitech.eu ──
   Default Layout.astro renders the burger as a flat list with all
   sub-menus expanded simultaneously (rules at lines 77-80 + 105-113).
   epitech.eu uses a panel-stack: clicking a top-level card hides the
   siblings, turns the parent card into a back-breadcrumb, and shows
   children as a fresh 2-column card grid identical to L0. We mirror
   that behavior here using the existing .sub-menu-open class that the
   theme JS toggles on the LI. Scoped strictly to <=1023px. */
@media (max-width: 1023px) {
  /* Override Layout.astro lines 77-80: do NOT auto-show all sub-menus.
     Only show a sub-menu when its direct parent <li> has .sub-menu-open.
     Mobile burger UL = .megaMenu-menu (rendered by edms/server.ts:567). */
  body.site-header-megaMenu__open .site-header-megaMenu .sub-menu {
    display: none !important;
  }
  body.site-header-megaMenu__open .site-header-megaMenu li.sub-menu-open > .sub-menu {
    display: block !important;
  }

  /* When any top-level <li> is open, hide its siblings (panel-stack effect). */
  body.site-header-megaMenu__open .site-header-megaMenu .site-header-megaMenu-menu .megaMenu-menu:has(> li.sub-menu-open) > li:not(.sub-menu-open) {
    display: none !important;
  }
  /* The open L0 <li> takes the full panel width (theme defaults it to 50% for the L0 card grid). */
  body.site-header-megaMenu__open .site-header-megaMenu .site-header-megaMenu-menu .megaMenu-menu > li.sub-menu-open {
    width: 100% !important;
    float: none !important;
    display: block !important;
    height: auto !important;
    border: none !important;
  }
  /* When a sub-menu is open, hide the burger's side panel (CTAs + FR/EN + campus list)
     and the empty .site-header-breadcrumb spacer div the theme inserts above the nav.
     Matches epitech.eu's mobile sub-menu: only breadcrumb + list are visible. */
  body.site-header-megaMenu__open .site-header-megaMenu:has(.megaMenu-menu > li.sub-menu-open) .site-header-megaMenu-side,
  body.site-header-megaMenu__open .site-header-megaMenu:has(.megaMenu-menu > li.sub-menu-open) .site-header-megaMenu-campus,
  body.site-header-megaMenu__open .site-header-megaMenu:has(.megaMenu-menu > li.sub-menu-open) .site-header-breadcrumb,
  body.site-header-megaMenu__open .site-header-megaMenu:has(.megaMenu-menu > li.sub-menu-open) .site-header-megaMenu-right {
    display: none !important;
  }
  /* The burger itself is flex column-reverse (theme), which anchors short content
     at the bottom. When sub-menu is open we want the breadcrumb pinned at top:
     switch to plain column so the inner panel flows top-down.
     Also tighten the top padding (theme uses 104px to clear the desktop top bar). */
  body.site-header-megaMenu__open .site-header-megaMenu:has(.megaMenu-menu > li.sub-menu-open) {
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: 56px !important;
    padding-bottom: 16px !important;
  }
  /* Header logo + burger/close icon vertical alignment.
     The legacy WP theme ships `.burger { margin: -5px 0 0; }` to compensate
     for some desktop layout quirk, but on mobile that pulls the burger 3.5px
     above the logo's center (logo lives in flex-centered .site-header-main-container).
     Earlier attempts piled another -5px override on top, making it worse.
     Proper fix: zero out the burger's margin and turn the toggle wrapper into
     a flex centering box. The burger and its X-state both inherit from the
     same element, so this aligns the close icon too without extra rules. */
  .site-header-main {
    align-items: center !important;
  }
  .site-header-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  .site-header-toggle .burger,
  .site-header-toggle .js-header-megaMenu-toggle {
    margin: 0 !important;
  }

  /* The open <li>'s direct <a> becomes the breadcrumb (back-arrow + title in primary).
     Compact size matching epitech.eu reference (font 14px, tight padding). */
  body.site-header-megaMenu__open .site-header-megaMenu .site-header-megaMenu-menu .megaMenu-menu > li.sub-menu-open > a {
    border: none !important;
    height: auto !important;
    width: 100% !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 24px !important;
    margin: 0 !important;
    color: var(--wp--preset--color--primary, #013AFB) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 24px !important;
    background: transparent !important;
    text-decoration: none !important;
    min-height: 24px !important;
  }
  body.site-header-megaMenu__open .site-header-megaMenu .site-header-megaMenu-menu .megaMenu-menu > li.sub-menu-open > a::after {
    display: none !important;
    content: none !important;
  }
  body.site-header-megaMenu__open .site-header-megaMenu .site-header-megaMenu-menu .megaMenu-menu > li.sub-menu-open > a::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 6px;
    background-color: var(--wp--preset--color--primary, #013AFB);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15 18l-6-6 6-6' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15 18l-6-6 6-6' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
    flex-shrink: 0;
  }

  /* Navigation.astro wraps real children behind a duplicate parent <li> +
     <a> at L1 (lines 47-50) for desktop megamenu column headers. Hide that
     duplicate on mobile since the breadcrumb above already shows the title. */
  body.site-header-megaMenu__open .site-header-megaMenu .site-header-megaMenu-menu .megaMenu-menu > li.sub-menu-open > .sub-menu > li.menu-item-has-children > a {
    display: none !important;
  }
  body.site-header-megaMenu__open .site-header-megaMenu .site-header-megaMenu-menu .megaMenu-menu > li.sub-menu-open > .sub-menu {
    padding: 28px 24px 16px !important;
    margin: 0 !important;
    list-style: none !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.site-header-megaMenu__open .site-header-megaMenu .site-header-megaMenu-menu .megaMenu-menu > li.sub-menu-open > .sub-menu > li > .sub-menu {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.site-header-megaMenu__open .site-header-megaMenu .site-header-megaMenu-menu .megaMenu-menu > li.sub-menu-open > .sub-menu > li {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    float: none !important;
  }

  /* Deepest level (real link list): vertical list with thin blue right-chevron
     to the left of each label — matches epitech.eu L2 sub-menu visual. */
  body.site-header-megaMenu__open .site-header-megaMenu .site-header-megaMenu-menu .megaMenu-menu > li.sub-menu-open > .sub-menu > li > .sub-menu {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  body.site-header-megaMenu__open .site-header-megaMenu .site-header-megaMenu-menu .megaMenu-menu > li.sub-menu-open > .sub-menu > li > .sub-menu > li {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    float: none !important;
    flex: none !important;
  }
  body.site-header-megaMenu__open .site-header-megaMenu .site-header-megaMenu-menu .megaMenu-menu > li.sub-menu-open > .sub-menu > li > .sub-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: none !important;
    background: transparent !important;
    color: #0F172A !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    text-decoration: none !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  body.site-header-megaMenu__open .site-header-megaMenu .site-header-megaMenu-menu .megaMenu-menu > li.sub-menu-open > .sub-menu > li > .sub-menu > li > a::before {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-color: var(--wp--preset--color--primary, #013AFB) !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 18l6-6-6-6' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain !important;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 18l6-6-6-6' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain !important;
    flex-shrink: 0 !important;
    border: none !important;
    background-image: none !important;
  }
  body.site-header-megaMenu__open .site-header-megaMenu .site-header-megaMenu-menu .megaMenu-menu > li.sub-menu-open > .sub-menu > li > .sub-menu > li > a::after {
    content: none !important;
    display: none !important;
  }
  body.site-header-megaMenu__open .site-header-megaMenu .site-header-megaMenu-menu .megaMenu-menu > li.sub-menu-open > .sub-menu > li > .sub-menu > li > a span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}


/* ── 20. Two-column block on tablet — tighten gap ───────────────────
   wp-block-columns default gap is fine on desktop but at 768-1023 px
   the image + text feel cramped. Bump min spacing slightly. */
@media (min-width: 600px) and (max-width: 1023px) {
  .wp-block-group.alignfull.is-style-section .wp-block-columns {
    gap: 24px;
  }
}