.home-parallax {
  --photo-shift: 0px;
  position: relative;
  height: clamp(520px, 62vw, 900px);
  overflow: hidden;
  background: #171411;
}

.home-parallax-photo {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(0, var(--photo-shift), 0) scale(1.02);
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
}

.home-parallax::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 18%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .12));
  pointer-events: none;
}

.hero-article {
  position: absolute;
  z-index: 2;
  right: 4vw;
  bottom: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;
  width: min(660px, 54vw);
  padding: 17px 18px;
  background: rgba(8, 8, 10, .34);
  color: #f5f4ef;
  backdrop-filter: blur(3px);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .95), 0 2px 18px rgba(0, 0, 0, .85);
  transition: opacity 180ms ease, transform 180ms ease;
}

.hero-article:hover,
.hero-article:focus-visible {
  background: rgba(8, 8, 10, .44);
  outline: 2px solid #f5f4ef;
  outline-offset: 3px;
}

.hero-article.is-changing {
  opacity: 0;
  transform: translateY(7px);
}

.hero-article-side,
.hero-article-action {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 10px/1.2 var(--sans);
  letter-spacing: .06em;
}

.hero-article-count {
  font-style: normal;
  font-weight: 500;
}

.hero-article strong {
  display: block;
  margin: 0;
  font: 800 clamp(23px, 2.4vw, 38px)/.94 var(--sans);
  letter-spacing: -.045em;
}

.hero-article-side {
  align-items: flex-end;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  white-space: nowrap;
}

.hero-article-action .diagonal-arrow {
  width: 15px;
  height: 15px;
}

.hero-article-action .diagonal-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

@media (max-width: 800px) {
  .home-parallax {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .home-parallax-photo {
    inset: -12% 0;
    height: 124%;
    object-position: 51% center;
    transform: translate3d(0, var(--photo-shift), 0) scale(1.02);
  }

  .hero-article {
    right: 12px;
    bottom: 12px;
    left: 15%;
    width: auto;
    gap: 12px;
    padding: 12px 13px;
  }

  .hero-article strong {
    font-size: clamp(17px, 4.8vw, 23px);
    line-height: .96;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-parallax-photo {
    transform: scale(1.02);
  }

  .hero-article {
    transition: none;
  }
}