/* Matter Loop Image — destaque à frente, second_image no hover. */

/* O invólucro do widget num container flex encolhe para o conteúdo, e uma
   imagem a 100% de um pai encolhido colapsa (o mesmo que aconteceu ao slider
   do preço). O widget ocupa sempre a largura disponível. */
.mt-widget-matter-loop-image { width: 100%; }
.mt-widget-matter-loop-image .mt-widget-container { width: 100%; }

.mli {
  position: relative; display: block; overflow: hidden; width: 100%;
}
.mli__first { display: block; width: 100%; height: auto; }
.mli[data-ratio] { aspect-ratio: var(--mli-ratio); }
.mli[data-ratio] .mli__first {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.mli__second {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .25s ease;
}
.mli:hover .mli__second,
.mli:focus-visible .mli__second { opacity: 1; }

/* Sem rato (touch) o hover não existe: a segunda imagem fica quieta. */
@media (hover: none) {
  .mli:hover .mli__second { opacity: 0; }
}