/* ===== Layout genérico con imagen a la derecha ===== */
.hh-media {
  display: grid;
  grid-template-columns: 1fr minmax(160px, 260px);
  gap: 16px;
  align-items: center;
}

/* Asegura que el contenido del componente quede en la 1ª columna */
.hh-media .hhq__row,
.hh-media .hhcount__row { grid-column: 1; }

/* Columna de la imagen */
.hh-media__aside { grid-column: 2; }
.hh-media__img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(0,0,0,.03);
}

/* Variante para imágenes no cuadradas (opcional) */
.hh-media__img--wide { aspect-ratio: 4/3; }
.hh-media__img--tall { aspect-ratio: 3/4; }

/* Responsive: apilado en mobile con la imagen debajo */
@media (max-width: 767.98px){
  .hh-media { grid-template-columns: 1fr; }
  .hh-media__aside { grid-column: 1; order: 2; }
}