/* ==========================================================================
   Grid
   ========================================================================== */

.orly-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.orly-grid > * {
  min-width: 0;
}

/* ==========================================================================
   Tablet - 768px+
   ========================================================================== */

@media (min-width: 48rem) {
  .orly-grid--2,
  .orly-grid--3,
  .orly-grid--4,
  .orly-grid--4-2x2,
  .orly-grid--5,
  .orly-grid--6-4,
  .orly-grid--6-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Desktop - 1024px+
   ========================================================================== */

@media (min-width: 64rem) {
  /* 1 block */
  .orly-grid--1 {
    grid-template-columns: 1fr;
  }

  /* 2 blocks */
  .orly-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 3 blocks */
  .orly-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 4 blocks — one row */
  .orly-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 4 blocks — 2 × 2 */
  .orly-grid--4-2x2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 5 blocks — 3 + 2 */
  .orly-grid--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 6 blocks — 4 + 2 centered */
  .orly-grid--6-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .orly-grid--6-4 > :nth-child(5) {
    grid-column: 2;
    grid-row: 2;
  }

  .orly-grid--6-4 > :nth-child(6) {
    grid-column: 3;
    grid-row: 2;
  }

  /* 6 blocks — 3 + 3 */
  .orly-grid--6-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}