/* 
 * Archivo específico para corregir la visualización de imágenes en grids
 * Este archivo tiene prioridad sobre otros estilos para asegurar la correcta visualización
 */

/* Estructura base para el contenedor de imágenes */
.js-item-image-padding {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Estilo para el enlace dentro del contenedor */
.js-item-image-padding a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Estilo para las imágenes */
.js-item-image-padding a img {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    margin: 0 auto;
}

/* Eliminar cualquier transformación que pueda causar desalineación */
.js-item-image-padding img.img-absolute,
.js-item-image-padding img.img-absolute-centered {
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
}

/* Asegurar que la imagen principal y secundaria tienen el mismo tratamiento */
.js-item-image, 
.js-item-image-secondary {
    position: relative !important;
    max-width: 90% !important;
    max-height: 90% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
}

/* Asegurar que el contenedor mantiene su aspecto */
.item-image {
    margin-bottom: 15px;
}