.hero-image {
  align-items: center !important;
  min-height: 560px !important;
  padding: 32px 0 42px !important;
}

.hero-image::before,
.hero-image::after {
  display: block !important;
  content: "" !important;
  position: absolute;
  pointer-events: none;
}

.hero-image::before {
  width: min(540px, 46vw);
  aspect-ratio: 5 / 4;
  border-radius: 44px 44px 160px 44px;
  background:
    radial-gradient(circle at 22% 10%, rgba(255, 226, 94, .36), transparent 34%),
    linear-gradient(145deg, rgba(231, 247, 251, .94), rgba(232, 247, 238, .9));
  box-shadow: 0 28px 70px rgba(24, 34, 61, .16);
  transform: rotate(-2deg);
  z-index: 0;
}

.hero-image::after {
  width: min(500px, 42vw);
  aspect-ratio: 5 / 4;
  border-radius: 38px 38px 145px 38px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, rgba(158, 209, 11, .2), rgba(143, 208, 231, .2));
  z-index: 2;
  mix-blend-mode: soft-light;
}

.hero-image img {
  position: relative;
  z-index: 1;
  width: min(500px, 42vw) !important;
  aspect-ratio: 5 / 4;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  border-radius: 38px 38px 145px 38px;
  box-shadow:
    0 26px 60px rgba(24, 34, 61, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .46);
  filter: saturate(1.03) contrast(.98) brightness(1.03) !important;
}

@media (max-width: 900px) {
  .hero-image {
    min-height: auto !important;
    padding: 18px 0 30px !important;
  }

  .hero-image::before {
    width: min(520px, 82vw);
  }

  .hero-image::after,
  .hero-image img {
    width: min(480px, 78vw) !important;
  }
}

@media (max-width: 700px) {
  .hero {
    padding-top: 34px !important;
  }

  .hero-image {
    order: -1;
    padding: 8px 0 12px !important;
  }

  .hero-image::before {
    width: min(360px, 86vw);
    border-radius: 30px 30px 110px 30px;
  }

  .hero-image::after,
  .hero-image img {
    width: min(330px, 80vw) !important;
    aspect-ratio: 4 / 5;
    border-radius: 26px 26px 96px 26px;
  }

  .hero-image img {
    object-position: 52% 48% !important;
  }
}