.menu-card {
  grid-template-columns: 180px 60px minmax(0, 1fr) auto;
  min-height: 175px;
}

.menu-card::before {
  aspect-ratio: 4 / 3;
  background-position: center;
  background-size: cover;
  border: 1px solid #8f7556;
  box-shadow: 6px 6px 0 #d99b26;
  content: "";
  display: block;
  width: 180px;
}

.menu-card:nth-child(1)::before { background-image: url("/assets/menu-chicken.jpg"); }
.menu-card:nth-child(2)::before { background-image: url("/assets/menu-pork.jpg"); }
.menu-card:nth-child(3)::before { background-image: url("/assets/menu-beef.jpg"); }
.menu-card:nth-child(4)::before { background-image: url("/assets/menu-shrimp.jpg"); }
.menu-card:nth-child(5)::before { background-image: url("/assets/menu-salmon.jpg"); }
.menu-card:nth-child(6)::before { background-image: url("/assets/menu-veggie.jpg"); }

.menu-card.coming-soon { opacity: 1; }

@media (width <= 850px) {
  .menu-card { gap: 14px; grid-template-columns: 120px 38px minmax(0, 1fr) auto; }
  .menu-card::before { box-shadow: 4px 4px 0 #d99b26; width: 120px; }
}

@media (width <= 600px) {
  .menu-card { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 24px 4px; }
  .menu-card::before { box-shadow: 5px 5px 0 #d99b26; grid-column: 1 / -1; width: 100%; }
}