:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  background: #e9e9e5;
  color: #151515;
}

* { box-sizing: border-box; }
body { margin: 0; }
img { display: block; max-width: 100%; }

.overview { max-width: 1500px; margin: auto; padding: 64px 32px 80px; }
.overview__header { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 20px 80px; margin-bottom: 58px; border-top: 8px solid; padding-top: 24px; }
.overview__eyebrow { grid-column: 1 / -1; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.overview h1 { margin: 0; max-width: 900px; font-size: clamp(52px, 7vw, 108px); line-height: .88; letter-spacing: -.065em; }
.overview__header > p:last-child { align-self: end; margin: 0; max-width: 560px; font-size: 17px; line-height: 1.55; }
.overview__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.card { min-width: 0; background: #fff; border: 1px solid #c7c7c2; }
.card a { display: block; height: 100%; padding: 14px 14px 24px; color: inherit; text-decoration: none; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border: 1px solid #d7d7d2; background: #fff; }
.card__number { display: block; margin-top: 20px; color: #777; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.card h2 { margin: 7px 0 6px; font-size: 25px; letter-spacing: -.035em; }
.card p { margin: 0; color: #5d5d58; line-height: 1.45; }
.card--dark { background: #111; color: #f5f1e8; border-color: #111; }
.card--dark p { color: #aaa69e; }
.card--blue { background: #063d63; color: #eaf8ff; border-color: #063d63; }
.card--blue p { color: #a8d0e5; }
.card--poster { border-bottom: 8px solid #ff4d2e; }
.overview__footer { margin-top: 60px; border-top: 2px solid; padding-top: 20px; max-width: 900px; line-height: 1.5; }

@media (max-width: 980px) {
  .overview__header { grid-template-columns: 1fr; }
  .overview__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .overview { padding: 36px 16px 60px; }
  .overview h1 { font-size: 52px; overflow-wrap: anywhere; }
  .overview__grid { grid-template-columns: 1fr; }
}
.card--green { background: #1e3a2e; color: #efe9d9; border-color: #1e3a2e; }
.card--green p { color: #b8c5b0; }
.card--night { background: #0b102a; color: #e8f4ff; border-color: #0b102a; }
.card--night p { color: #93a5c4; }
.card--gold { background: #1c1a17; color: #f2ead8; border-color: #1c1a17; border-bottom: 4px solid #c9a961; }
.card--gold p { color: #b3a88f; }
.card--cobalt { background: #000; color: #fff; border-color: #000; border-bottom: 4px solid #494fdf; }
.card--cobalt p { color: rgba(255,255,255,0.72); }
.card--void { background: #050505; color: #f4f5f7; border-color: #050505; border-bottom: 4px solid #7ee8bb; }
.card--void p { color: rgba(244,245,247,0.6); }
.card--drift { background: #0a0812; color: #f3f0fa; border-color: #0a0812; border-bottom: 4px solid #ff2d78; }
.card--drift p { color: rgba(243,240,250,0.62); }
.card--blob { background: #0e1420; color: #f2f6fb; border-color: #0e1420; border-bottom: 4px solid #2196f3; }
.card--blob p { color: rgba(242,246,251,0.62); }
.card--prom { background: #0b0b0b; color: #f5f5f5; border-color: #0b0b0b; border-bottom: 4px solid #df1a25; }
.card--prom p { color: rgba(245,245,245,0.62); }