@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Poppins:wght@400;500;600&display=swap");

:root {
  --banana: #ffd100;
  --green: #7cb518;
  --forest: #2a4c37;
  --cream: #fff8e5;
  --coral: #ff6f61;
  --brown: #6b3626;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--forest);
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 209, 0, .34), transparent 26rem),
    radial-gradient(circle at 90% 80%, rgba(124, 181, 24, .24), transparent 30rem),
    var(--cream);
  font-family: "Poppins", sans-serif;
}

.menu-gallery {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 36px);
}

.menu-gallery__intro {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

.menu-gallery__intro img {
  width: 104px;
  height: 104px;
  padding: 6px;
  border-radius: 28px;
  object-fit: contain;
}
.menu-gallery__intro p { margin: 4px 0 0; }
.eyebrow { color: var(--brown); font: 700 13px/1 "Poppins", sans-serif; letter-spacing: .16em; }

h1 {
  margin: 2px 0;
  color: var(--forest);
  font: 700 clamp(30px, 4vw, 48px)/1 "Fredoka", sans-serif;
}

.menu-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

figure { margin: 0; }

figure a {
  display: block;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(42, 76, 55, .18);
  transition: transform .2s ease, box-shadow .2s ease;
}

figure a:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(42, 76, 55, .25);
}

figure img { display: block; width: 100%; height: auto; }

figcaption {
  padding: 12px 6px 0;
  color: var(--brown);
  font: 600 14px/1.4 "Poppins", sans-serif;
}

.menu-gallery__note {
  max-width: 760px;
  margin: 22px auto 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  text-align: center;
  font-size: 14px;
}

@media (max-width: 760px) {
  .menu-gallery { padding: 12px; }
  .menu-gallery__intro { align-items: center; gap: 12px; }
  .menu-gallery__intro img { width: 76px; height: 76px; border-radius: 22px; }
  .menu-gallery__intro p:not(.eyebrow) { font-size: 12px; }
  .menu-gallery__grid { grid-template-columns: 1fr; }
  figure a { border-width: 3px; border-radius: 16px; }
  figcaption { padding-top: 7px; font-size: 12px; }
  .menu-gallery__note { border-radius: 22px; }
}