@layer component.layout {
  @media (orientation: landscape) {
    .domino {
      display: grid;
      gap: 1rem;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 1fr;
      --card-min-height: 0;
    }

    .domino--3 {
      grid-template:
        "🟥 🟧" 1fr
        "🟥 🟨" 1fr /
        1fr 1fr;
    }
    .domino--4 {
      grid-template:
        "🟥 🟧 🟨" 1fr
        "🟥 🟧 🟩" 1fr /
        1fr 1fr 1fr;
    }
    .domino--5 {
      grid-template:
        "🟥 🟧 🟩" 1fr
        "🟥 🟨 🟦" 1fr /
        1fr 1fr 1fr;
    }
    .domino--6 {
      grid-template:
        "🟥 🟧 🟨 🟦" 1fr
        "🟥 🟧 🟩 🟪" 1fr /
        1fr 1fr 1fr 1fr;
    }
  }
}