/* Live typography, an actual CTA and responsive photo sources. */
.home-banner--responsive { position: relative; background: #16120d; color: #fff; }
.home-banner__photo { display: block; aspect-ratio: 1.8; overflow: hidden; }
.home-banner__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.home-banner__copy { padding: 24px var(--gut) 30px; }
.hero--banner .home-banner__title { margin: 0; max-width: none; font-family: var(--f-sans); font-size: clamp(38px, 11vw, 64px); font-weight: 720; font-variation-settings: "wdth" 90, "opsz" 96; line-height: .98; letter-spacing: -.025em; text-transform: uppercase; }
.hero--banner .home-banner__title span { display: block; overflow: visible; }
.home-banner__title span + span { color: #f2d28a; }
.home-banner__description { max-width: 30ch; margin: 18px 0 22px; color: #f5eee2; font-size: 16px; line-height: 1.45; }
.home-banner__cta { display: inline-flex; justify-content: center; align-items: center; gap: 24px; min-height: 48px; padding: 10px 22px; border: 1px solid #f5eee2; border-radius: 999px; color: #fff; font-size: 16px; line-height: 1.3; }
.home-banner__cta svg { width: 20px; height: 20px; flex: none; }
.home-banner__cta:focus-visible { outline: 3px solid #f2d28a; outline-offset: 4px; }
@media (hover: hover) { .home-banner__cta:hover { color: #16120d; background: #f2d28a; border-color: #f2d28a; } }
@media (min-width: 600px) and (max-width: 1023px) {
  .home-banner__photo { aspect-ratio: 2.25; }
  .home-banner__copy { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; align-items: center; padding-top: 30px; padding-bottom: 36px; }
  .hero--banner .home-banner__title { grid-row: 1 / 3; font-size: clamp(48px, 7vw, 64px); }
  .home-banner__description { margin: 0 0 20px; }
  .home-banner__cta { justify-self: start; align-self: start; }
}
@media (min-width: 1024px) {
  .home-banner__photo { aspect-ratio: 2060 / 763; }
  .home-banner__photo img { object-fit: contain; }
  .home-banner__copy { position: absolute; top: 50%; left: 0; width: 36%; padding: 0 0 0 var(--gut); transform: translateY(-50%); }
  .hero--banner .home-banner__title { font-size: clamp(48px, 5.1vw, 96px); }
  .home-banner__description { margin-top: clamp(16px, 1.3vw, 24px); margin-bottom: clamp(16px, 1.5vw, 28px); font-size: clamp(16px, 1.3vw, 22px); }
}