/* Approved photographic card. Decoration never controls live event data. */
.next-card { position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:1.15fr 1fr; align-items:stretch; gap:20px; min-height:374px; background:#192f46; }
.next-arena-photo { position:absolute; z-index:-3; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%; filter:grayscale(1); opacity:.46; }
.next-card::before { content:""; position:absolute; z-index:-2; inset:0; background:linear-gradient(180deg,#12293c33 0%,#162c4059 28%,#192f46 76%); }
.next-venue-mark { position:absolute; top:28px; left:28px; margin:0; color:#d3e5eb; font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.next-event-copy { align-self:end; padding-top:100px; min-width:0; }
.next-card-side { display:flex; flex-direction:column; margin-top:-28px; min-width:0; }
.next-matchup { display:flex; flex:1; justify-content:center; align-items:center; gap:24px; padding:12px 0 16px; }
.next-kit { width:calc((100% - 24px)/2); max-width:140.25px; flex:none; margin:0; text-align:center; }
.next-kit-cutout { position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; }
.next-kit-cutout img { position:absolute; top:0; left:0; width:200%; max-width:none; height:auto; }
.next-kit-away .next-kit-cutout { clip-path:inset(0 0 0 1.5%); }
.next-kit-away img { left:-100%; }
.next-kit figcaption { position:relative; margin-top:-6px; color:#d9e9ed; font-size:10px; letter-spacing:.18em; line-height:1.4; }
.next-card .countdown { padding-top:8px; }
.next-card .countdown span { font-size:clamp(32px,4.5vw,58px); overflow-wrap:anywhere; }
@media (min-width:801px) and (max-width:1000px) {
  .next-card { grid-template-columns:1fr 1fr; padding:22px; gap:14px; }
  .next-card-side { margin-top:-22px; }
  .next-matchup { gap:14px; }
  .next-kit { width:calc((100% - 14px)/2); }
  .next-card .countdown span { font-size:36px; }
}
@media (max-width:600px) {
  .next-card { grid-template-columns:1fr; gap:20px; padding:23px; }
  .next-venue-mark { top:23px; left:23px; font-size:9px; }
  .next-card-side { display:contents; }
  .next-matchup { grid-column:1; grid-row:1; width:100%; max-width:295px; justify-self:center; gap:22px; padding:34px 0 0; }
  .next-kit { width:calc((100% - 44px)/2); }
  .next-event-copy { grid-column:1; grid-row:2; padding:0; }
  .next-card .countdown { grid-column:1; grid-row:3; text-align:left; padding:0; }
  .next-card h3 { font-size:33px; }
  .next-card .countdown span { font-size:43px; }
  .next-card .event-details { font-size:13px; }
}