/* =================================================================
   BANNERS DOBLES
   ================================================================= */
.jri-banners-double { padding-top: 0; }
.jri-banners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.jri-banner-card {
  display: block;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 750 / 300;
}
/* 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 { grid-template-columns: 1fr; }
}