/**
 * Container: 33 / 33 / 33
 *
 * Three equal-width slots.
 *
 * Breakpoint behaviour:
 *   Mobile  (< 768px):   slots stack (full width)
 *   Tablet  (768–1199px): behaves like the 50/50 container — two equal
 *                         columns; slot 3 falls into row 2, left column
 *                         (default grid auto-flow, no explicit placement).
 *   Desktop (≥ 1200px):  three equal columns
 */

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

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

@media (min-width: 1200px) {
  .container-33-33-33 {
    grid-template-columns: repeat(3, 1fr);
  }
}