/* Recipes, a supporting feature: dish name, recipe, then the ingredients you pick. */
.recipes { background: var(--cream-2); }
.recipes__head { max-width: 640px; }
.recipes__flow { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.recipes__flow li { display: grid; justify-items: center; gap: 14px; align-content: start; }
/* --phone-w must be a length: phone.css derives the bezel, corners and Dynamic Island
   from it, and a percentage there resolves against different boxes for each property. */
.recipes__flow .phone {
  --phone-w: min(240px, calc((100vw - 2 * var(--gutter) - 28px) / 3));
  box-shadow: var(--shadow-card), 0 8px 18px rgba(30, 43, 41, 0.12);
}
.recipes__flow p { max-width: 240px; color: var(--ink-2); font-size: 0.875rem; text-align: center; }
.recipes__flow strong { display: block; color: var(--ink); font-size: 0.9375rem; }
.recipes__note { margin-top: 36px; color: var(--ink-2); }

@media (min-width: 720px) {
  .recipes__flow { gap: 32px; }
  .recipes__flow .phone { --phone-w: min(240px, calc((100vw - 2 * var(--gutter) - 64px) / 3)); }
  .recipes__flow p { font-size: 1rem; }
  .recipes__flow strong { font-size: 1.0625rem; }
}