.hero {
  --u: calc(min(100vw, 520px) / 390);
  padding-block-end: 64px;
}

.hero__stage {
  position: relative;
  width: min(100%, 520px);
  height: calc(322 * var(--u));
  margin-inline: auto;
}

.hero__card {
  --px: calc(var(--w) * var(--u) / 279);
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(279 * var(--px));
  transform: translate3d(var(--move-x, 0px), var(--move-y, 0px), 0)
    rotate(calc(var(--r) + var(--tilt-z, 0deg)))
    translate(50%, 50%)
    perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg))
    translate(-50%, -50%);
  transform-origin: 0 0;
  box-shadow: var(--shadow-soft);
}

.hero__card--blur {
  opacity: 0.8;
  filter: blur(5px);
  box-shadow: none;
}

.hero__card--desktop {
  display: none;
}

.hero__card--maxim {
  --x: 47;
  --y: 33;
  --w: 100.5;
  --r: -6.2deg;
}

.hero__card--irina {
  --x: 230;
  --y: 75;
  --w: 122;
  --r: 6.53deg;
}

.hero__card--evgeny-blur {
  --x: 99;
  --y: 195;
  --w: 72;
  --r: -6.51deg;
}

.hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 25px;
  margin-block-start: 0;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
}

.hero__eyebrow::before {
  content: "";
  flex: none;
  width: 31px;
  height: 2px;
  background-color: var(--color-gold-rule);
}

.hero__title {
  margin-block-start: 6px;
  text-align: center;
}

.hero__button {
  justify-self: stretch;
}

@media (600px <= width < 1024px) {
  .hero__content {
    justify-items: center;
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
  }

  .hero__text {
    max-width: 530px;
  }

  .hero__button {
    justify-self: center;
  }
}

@media (1024px <= width) {
  .hero {
    --u: calc(min(100vw, 1920px) / 1920);
    position: relative;
    min-height: calc(var(--hero-offset) + var(--hero-height));
    padding-block-end: 40px;
    overflow: clip;
  }

  .hero__stage {
    position: absolute;
    inset: var(--hero-offset) 0 0;
    width: min(100%, 1920px);
    height: auto;
  }

  .hero__card--desktop {
    display: block;
  }

  .hero__card--maxim {
    --x: 206;
    --y: 94;
    --w: 238;
    --r: -6.2deg;
  }

  .hero__card--irina {
    --x: 363;
    --y: 523;
    --w: 230;
    --r: -4.77deg;
  }

  .hero__card--sergey {
    --x: 1161;
    --y: 43;
    --w: 133;
    --r: 6.53deg;
  }

  .hero__card--evgeny {
    --x: 1507;
    --y: 85;
    --w: 248;
    --r: -6.51deg;
  }

  .hero__card--aidar {
    --x: 1379;
    --y: 492;
    --w: 235;
    --r: 8.15deg;
  }

  .hero__card--evgeny-blur {
    --x: 730;
    --y: 79;
    --w: 96;
    --r: -6.51deg;
  }

  .hero__card--evgeny-blur-low {
    --x: 960;
    --y: 686;
    --w: 96;
    --r: 15deg;
  }

  .hero__content {
    position: relative;
    z-index: 1;
    padding-block-start: calc(var(--hero-offset) + 262 * var(--u));
    justify-items: center;
    gap: 0;
    text-align: center;
  }

  .hero__eyebrow::before {
    display: none;
  }

  .hero__title {
    margin-block-start: -8px;
  }

  .hero__text {
    max-width: clamp(400px, 27.6vw, 530px);
    margin-block-start: 24px;
  }

  .hero__button {
    justify-self: center;
    margin-block-start: 24px;
  }
}

@media (1024px <= width < 1440px) {
  .hero__card--maxim {
    --x: 170;
  }

  .hero__card--irina {
    --x: 240;
  }

  .hero__card--aidar {
    --x: 1480;
  }

  .hero__card--evgeny-blur-low {
    display: none;
  }
}