.hero-art {
  background: linear-gradient(145deg, #f8c5be, #e2cdf8);
  border-radius: 34px;
  box-shadow: var(--shadow);
  height: 440px;
  overflow: hidden;
  position: relative;
}

.hero-art::after {
  background: linear-gradient(180deg, transparent 60%, #32122b24);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero-art img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  width: 100%;
}

@media (max-width: 720px) {
  .hero-art { height: 360px; }
}