/* Preview carousel. Keep the homepage hero at its original height. */
#app .home-main .home-hero {
  height: 228px;
  min-height: 0;
  isolation: isolate;
  background: #0b1219;
}
#app .home-main .home-hero::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  mask-image: none;
  -webkit-mask-image: none;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 12, 21, .45), rgba(8, 12, 21, .08) 48%, rgba(8, 12, 21, .28)), url('./assets/og-club-hero-bold.png') right 12%/140% auto no-repeat;
  filter: blur(8px) brightness(.94) saturate(1.2);
  opacity: var(--hero-image-opacity, .45);
}
#app .home-main .home-hero::after { display: none; }
#app .home-main .hero-cards {
  display: flex;
  flex: none;
  width: min(45%, 620px);
  height: 198px;
  min-width: 0;
  margin: 0 clamp(30px, 5vw, 88px) 0 0;
  padding: 0;
  gap: 9px;
}
#app .home-main .hero-card {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .27);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .28);
  transition: flex-grow .7s cubic-bezier(.22, 1, .36, 1), border-color .2s;
  transform: none;
}
#app .home-main .hero-card.is-featured {
  flex-grow: 2.35;
  border-color: rgba(255, 255, 255, .68);
}
#app .home-main .hero-card:hover,
#app .home-main .hero-card:focus-visible { transform: none; border-color: #fff; }
#app .home-main .hero-card img {
  object-position: center 30%;
  mix-blend-mode: normal;
  opacity: 1;
  filter: brightness(1.08) saturate(1.12) contrast(.96);
  transition: filter .35s ease;
}
#app .home-main .hero-card:hover img,
#app .home-main .hero-card:focus-visible img { filter: brightness(1.16) saturate(1.18) contrast(1.01); }
#app .home-main .hero-card:nth-child(1) { background: #74309b; }
#app .home-main .hero-card:nth-child(2) { background: #0877b8; }
#app .home-main .hero-card:nth-child(3) { background: #ae303b; }
#app .home-main .hero-card:nth-child(1)::after {
  background: linear-gradient(145deg, rgba(255, 255, 255, .2), transparent 34%), linear-gradient(180deg, transparent 20%, rgba(141, 25, 191, .42) 61%, #d35be1 100%);
}
#app .home-main .hero-card:nth-child(2)::after {
  background: linear-gradient(145deg, rgba(255, 255, 255, .24), transparent 34%), linear-gradient(180deg, transparent 20%, rgba(22, 135, 207, .42) 60%, #06bdf0 100%);
}
#app .home-main .hero-card:nth-child(3)::after {
  background: linear-gradient(145deg, rgba(255, 255, 255, .18), transparent 34%), linear-gradient(180deg, transparent 20%, rgba(181, 35, 53, .4) 60%, #eb6871 100%);
}
#app .home-main .hero-card strong { font-size: clamp(.95rem, 1.3vw, 1.35rem); text-shadow: 0 2px 5px rgba(0, 0, 0, .7), 0 0 10px rgba(0, 0, 0, .35); }
#app .home-main .hero-card.is-featured strong { font-size: clamp(1.35rem, 1.8vw, 1.9rem); }
@media (min-width: 1081px) {
  #app.has-utility-panel .home-main .hero-cards { width: 43%; height: 182px; margin-right: 22px; }
  #app.has-utility-panel .home-main .hero-card.is-featured { flex-grow: 1.9; }
}
@media (max-width: 1080px) {
  #app .home-main .home-hero { height: 225px; }
  #app .home-main .hero-cards { width: 44%; height: 190px; margin-right: 25px; }
}
@media (max-width: 700px) {
  #app .home-main .home-hero { height: auto; min-height: 0; }
  #app .home-main .home-hero::before { background-size: cover; background-position: 56% 25%; }
  #app .home-main .hero-cards { width: 100%; height: 185px; margin-right: 0; padding: 0 12px; gap: 7px; }
  #app .home-main .hero-card.is-featured { flex-grow: 1.9; }
  #app .home-main .hero-card strong { left: 8px; font-size: .96rem; }
  #app .home-main .hero-card.is-featured strong { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  #app .home-main .hero-card,
  #app .home-main .hero-card img { transition: none; }
}