.games { padding-block: 0 30px; }
.game { display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: 64px; padding-block: 56px; border-top: 1px solid #12141045; }
.game-image { position: relative; display: block; overflow: hidden; border: 4px solid var(--ink); border-radius: 28px; background: var(--white); box-shadow: 10px 10px 0 var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.game-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.game-image .game-color { position: absolute; inset: 0; height: 100%; opacity: 0; transition: transform .5s ease, opacity .3s ease; }
.game-image:focus-visible .game-color { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .game-image:hover { transform: translate(-3px, -3px) rotate(-.6deg); box-shadow: 14px 14px 0 var(--ink); }
  .game-image:hover img { transform: scale(1.03); }
  .game-image:hover .game-color { opacity: 1; }
}
.game h2 { margin: 0 0 20px; font-size: clamp(32px, 4.2vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -.055em; }
.game h2 a { text-decoration: none; }
.game-copy > p { max-width: 340px; font-size: 18px; line-height: 1.5; margin: 0 0 30px; }
.game-links { display: flex; flex-wrap: wrap; gap: 16px; }
.cta { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 26px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 16px; font-weight: 750; text-decoration: none; box-shadow: 0 4px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.cta:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.cta-play::before { content: ""; width: 12px; height: 14px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.game-copy > .game-note { margin: 20px 0 0; font-size: 13px; }
.game-dash { grid-template-columns: 1fr 1.35fr; }
.game-dash .game-image { grid-column: 2; grid-row: 1; }
.game-dash .game-copy { grid-column: 1; grid-row: 1; }
.footer { border-top: 1px solid #12141045; }
@media (max-width: 1000px) { .game { gap: 36px; } .game-copy > p { font-size: 16px; } }
@media (max-width: 760px) {
  .games { padding-bottom: 15px; }
  .game { grid-template-columns: 1fr; gap: 28px; padding-block: 32px 42px; }
  .game h2 { font-size: 38px; margin-bottom: 14px; }
  .game-copy > p { margin-bottom: 22px; }
  .game-image { border-width: 3px; border-radius: 20px; box-shadow: 7px 7px 0 var(--ink); }
  .cta { min-height: 52px; padding: 0 22px; font-size: 15px; }
  .game-dash .game-image, .game-dash .game-copy { grid-column: auto; grid-row: auto; }
}