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

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

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

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

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

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

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

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

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

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

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