@font-face {
  font-family: Anton;
  src: url('fonts/Anton-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Oswald;
  src: url('fonts/Oswald-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

.leaflet-hero {
  width: 100%;
  padding: 16px clamp(12px, 1.5vw, 24px) 0;
}
.leaflet-scene {
  position: relative;
  isolation: isolate;
  container-type: size;
  height: clamp(420px, min(43vw, calc(100svh - 150px)), 660px);
  overflow: hidden;
  color: #fff;
  background: #364d27;
}
.leaflet-background,
.leaflet-content {
  position: absolute;
  inset: 0;
}
.leaflet-background > picture:first-child img {
  object-fit: cover;
  object-position: center 75%;
}
.leaflet-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 15%, rgb(0 0 0 / 8%) 40%, rgb(0 0 0 / 70%) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 20%), transparent 65%);
}
.leaflet-content h1 {
  position: absolute;
  top: 12%;
  left: 6%;
  margin: 0;
  font-family: Anton, Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(36px, min(4.8cqw, 9cqh), 64px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-shadow: .28cqw .32cqw 0 rgb(0 0 0 / 80%);
  transform: scaleX(1.2);
  transform-origin: left top;
}
.leaflet-content h1 > span {
  display: block;
}
.leaflet-white {
  color: #fff;
}
.leaflet-content h1 > .leaflet-yellow {
  margin-top: clamp(16px, 2cqw, 24px);
  color: #ffce00;
}
.leaflet-subheading {
  position: absolute;
  top: 72%;
  left: 6%;
  right: 4%;
  font-family: Oswald, 'Arial Narrow', sans-serif;
  font-weight: 600;
  font-size: clamp(24px, min(3.4cqw, 6cqh), 42px);
  line-height: 1.2;
  letter-spacing: -.015em;
  text-shadow: 0 2px 3px rgb(0 0 0 / 60%);
}
.leaflet-description {
  position: absolute;
  bottom: 4%;
  left: 5.5%;
  right: 5.5%;
  font-family: Oswald, 'Arial Narrow', sans-serif;
  font-size: clamp(16px, min(1.7cqw, 3.6cqh), 24px);
  font-weight: 300;
  line-height: 1.48;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 3px #000;
}
@media (max-width: 760px) {
  .leaflet-hero { padding: 5px 0 0; }
  .leaflet-scene { container-type: inline-size; height: auto; min-height: 660px; }
  .leaflet-background > picture:first-child img { object-position: 72% center; }
  .leaflet-background::after {
    background: linear-gradient(180deg, rgb(0 0 0 / 15%), rgb(0 0 0 / 18%) 45%, rgb(0 0 0 / 85%) 100%),
      linear-gradient(90deg, rgb(0 0 0 / 38%), transparent);
  }
  .leaflet-content h1 { top: 9%; left: 6%; font-size: clamp(32px, 9.5cqw, 52px); line-height: 1.35; transform: none; }
  .leaflet-content h1 > .leaflet-yellow { margin-top: 30px; }
  .leaflet-subheading { top: auto; bottom: 150px; font-size: clamp(24px, 6cqw, 34px); max-width: 90%; line-height: 1.3; }
  .leaflet-description { bottom: 27px; font-size: 18px; line-height: 1.55; text-align: left; left: 6%; right: 6%; }
}
@media (max-width: 380px) {
  .leaflet-scene { min-height: 680px; }
  .leaflet-subheading { bottom: 180px; }
}