.studio-hero {
  min-height: min(800px, calc(100svh - var(--eg-header-height)));
  background:
    radial-gradient(circle at 76% 46%, rgba(73, 153, 197, .22), transparent 20%),
    radial-gradient(circle at 79% 46%, rgba(216, 182, 114, .12), transparent 38%),
    linear-gradient(120deg, #040a13, #091a2b 63%, #08111c);
}
.hero-shade {
  background:
    linear-gradient(90deg, rgba(2, 8, 17, .84) 0%, rgba(2, 8, 17, .58) 42%, rgba(2, 8, 17, .08) 76%),
    linear-gradient(0deg, var(--eg-bg) 0%, transparent 28%);
}
.showcase-card-explore {
  position: relative;
  display: grid;
  min-height: 28rem;
  align-items: end;
  background:
    radial-gradient(circle at 72% 24%, rgba(135, 221, 251, .2), transparent 10%),
    radial-gradient(circle at 75% 28%, rgba(216, 182, 114, .12), transparent 33%),
    linear-gradient(145deg, #0b2033, #07111e 72%);
}
.showcase-card-explore::before {
  position: absolute;
  top: 10%;
  right: 9%;
  width: 42%;
  aspect-ratio: 1;
  border: 1px solid rgba(216, 182, 114, .46);
  border-radius: 50%;
  box-shadow: 0 0 0 1.3rem rgba(135, 221, 251, .035), 0 0 3rem rgba(135, 221, 251, .16);
  content: "";
}
.showcase-card-explore .showcase-content { position: relative; }

@media (max-width: 760px) {
  .studio-hero { min-height: 38rem; }
  .hero-shade { background: linear-gradient(180deg, rgba(2, 8, 17, .34), rgba(2, 8, 17, .88) 58%, var(--eg-bg)); }
  .hero-content { position: relative; padding-top: 17rem; }
  .showcase-card-explore { min-height: 22rem; }
}