/* =========================================================
   SINGLE PROJECT - IMMAGINI CON RAPPORTO CONTROLLATO
   ========================================================= */

/*
 * I div Elementor restano liberi di determinare normalmente
 * la propria altezza all'interno del layout.
 *
 * Evitiamo quindi di applicare aspect-ratio direttamente
 * ai flexbox, perché può interferire con il sistema Flexbox
 * utilizzato da Elementor V4.
 */
.project-image-frame-main,
.project-image-frame-pair {
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   IMMAGINE PRINCIPALE - RAPPORTO 3:2
   ========================================================= */

/*
 * Il rapporto 3:2 viene applicato direttamente al link
 * generato dal widget Immagine per il lightbox.
 *
 * In questo modo il rapporto fotografico non modifica
 * le dimensioni del flexbox Elementor che lo contiene.
 */
.project-image-frame-main a {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}


/* =========================================================
   IMMAGINI AFFIANCATE - RAPPORTO 4:3
   ========================================================= */

/*
 * Le due immagini affiancate utilizzano un rapporto 4:3,
 * mantenendo così la stessa altezza visiva.
 */
.project-image-frame-pair a {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}


/* =========================================================
   ADATTAMENTO DELLE IMMAGINI
   ========================================================= */

/*
 * Le immagini riempiono completamente il rapporto stabilito
 * senza essere deformate.
 *
 * object-fit: cover mantiene le proporzioni originali
 * e ritaglia solamente le parti eccedenti.
 */
.project-image-frame-main img,
.project-image-frame-pair img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
}