:root {
  --primary: #6a1b9a;
  --primary-light: #f3e5f5;
  --accent: #00acc1;
  --hero-bg: #22122f;
}

@media (min-width: 1024px) {
  .hero.has-image::after {
    top: 96px;
    right: max(40px, calc((100vw - var(--max)) / 2));
    bottom: 42px;
    left: auto;
    width: min(32vw, 440px);
    background-position: center;
    background-size: contain;
    opacity: 0.58;
  }

  .hero .hero-lead {
    max-width: 520px;
  }
}