/* =================================================================
   BANNERS DOBLES
   ================================================================= */
.jri-banners-double { padding-top: 0; }
.jri-banners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
/* La proporción la manda la plantilla, tomada de la imagen subida; el 750/300
   se queda como red por si no hay medidas. Fijo recortaba todo lo que no midiera
   exactamente 2,5:1, y sin avisar. */
.jri-banner-card {
  display: block;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: var(--jri-banner-ar, 750 / 300);
}

/* --- Tres por fila ---
   `minmax(0, 1fr)` y no `1fr`: `1fr` equivale a `minmax(auto, 1fr)`, así que
   una celda cuyo contenido no cabe hace crecer su columna y la rejilla
   desborda su contenedor. Es lo que sacó los tres cuadros del panel lateral
   de Drigo 53 px por la derecha.

   Y la proporción **no puede ser la fija de 750/300**: una fila de tres es
   mucho más estrecha que una de dos, y `cover` recortaría media imagen. La
   manda la plantilla, tomada de la imagen que se subió. */
.jri-banners-triple .jri-banners-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* La proporción ya la pone la regla de arriba desde la plantilla. */
/* Con segunda imagen para móvil el marcado es `<picture>`, en línea por
   defecto: sin esto no ocupa la tarjeta. */
.jri-banner-card picture, .jri-banner-wide picture { display: block; width: 100%; height: 100%; }
.jri-banner-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.jri-banner-card:hover img { transform: scale(1.04); }

/* La proporción de móvil la manda la plantilla, tomada de la imagen subida.
   Sin ella se queda la de siempre. */
@media (max-width: 767px) {
  .jri-banner-card { aspect-ratio: var(--jri-banner-ar-movil, 750 / 300); }
}

/* =================================================================
   BANNERS SECUNDARIOS
   ================================================================= */
.jri-banners-secondary .jri-container { display: flex; flex-direction: column; gap: var(--space-5); }
.jri-banner-wide { display: block; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-card); }
.jri-banner-wide img { width: 100%; height: auto; }


/* --- responsive (del bloque común del diseño) --- */
@media (max-width: 767px) {
  .jri-banners-grid,
  .jri-banners-triple .jri-banners-grid { grid-template-columns: 1fr; }
}