.image-hero {
  position: relative;
  display: grid;
  min-block-size: var(--size-image-hero-block);
  overflow: clip;
  color: var(--color-white);
  isolation: isolate;
}

.image-hero__media,
.image-hero__overlay {
  position: absolute;
  z-index: -1;
  inset: 0;
}

.image-hero__image {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -309px;
  inline-size: 100%;
  max-inline-size: none;
  block-size: auto;
}

.image-hero__overlay {
  background: var(--color-image-hero-overlay);
}

.image-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block-start: var(--space-image-hero-content);
  text-align: center;
}

.image-hero__title,
.image-hero__description {
  margin: 0;
}

.image-hero__title {
  max-inline-size: 1120px;
  font-size: var(--fs-image-hero-title);
  font-weight: var(--fw-bold);
  letter-spacing: -1.28px;
  line-height: .98;
  text-transform: uppercase;
}

.image-hero__description {
  max-inline-size: var(--image-hero-description-width, var(--size-image-hero-description));
  margin-block-start: var(--space-image-hero-copy);
  font-size: var(--fs-image-hero-description);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
}

@media (max-width: 1023px) {
  .image-hero__image {
    inset-inline-start: -127.37%;
    inset-block-start: -122px;
    inline-size: 280.07%;
  }

  .image-hero__title,
  .image-hero__description {
    inline-size: 100%;
    max-inline-size: none;
  }

  .image-hero__title {
    letter-spacing: -.6px;
    line-height: 1.15;
  }

  .image-hero__description {
    line-height: 1.25;
  }
}