.dinner-hero .article-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  grid-template-areas: "intro player" "summary player";
  grid-template-rows: auto auto;
  column-gap: clamp(28px, 6vw, 88px);
  row-gap: 14px;
}
.dinner-hero .article-intro {
  grid-area: intro;
  align-self: end;
}
.dinner-hero .article-byline {
  margin-bottom: 0;
}
.dinner-intro-summary {
  grid-area: summary;
  align-self: start;
}
.dinner-video {
  grid-area: player;
  justify-self: center;
  width: min(100%, 288px);
}
.dinner-video .article-video-frame {
  aspect-ratio: 9 / 16;
  background: var(--lavender) url("/assets/first-date-dinner/piano-lam-dinner-portrait.webp") center / cover no-repeat;
}
.dinner-video iframe {
  border-radius: inherit;
}
@media (max-width: 820px) {
  .dinner-hero .article-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "summary" "player";
    gap: 22px;
  }
}
@media (max-width: 620px) {
  .dinner-hero .article-hero-grid {
    gap: 18px;
  }
}