@charset "utf-8";
/* ============================================================
   allYates · cuadrícula 3×n de TODOS los yates (sin carrusel).
   Reutiliza la card .carousel-item (mismo estilo teal del index)
   pero la coloca en un grid en lugar del carrusel.
   Se carga DESPUÉS de index-modern.css e index-redesign.css.
   ============================================================ */

/* Sin hero video: el grid arranca bajo el header, con aire arriba */
.firstStage#yatesList{ padding-top:clamp(24px,6vh,70px) !important; }

.yatesGrid{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:24px !important;
  max-width:90vw !important;
  margin:14px auto 44px !important;
  padding:0 2% !important;
  box-sizing:border-box !important;
}

/* La card deja de comportarse como item de carrusel y ocupa su celda */
.yatesGrid .carousel-item{
  flex:none !important;
  width:auto !important;
  margin:0 !important;
}

/* Tablet: 2 columnas */
@media (max-width:1024px){
  .yatesGrid{ grid-template-columns:repeat(2, 1fr) !important; gap:18px !important; }
}

/* Smartphone: 1 columna */
@media (max-width:640px){
  .yatesGrid{ grid-template-columns:1fr !important; max-width:100vw !important; padding:0 4vw !important; }
}