.menu-hero {
  align-items: center;
  background: var(--green);
  color: white;
  display: grid;
  gap: 70px;
  grid-template-columns: .9fr 1.1fr;
}
.menu-hero .kicker { color: #e9cd74; }
.menu-hero-image {
  background: linear-gradient(rgba(42,19,14,.08), rgba(42,19,14,.22)), url("gallery/4.jpeg") center/cover;
  height: 100%;
  min-height: 440px;
}

.menu-section { margin: auto; max-width: 1180px; padding: 130px 28px; }
.menu-intro { display: grid; gap: 35px; grid-template-columns: .45fr 1fr .8fr; margin-bottom: 60px; }
.menu-intro h2 { color: var(--brown); font-size: clamp(3rem, 5vw, 5rem); }
.menu-intro > p:last-child { color: var(--muted); }
.menu-grid { display: grid; grid-auto-rows: 280px; grid-template-columns: repeat(3, 1fr); }
.menu-item {
  background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end;
  margin: -1px 0 0 -1px; padding: 30px; position: relative; transition: background .2s ease, color .2s ease;
}
.menu-item:hover { background: var(--gold); color: var(--brown); }
.menu-item span { color: var(--teal); font-size: .68rem; font-weight: 700; left: 25px; letter-spacing: .12em; position: absolute; top: 23px; }
.menu-item h3 { color: var(--brown); font-size: 2rem; }
.menu-item p { color: var(--muted); font-size: .86rem; margin-top: 10px; }
.menu-item-image { color: white; }
.menu-item-image::after { background: linear-gradient(transparent, rgba(42,19,14,.82)); content: ""; inset: 0; position: absolute; }
.menu-item-image.bread { background: url("https://images.unsplash.com/photo-1549931319-a545dcf3bc73?auto=format&fit=crop&w=900&q=86") center/cover; grid-row: span 2; }
.menu-item-image.scones { background: url("gallery/7.jpeg") center/cover; }
.menu-item-image.biscuits { background: url("gallery/4.jpeg") center/cover; }
.menu-item-image.cake { background: url("https://images.unsplash.com/photo-1578985545062-69928b1d9587?auto=format&fit=crop&w=900&q=86") center/cover; }
.menu-item-image.muffins { background: url("https://images.unsplash.com/photo-1587668178277-295251f900ce?auto=format&fit=crop&w=900&q=86") center/cover; }
.menu-item-image.doughnuts { background: url("gallery/6.jpeg") center/cover; }
.menu-item-image h3, .menu-item-image p, .menu-item-image span { color: white; position: relative; z-index: 1; }
.menu-item-image span { left: auto; position: absolute; }

.services-list-section {
  background: var(--maroon); color: white; display: grid; gap: 90px; grid-template-columns: .8fr 1.2fr;
  padding: 110px max(28px, calc((100vw - 1180px) / 2));
}
.services-heading .kicker { color: #f1cb68; }
.services-heading h2 { font-size: clamp(3rem, 5vw, 5rem); margin-top: 20px; }
.services-list > div { align-items: center; border-bottom: 1px solid rgba(255,255,255,.18); display: grid; gap: 22px; grid-template-columns: 48px 1fr; padding: 18px 0; }
.services-list > div:first-child { border-top: 1px solid rgba(255,255,255,.18); }
.services-list span { color: #e9c45e; font-size: .68rem; font-weight: 700; }
.services-list p { font-size: .95rem; }

.reasons-section { display: grid; gap: 80px; grid-template-columns: .75fr 1.25fr; margin: auto; max-width: 1180px; padding: 130px 28px; }
.reasons-title h2 { color: var(--brown); font-size: clamp(3rem, 5vw, 5rem); margin-top: 20px; }
.reasons-grid { display: grid; grid-template-columns: 1fr 1fr; }
.reasons-grid article { border-bottom: 1px solid var(--line); min-height: 150px; padding: 28px; }
.reasons-grid article:nth-child(odd) { border-right: 1px solid var(--line); }
.reasons-grid article:nth-child(-n+2) { border-top: 1px solid var(--line); }
.reasons-grid strong { color: var(--teal); display: block; font-family: var(--serif); font-size: 1.75rem; font-weight: 400; }
.reasons-grid p { color: var(--muted); font-size: .85rem; margin-top: 7px; }

@media (max-width: 900px) {
  .menu-hero { grid-template-columns: 1fr; }
  .menu-hero-image { min-height: 480px; }
  .menu-intro, .services-list-section, .reasons-section { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .menu-section { padding: 90px 18px; }
  .menu-intro { gap: 18px; }
  .menu-grid { grid-auto-rows: 250px; grid-template-columns: 1fr; }
  .menu-item-image.bread { grid-row: span 1; }
  .services-list-section { gap: 55px; padding: 75px 22px; }
  .reasons-section { gap: 50px; padding: 90px 20px; }
  .reasons-grid { grid-template-columns: 1fr; }
  .reasons-grid article, .reasons-grid article:nth-child(odd) { border-left: 0; border-right: 0; }
  .reasons-grid article:nth-child(2) { border-top: 0; }
}