/* =========================================================
   GRID SYSTEM
   Desktop  : 5 columns · 20px gap · 1022px max-width · no margin
   Tablet   : 3 columns · 20px gap · 20px side margins  (≤ 900px)
   Mobile   : 2 columns · 20px gap · 10px side margins  (≤ 480px)
   ========================================================= */

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1022px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* --- Span classes ----------------------------------------
   Use these on direct children of .grid to control width.

   Examples:
     Full 5 columns:       <div class="col-5">
     Middle 3 columns:     <div class="col-3 col-start-2">
     Left 2 | Right 3:     <div class="col-2"> + <div class="col-3">
     Left 3 | Right 2:     <div class="col-3"> + <div class="col-2">
   --------------------------------------------------------- */

.col-1 { grid-column-end: span 1; background: #e8eeff; }
.col-2 { grid-column-end: span 2; background: #e8eeff; }
.col-3 { grid-column-end: span 3; background: #e8eeff; }
.col-4 { grid-column-end: span 4; background: #e8eeff; }
.col-5 { grid-column-end: span 5; background: #e8eeff; }

/* --- Start position classes ------------------------------
   Combine with a span class to place a child at a specific
   column, e.g. .col-3.col-start-2 centres 3 cols in the grid.
   --------------------------------------------------------- */

.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }

/* --- Tablet (≤ 900px) ------------------------------------
   3 columns. Anything wider than 3 collapses to full width.
   col-start-4 and col-start-5 are reset (out of range).
   col-3/4/5 with col-start-2/3 reset to 1 so they stay
   full-width rather than overflowing the right edge.
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 20px;
  }

  .col-1 { grid-column-end: span 1; }
  .col-2 { grid-column-end: span 2; }
  .col-3,
  .col-4,
  .col-5 { grid-column-end: span 3; }

  .col-start-4,
  .col-start-5 { grid-column-start: auto; }

  /* col-3/4/5 fill all 3 tablet columns; any col-start offset would overflow */
  .col-3.col-start-2, .col-3.col-start-3,
  .col-4.col-start-2, .col-4.col-start-3,
  .col-5.col-start-2, .col-5.col-start-3 { grid-column-start: 1; }
}

/* --- Mobile (≤ 480px) ------------------------------------
   2 columns. Anything wider than 2 collapses to full width.
   col-start-2 through col-start-5 are reset (out of range).
   --------------------------------------------------------- */

@media (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 10px;
  }

  .col-1 { grid-column-end: span 1; }
  .col-2,
  .col-3,
  .col-4,
  .col-5 { grid-column-end: span 2; }

  .col-start-2,
  .col-start-3,
  .col-start-4,
  .col-start-5 { grid-column-start: auto; }
}