/* Scoped homepage v2 adjustments that are not in the checked-in Tailwind bundle. */
.vp-home-hero-artwork {
  isolation: isolate;
  max-width: 36rem;
  position: relative;
  width: 100%;
}

.vp-home-hero-artwork::before {
  background:
    radial-gradient(ellipse at 62% 50%, rgba(79, 70, 229, 0.12), rgba(79, 70, 229, 0) 62%),
    radial-gradient(ellipse at 36% 58%, rgba(255, 88, 118, 0.08), rgba(255, 88, 118, 0) 58%);
  border-radius: 999px;
  content: "";
  filter: blur(26px);
  inset: 9% 7% 7%;
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.vp-home-hero-artwork::after {
  background:
    linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.72) 1.5%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0) 94%, rgba(255, 255, 255, 0.72) 98.5%, #fff 100%),
    linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.42) 2%, rgba(255, 255, 255, 0) 7%, rgba(255, 255, 255, 0) 93%, rgba(255, 255, 255, 0.42) 98%, #fff 100%);
  content: "";
  inset: -1px;
  pointer-events: none;
  position: absolute;
}

.vp-home-hero-visual {
  border-radius: 1.25rem;
  display: block;
  filter: drop-shadow(0 22px 42px rgba(17, 24, 39, 0.08));
  max-width: none;
}

.vp-path-card-frame {
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.vp-path-card-image {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .vp-path-card-media {
    width: 44%;
  }
}

@media (min-width: 1280px) {
  .vp-home-hero-inner {
    max-width: 86rem;
  }

  .vp-path-nav-inner {
    max-width: 80rem;
  }
}

@media (min-width: 1024px) {
  .vp-home-hero-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    column-gap: 2.5rem;
  }

  .vp-home-hero-media {
    justify-content: flex-end;
  }

  .vp-home-hero-artwork {
    max-width: min(100%, 42rem);
  }

  .vp-path-card-media {
    padding: 0.5rem;
  }
}

@media (min-width: 1280px) {
  .vp-home-hero-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  }

  .vp-home-hero-artwork {
    max-width: min(100%, 48rem);
  }
}