/**
 * Container: 50 / 50
 *
 * Two equal-width slots. At desktop each slot spans 6 of 12 columns.
 * The 'small' size insets the pair by 1 column on each side (5+5 of inner 10 cols).
 *
 * Breakpoint behaviour:
 *   Mobile  (< 768px):   slots stack (full width)
 *   Tablet  (768–1439px): 4+4 of 8 cols
 *   Desktop (≥ 1440px):  6+6 of 12 cols  (full)
 */

/* ── Grid wrapper ── */
.container-50-50 {
  display: grid;
  gap: var(--grid-gutter);
  width: 100%;


  /* ── Slots: mobile – full width ── */
  .container__slot {
    grid-column: 1 / -1;
    min-width: 0; /* do not allow grid to grow, i.e. long words */
  }


  /* ── Slots: tablet – 4+4 of 8 ── */
  @media (min-width: 1000px) {
    grid-template-columns: repeat(8, 1fr);

    @media (min-width: 768px) {
      .container-50-50__slot-left {
        grid-column: 1 / span 4;
      }

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


  /* ── Slots: desktop full – 6+6 of 12 ── */
  @media (min-width: 1440px) {
    grid-template-columns: repeat(12, 1fr);

    .container-50-50__slot-left {
      grid-column: 1 / span 6;
    }

    .container-50-50__slot-right {
      grid-column: 7 / span 6;
    }
  }

}