/* Mayoreo: banda blanca. Texto y botones, y un mosaico de tres fotos 3:2:
   la primera a todo el ancho del mosaico y las otras dos a la mitad.
   Desde 48rem (768 px) el texto queda a la izquierda y el mosaico a la derecha.
   Depende de tokens.css, base.css y .boton. */

.mayoreo__interior {
  display: grid;
  gap: var(--espacio-6);
}

.mayoreo__texto {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--espacio-4);
}

.mayoreo__titulo {
  margin-bottom: 0;
}

.mayoreo__descripcion {
  max-width: 30ch;
  font-size: var(--texto-grande);
}

.mayoreo__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  margin-top: var(--espacio-2);
}

.mayoreo__fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-3);
}

.mayoreo__item:first-child {
  grid-column: 1 / -1;
}

.mayoreo__foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radio-lg);
  object-fit: cover;
}

@media (min-width: 48rem) {
  .mayoreo__interior {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--espacio-8);
  }

  .mayoreo__interior--sin-fotos {
    grid-template-columns: minmax(0, 1fr);
  }

  .mayoreo__fotos {
    gap: var(--espacio-4);
  }
}