Food Card

<main class="grid min-h-[90vh] place-items-center bg-slate-50 p-8 font-['Inter']">
  <!-- Añadir aria-labelledby para describir el contenido principal -->
  <article class="flex max-w-lg items-center gap-6 rounded-2xl bg-white p-4 shadow-sm" aria-labelledby="product-title">
    <!-- Añadir alt para mejorar la accesibilidad de la imagen -->
    <img 
      class="aspect-square max-w-[8rem] rounded-md object-cover" 
      src="https://cdn.pixabay.com/photo/2017/12/09/08/18/pizza-3007395_1280.jpg" 
      alt="Imagen de una pizza Margherita"
    />

    <div>
      <header class="flex justify-between">
        <!-- Usar id para conectar con aria-labelledby del artículo -->
        <h3 id="product-title" class="font-semibold">Margherita Pizza</h3>
        <span class="font-extrabold">$5.99</span>
      </header>

      <p class="my-2 leading-tight">
        <!-- Corregir el nombre de "San Marino tometoes" a "San Marzano tomatoes" y añadir más semántica con em -->
        <small class="text-xs text-gray-400">
          Pizza Dough, San Marzano tomatoes, Fresh mozzarella balls, Fresh basil.
        </small>
      </p>

      <footer class="flex items-center justify-between">
        <div class="flex items-center gap-4">
          <!-- Añadir aria-labels para describir los botones -->
          <button 
            class="grid w-7 h-7 place-items-center rounded-full bg-neutral-800 text-white duration-200 hover:bg-neutral-950 active:scale-90" 
            aria-label="Eliminar una pizza del carrito"
          >
            <!-- Añadir título al ícono del SVG para accesibilidad -->
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4" aria-hidden="true">
              <title>Restar</title>
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
            </svg>
          </button>
          <!-- Usar un aria-live para notificar cambios dinámicos -->
          <output aria-live="polite" aria-atomic="true">4</output>
          <button 
            class="grid w-7 h-7 place-items-center rounded-full bg-neutral-800 text-white duration-200 hover:bg-neutral-950 active:scale-90" 
            aria-label="Añadir una pizza al carrito"
          >
            <!-- Añadir título al ícono del SVG para accesibilidad -->
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4" aria-hidden="true">
              <title>Añadir</title>
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
            </svg>
          </button>
        </div>
        <button 
          class="grid w-12 h-12 place-items-center rounded-full text-red-500 hover:bg-gray-50 active:scale-90 active:bg-gray-100" 
          aria-label="Eliminar pizza del carrito"
        >
          <!-- Añadir título al ícono del SVG para accesibilidad -->
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
            <title>Eliminar</title>
            <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
          </svg>
        </button>
      </footer>
    </div>
  </article>
</main>