/* The café illustration keeps its proportions as the introduction reflows. */
.hero--cafe .hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.03fr);
  gap: clamp(20px, 3vw, 44px);
  min-height: 560px;
  padding-block: 46px 52px;
}
.hero--cafe .hero-copy h1 { font-size: clamp(42px, 5.4vw, 72px); }
.hero-illustration { width: 100%; max-width: 550px; min-width: 0; justify-self: center; }
.hero-illustration svg { display: block; width: 100%; height: auto; overflow: visible; }

@media (max-width: 760px) {
  .hero--cafe .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 18px;
    padding-block: 32px 24px;
  }
  .hero--cafe .hero-copy { max-width: 620px; }
  .hero--cafe .hero-copy h1 { font-size: clamp(38px, 8vw, 56px); }
  .hero--cafe .hero-tag p { font-size: 16px; }
  .hero-illustration { width: min(70vw, 320px); max-width: 100%; }
}