/**
 * Container: 25 / 25 / 25 / 25
 *
 * Four equal-width slots. At desktop each spans 3 of 12 columns.
 *
 * Breakpoint behaviour:
 *   Mobile  (< 768px):   slots stack (full width)
 *   Tablet  (768–1439px): 2×2 grid — each slot spans 4 of 8 cols (2 per row)
 *   Desktop (≥ 1440px):  3+3+3+3 of 12 (all four in one row)
 */

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

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

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

/* ── Slots: mobile – full width ── */
.container-25-25-25-25__slot-1,
.container-25-25-25-25__slot-2,
.container-25-25-25-25__slot-3,
.container-25-25-25-25__slot-4 {
  display: grid;
  grid-column: 1 / -1;
}

/* ── Slots: tablet – 2×2 (each slot = 4 of 8) ── */
@media (min-width: 768px) {
  .container-25-25-25-25__slot-1,
  .container-25-25-25-25__slot-2,
  .container-25-25-25-25__slot-3,
  .container-25-25-25-25__slot-4 {
    grid-column: span 4;
  }
}

/* ── Slots: desktop – 3+3+3+3 of 12 ── */
@media (min-width: 1440px) {
  .container-25-25-25-25__slot-1 {
    grid-column: 1 / span 3;
  }

  .container-25-25-25-25__slot-2 {
    grid-column: 4 / span 3;
  }

  .container-25-25-25-25__slot-3 {
    grid-column: 7 / span 3;
  }

  .container-25-25-25-25__slot-4 {
    grid-column: 10 / span 3;
  }
}