.page-class-detail .detail-hero--class { overflow: hidden; }
.page-class-detail .class-detail-media { position: relative; width: 100%; aspect-ratio: 1.2; margin: 0; overflow: hidden; border-radius: 34px; border: 1px solid rgba(255,255,255,.14); background: #151719; box-shadow: 0 20px 46px rgba(0,0,0,.2); }
.page-class-detail .class-detail-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-class-detail .hero-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.page-class-detail .hero-chip-row span { border: 1px solid rgba(255,255,255,.3); border-radius: 99px; padding: 7px 12px; font-size: .76rem; font-weight: 700; }
.page-class-detail .upcoming-panel { margin-top: 70px; background: #fff; padding: 34px; border-radius: 24px; }
.page-class-detail .upcoming-panel > div { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 25px; padding: 17px 0; border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .page-class-detail .class-detail-media { aspect-ratio: 1.18; border-radius: 24px; }
  .page-class-detail .upcoming-panel > div { grid-template-columns: 1fr; gap: 4px; }
}