/* Sectors — 2:3 zigzag of large page tiles. Equal row height from the wide tile at 2:1 (Figma 733×390). */

.sectors {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  grid-auto-rows: calc(100cqi * 3 / 5 * 1 / 2);

  > :nth-child(4n + 1),
  > :nth-child(4n + 4) {
    grid-column: span 2;
  }

  > :nth-child(4n + 2),
  > :nth-child(4n + 3) {
    grid-column: span 3;
  }
}

@media (max-width: 699px) {
  .sectors {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;

    > :nth-child(n) {
      grid-column: auto;
    }

    > .tile {
      aspect-ratio: 2 / 1;
    }
  }
}