.food-poster__frame--managed::after {
  z-index: 2;
}

.goldpeak-food-hero {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  color: #111;
  background: var(--food-yellow);
}

.goldpeak-food-hero__slides,
.goldpeak-food-hero__slide {
  height: 100%;
}

.goldpeak-food-hero__slide {
  display: grid;
  grid-template-columns: minmax(330px, .76fr) minmax(560px, 1.24fr);
  min-width: 0;
  overflow: hidden;
}

.goldpeak-food-hero__slide[hidden] {
  display: none;
}

.goldpeak-food-hero__slide.is-active {
  animation: goldpeak-food-menu-board-in 520ms cubic-bezier(.16, 1, .3, 1) both;
}

.goldpeak-food-hero__copy {
  min-width: 0;
}

.goldpeak-food-hero__copy h1,
.goldpeak-food-hero__copy h2 {
  max-width: 520px;
  margin: 0;
  color: #090a0b;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(64px, 5.25vw, 82px);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
}

.goldpeak-food-hero__copy h1::after,
.goldpeak-food-hero__copy h2::after {
  content: "";
  display: block;
  width: min(370px, 88%);
  height: 30px;
  margin-top: 13px;
  background: url("painted-heading-underline.svg") left center / 100% 100% no-repeat;
}

.goldpeak-food-hero__link {
  width: fit-content;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 0 15px;
  border: 2px solid #111;
  border-radius: 9px;
  color: #111;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.goldpeak-food-hero__link:hover {
  color: #fff;
  background: #111;
}

.goldpeak-food-hero__link span,
.goldpeak-food-hero__link svg {
  width: 18px;
  height: 18px;
}

.goldpeak-food-hero__meal img {
  object-position: center 53%;
}

.goldpeak-food-hero__meal > img {
  position: absolute;
  inset: -22px -7% -76px -14%;
  width: 121%;
  height: calc(100% + 98px);
}

.goldpeak-food-hero__slide--focus-left .goldpeak-food-hero__meal img {
  object-position: left 53%;
}

.goldpeak-food-hero__slide--focus-right .goldpeak-food-hero__meal img {
  object-position: right 53%;
}

.goldpeak-food-hero__controls {
  position: absolute;
  z-index: 12;
  right: 18px;
  bottom: 16px;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border-radius: 13px;
  color: #fff;
  background: #111315;
  box-shadow: 0 10px 24px rgba(51, 36, 22, .16);
}

.goldpeak-food-hero__controls > button {
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.goldpeak-food-hero__controls > button:hover,
.goldpeak-food-hero__controls > button:focus-visible {
  color: #111;
  background: var(--food-yellow);
}

.goldpeak-food-hero__controls > button:first-child .goldpeak-icon,
.goldpeak-food-hero__controls > button:first-child svg {
  transform: rotate(180deg);
}

.goldpeak-food-hero__controls svg {
  width: 18px;
  height: 18px;
}

.goldpeak-food-hero__dots {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: 5px;
}

.goldpeak-food-hero__dots button {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}

.goldpeak-food-hero__dots button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 9px;
  background: rgba(255,255,255,.42);
  transform: translate(-50%, -50%) scaleX(1);
  transition: transform 180ms ease, background-color 180ms ease;
}

.goldpeak-food-hero__dots button[aria-pressed="true"]::before {
  background: var(--food-yellow);
  transform: translate(-50%, -50%) scaleX(2.67);
}

@keyframes goldpeak-food-menu-board-in {
  from {
    opacity: .52;
    clip-path: inset(0 0 0 4%);
    transform: translate3d(18px, 0, 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 1120px) {
  .goldpeak-food-hero__slide {
    grid-template-columns: minmax(300px, .86fr) minmax(440px, 1.14fr);
  }
}

@media (max-width: 980px) {
  .goldpeak-food-hero__slide {
    grid-template-columns: minmax(280px, .88fr) minmax(390px, 1.12fr);
  }

  .goldpeak-food-hero__copy h1,
  .goldpeak-food-hero__copy h2 {
    font-size: clamp(54px, 7.7vw, 75px);
  }
}

@media (max-width: 760px) {
  .food-poster__frame--managed {
    grid-template-columns: 1fr;
    grid-template-rows: 720px auto;
  }

  .goldpeak-food-hero__slide {
    grid-template-columns: 1fr;
    grid-template-rows: 370px 350px;
  }

  .goldpeak-food-hero__copy h1,
  .goldpeak-food-hero__copy h2 {
    max-width: 540px;
    font-size: clamp(54px, 15vw, 78px);
  }

  .goldpeak-food-hero__meal {
    min-height: 350px;
  }

  .goldpeak-food-hero__meal > a {
    inset: -8px -9% -34px -9%;
  }

  .goldpeak-food-hero__meal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 53%;
    transform: none;
  }

  .goldpeak-food-hero__controls {
    right: 12px;
    bottom: 12px;
  }
}

@media (max-width: 520px) {
  .food-poster__frame--managed {
    grid-template-rows: 680px auto;
  }

  .goldpeak-food-hero__slide {
    grid-template-rows: 370px 310px;
  }

  .goldpeak-food-hero__copy h1,
  .goldpeak-food-hero__copy h2 {
    font-size: clamp(49px, 15.8vw, 67px);
  }

  .goldpeak-food-hero__copy h1::after,
  .goldpeak-food-hero__copy h2::after {
    height: 7px;
    margin-top: 15px;
  }

  .goldpeak-food-hero__link {
    min-height: 38px;
    margin-top: 14px;
    padding-inline: 12px;
    font-size: 12px;
  }

  .goldpeak-food-hero__meal {
    min-height: 310px;
  }

  .goldpeak-food-hero__controls {
    left: 50%;
    right: auto;
    bottom: 10px;
    transform: translateX(-50%);
  }

  .goldpeak-food-hero__controls > button {
    min-width: 34px;
    height: 34px;
    padding-inline: 8px;
  }

  .goldpeak-food-hero__dots {
    gap: 5px;
    padding-inline: 2px;
  }

  .goldpeak-food-hero__dots button {
    width: 18px;
  }

  .goldpeak-food-hero__dots button[aria-pressed="true"]::before {
    transform: translate(-50%, -50%) scaleX(2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .goldpeak-food-hero__slide.is-active {
    animation: none;
  }

  .goldpeak-food-hero__link,
  .goldpeak-food-hero__dots button::before {
    transition: none;
  }
}
