/* Cantina: composición editorial de copy dominante y mesa compartida como acento. */
.cantina {
  grid-template-columns: minmax(0, 640px) minmax(270px, 480px);
  justify-content: space-between;
  column-gap: clamp(4rem, 13vw, 13rem);
  align-items: center;
}

.cantina-content {
  max-width: 540px;
}

.cantina-content h2 {
  font-size: clamp(4.3rem, 6vw, 6.2rem);
  line-height: .82;
  margin: .6rem 0 1.7rem;
}

.cantina-media {
  position: relative;
  width: min(100%, 480px);
  height: clamp(380px, 38vw, 500px);
  justify-self: start;
}

.cantina-scene {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 66%;
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  margin: 0;
}

.cantina-scene img {
  object-position: center center;
}

.cantina-food {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

.cantina-food img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cantina-food--pizza {
  top: 0;
  right: 0;
  width: 49%;
  aspect-ratio: 4 / 3;
}

.cantina-food--empanadas {
  right: 8%;
  bottom: 1.25rem;
  width: 37%;
  aspect-ratio: 4 / 5;
}

@media (max-width: 780px) {
  .cantina {
    grid-template-columns: 1fr;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
    gap: 2.2rem;
  }

  .cantina-content {
    order: 1;
  }

  .cantina-content h2 {
    font-size: clamp(3.8rem, 16vw, 4.8rem);
    margin-bottom: 1.5rem;
  }

  .cantina-media {
    width: min(86vw, 335px);
    height: 360px;
    order: 2;
    margin: .25rem auto 0;
  }

  .cantina-scene {
    width: 63%;
  }

  .cantina-food--pizza {
    width: 55%;
  }

  .cantina-food--empanadas {
    right: 3%;
    bottom: .7rem;
    width: 42%;
  }
}