.hero {
  position: relative;
  isolation: isolate;
  background: #071b33 url('season-master-cities-desktop.webp') center center / cover no-repeat;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, #071b33f7 0%, #071b33ea 22%, #071b33c9 38%, #071b3366 60%, #071b3322 100%),
    linear-gradient(0deg, #071b33d9 0%, transparent 26%);
}
.hero-grid, .hero-stripe { position: relative; z-index: 1; }
.hero-grid { grid-template-columns: minmax(0, 550px) minmax(0, 1fr); }
.hero-art {
  position: absolute;
  top: 34px;
  left: 67%;
  width: 186px;
  height: 186px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}
.hero-art::before {
  content: '';
  display: block;
  position: absolute;
  inset: -35px;
  z-index: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #f6fbff5c 4%, #a8dcff42 37%, #8ed7ff00 69%);
  box-shadow: none;
  filter: blur(12px);
}
.hero-art img {
  position: relative;
  z-index: 1;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #d6eeffb0, 0 0 27px 9px #a5dfff85, 0 0 68px 21px #ffb76038;
}
.hero-stripe { background: #071b3366; }
@media (max-width: 1050px) {
  .hero-grid { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); }
  .hero-art { left: 74%; width: 148px; height: 148px; }
  .hero-art img { width: 138px; height: 138px; }
}
@media (max-width: 760px) {
  .hero { background: #091d33; }
  .hero::before { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-art {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    max-height: 520px;
    aspect-ratio: 3 / 4;
    margin: 0;
    transform: none;
    justify-self: stretch;
    border-radius: 12px;
    border: 1px solid #ffffff3d;
    background: linear-gradient(0deg, #091d3355, transparent 24%, transparent 75%, #091d3322), url('season-master-cities-mobile.webp') center center / cover no-repeat;
    box-shadow: 0 20px 55px #020d1b77;
    backdrop-filter: none;
  }
  .hero-art::before {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 174px;
    height: 174px;
    transform: translate(-50%, -50%);
  }
  .hero-art img {
    position: absolute;
    top: 51%;
    left: 50%;
    width: 110px;
    height: 110px;
    transform: translate(-50%, -50%);
    border: 0;
    box-shadow: 0 0 0 2px #d6eeffb0, 0 0 20px 7px #a5dfff85, 0 0 44px 16px #ffb76038;
  }
}