/* Lunch */
.lunch {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  padding-block: var(--p-lg);
  text-align: center;
  flex-direction: column;
  gap: var(--p-xl);

  @media (min-width: 765px) {
    padding-block: var(--p-xl);
  }

  .container {
    gap: var(--p-xl);
  }

  h2,
  p,
  h3 {
    margin: 0;
  }

  h2 {
    color: var(--color-primary);
  }

  h3 {
    font-size: clamp(1.75rem, 1rem + 0.3125vw, 1.75rem);
    color: var(--color-complementary);
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--p-xl);
    width: 100%;

    @media (min-width: 765px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 991px) {
      grid-template-columns: repeat(4, 1fr);
    }

    .product {
      display: flex;
      flex-direction: column;
      gap: var(--p-sm);

      img {
        width: 100%;
        overflow: hidden;
        border-radius: 8px;
        object-fit: cover;
        aspect-ratio: 1 / 1;
      }
    }
  }
}