/**
 * Container: 40 / 60
 *
 * Left slot narrower (40 %) than right slot (60 %).
 * At desktop full: left = 5 cols, right = 7 cols of 12.
 * At desktop small: left = 4 cols, right = 6 cols within inner 10 cols (1 col inset each side).
 *
 * Breakpoint behaviour:
 *   Mobile  (< 768px):   slots stack (full width)
 *   Tablet  (768–1439px): left = 3 cols, right = 5 cols of 8
 *   Desktop (≥ 1440px):  left = 5, right = 7  (full)
 *                         left = 4, right = 6, inset 1 col each side  (small)
 */

/* ── Grid wrapper ── */
.container-40-60 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter, 12px);
  width: 100%;
}

@media (min-width: 768px) {
  .container-40-60 {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 1440px) {
  .container-40-60 {
    grid-template-columns: repeat(12, 1fr);
  }
}

/* ── Slots: mobile – full width ── */
.container-40-60__slot-left,
.container-40-60__slot-right {
  grid-column: 1 / -1;
}

/* ── Slots: tablet – 3+5 of 8 ── */
@media (min-width: 768px) {
  .container-40-60__slot-left {
    grid-column: 1 / span 3;
  }

  .container-40-60__slot-right {
    grid-column: 4 / span 5;
  }
}

/* ── Slots: desktop full – 5+7 of 12 ── */
@media (min-width: 1440px) {
  .container-40-60--full .container-40-60__slot-left,
  .container-40-60__slot-left {
    grid-column: 1 / span 5;
  }

  .container-40-60--full .container-40-60__slot-right,
  .container-40-60__slot-right {
    grid-column: 6 / span 7;
  }
}

/* ── Slots: desktop small – 4+6 within cols 2–11 ── */
@media (min-width: 1440px) {
  .container-40-60--small .container-40-60__slot-left {
    grid-column: 2 / span 4;
  }

  .container-40-60--small .container-40-60__slot-right {
    grid-column: 6 / span 6;
  }
}