.hero-ort {
  display: block;
  max-width: 1600px;
  min-height: 640px;
  height: clamp(640px, 55vw, 800px);
  margin-inline: auto;
  background: #180e2a;
}

.hero-ort .hero-art {
  position: absolute;
  inset: 0;
  min-height: 0;
  height: 100%;
  background: #180e2a;
}

.hero-ort .hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 45%;
  background: none;
}

.hero-ort .hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 13, 14, .9) 0%, rgba(11, 13, 14, .78) 28%, rgba(11, 13, 14, .45) 43%, rgba(11, 13, 14, .08) 60%, transparent 72%);
}

.hero-ort .hero-copy {
  width: min(53%, 750px);
  height: 100%;
  min-width: 0;
  padding: 80px 36px 70px max(24px, calc((100% - 1240px) / 2));
}

.hero-ort h1 {
  font-size: clamp(5.6rem, 8vw, 9rem);
}

.hero-ort .dek {
  max-width: 390px;
}

.ort-deck {
  max-width: min(780px, calc(54vh - 20px));
  max-width: min(780px, calc(54svh - 20px));
  margin-inline: auto;
}

.ort-deck .brandbook-page {
  aspect-ratio: 612 / 792;
}

@media (max-width: 650px) {
  .ort-deck { padding: 9px; }
  .ort-deck .brandbook-topline { padding-bottom: 8px; }
  .ort-deck .brandbook-controls { padding-top: 8px; }
}

@media (max-width: 900px) {
  .hero-ort {
    display: flex;
    flex-direction: column-reverse;
    height: auto;
    min-height: 0;
  }

  .hero-ort .hero-art {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    flex: none;
  }

  .hero-ort .hero-art::after {
    display: none;
  }

  .hero-ort .hero-copy {
    width: 100%;
    height: auto;
    padding: 60px 20px 55px;
  }

  .hero-ort h1 {
    font-size: clamp(5rem, 14vw, 7.5rem);
  }
}