@charset "UTF-8";

.hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(270px,.9fr);gap:13px}
.spotlight{
  min-height:267px;
  border-radius:18px;
  background:radial-gradient(ellipse at 95% 10%,#425cbb 0%,transparent 47%),linear-gradient(130deg,#101a35,#192e5c);
  padding:24px 26px;
  color:#fff;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.spotlight:before{content:"";position:absolute;width:250px;height:250px;border:1px solid #ffffff14;border-radius:50%;right:-60px;bottom:-125px;box-shadow:0 0 0 42px #ffffff07,0 0 0 88px #ffffff05}
.spotlight .hero-caption{display:flex;align-items:center;gap:7px;font-size:11px;color:#a8bdf5;font-weight:800;letter-spacing:.7px}
.live-dot{width:7px;height:7px;background:#6aebd4;border-radius:50%;box-shadow:0 0 0 4px #6aebd41c}
.spotlight h1{position:relative;font-size:27px;line-height:1.27;letter-spacing:-1.4px;margin:16px 0 8px}
.spotlight p{font-size:12px;color:#bcc9e5;line-height:1.7;margin:0}
.hero-footer{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:19px}
.hero-pills{display:flex;gap:6px;flex-wrap:wrap}
.hero-pills span{background:#ffffff13;border:1px solid #ffffff24;padding:7px 10px;border-radius:7px;font-size:11px;color:#dce6ff}
.hero-arrow{width:35px;height:35px;border-radius:50%;background:#fff;color:#27365e;display:grid;place-items:center;font-size:19px}
.game-stack{display:grid;gap:12px}
.game{border:1px solid #e8edf5;border-radius:16px;background:#fff;padding:16px 17px;box-shadow:var(--shadow);min-width:0}
.game-top,.game-score{display:flex;align-items:center;justify-content:space-between}
.game-top{font-size:11px;color:#8c98ab;font-weight:800}
.live{color:#f05269;background:#fff0f3;padding:4px 7px;border-radius:6px;font-size:10px}
.upcoming{color:#4d73d8;background:#eff3ff;padding:4px 7px;border-radius:6px;font-size:10px}
.game-score{margin:10px 0 7px;gap:7px}.team{display:flex;align-items:center;gap:6px;font-weight:900;font-size:13px;white-space:nowrap}
.team-icon{width:24px;height:24px;border-radius:8px;background:#f0f4fb;display:grid;place-items:center;font-size:16px}
.score{font-size:23px;font-weight:900;letter-spacing:1px;white-space:nowrap}
.game-bottom{color:#a0aabe;font-size:10px;display:flex;justify-content:space-between}
.score-time{color:#4872f2;font-weight:800}

@media (max-width: 1199px) {
  .hero-grid{grid-template-columns:1fr}
}