/* ================= ABOUT ================= */
.about-container {
    display: flex;
    /* gap: min(80px, 3%); */
    gap: 30px;
    margin-top: 10px;
    margin-bottom: 60px;
    padding: 50px 0px;
    padding-bottom: 30px;
    justify-content: space-between; /* Centra orizzontalmente gli elementi */
    align-items: center; /* Centra verticalmente gli elementi */
    flex-wrap: wrap; /* Permette di andare a capo se lo spazio è insufficiente */
    /* border: 1px solid #ccc; */
    background-color: var(--bkg-color-2);
}

.about-subitem-photo, .about-subitem-desc, .about-subitem-reel {
    max-width: 100%; /* Impedisce agli elementi di superare il loro contenitore */
    /* border: 1px solid #ccc; */
}

.about-subitem-photo {
    min-width: 250px; 
    max-width: 300px;
    max-height: 100%;
    /* flex: 1; */
    object-fit: contain; /* Mantiene le proporzioni senza distorsioni */
    margin-left: 30px;
    border-radius: 50%; /* Rende l'immagine circolare */
}

.about-subitem-desc {
    flex: 2;
    min-width: 300px; 
    max-height: 500px;
}

.about-subitem-reel {
    flex: 3;
    min-width: 600px; 
    max-height: 800px;
    padding-right: 30px;
}

    .about-subitem-photo img, .about-subitem-reel video {
        max-width: 100%; /* Assicura che le immagini si adattino alla larghezza del contenitore */
        height: auto; /* Mantiene l'aspect ratio */
        display: block; /* Elimina gli spazi bianchi sotto l'immagine */
    }

/* ================= REFERENCES ================= */
.refs {
    margin: 20px auto;
    margin-bottom: 20px;
}

    .refs a {
        display: inline-block; /* Assicura che i link siano trattati come blocchi in linea */
        margin-top: 30px;
        margin-bottom: 16px;
        margin-left: 5px;
    }

    .refs p {
        margin-top: 6px;
        margin-bottom: 0px;
    }

        .refs p a {
            font-weight: bold;
            color: var(--text-dark);
            margin: 0px;
        }

.hover-refs {
    position: relative;
    display: inline-block; /* Per mantenere il layout delle immagini */
    width: 56px; /* Imposta la larghezza desiderata */
    height: 56px; /* Altezza uguale */
}

    /* Immagini OFF e ON */
    .hover-refs img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: opacity 0.2s ease-in-out; /* Effetto fade */
        filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3)); /* Ombra su entrambe le immagini */
    }

        /* Immagine ON nascosta di default */
        .hover-refs img.on {
            opacity: 0;
        }

    .hover-refs:hover img.on {
        opacity: 1; /* Mostra l'immagine ON */
        transform: scale(1.01);
    }

/* ================= RESPONSIVE ================= */
@media (max-width: 1280px) {
    .about-container {
        gap: 30px;
        padding-bottom: 0px;
    }

    .about-subitem-desc {
        margin-right: 30px;
    }

    .about-subitem-reel {
        min-width: 700px; 
        padding: 0px;
    }
}

@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        gap: 30px;
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .about-subitem-photo {
        min-width: 150px; 
        max-width: 200px;
        min-height: 150px; 
        max-height: 200px;
        margin-top: 20px;
        margin-left: 0px;
    }

    .about-subitem-desc {
        margin: 0px 30px;
        min-width: 200px; 
    }

    .about-subitem-reel {
        flex: none; /* Disabilita il comportamento flex */
        max-width: 100%; /* Occupa tutta la larghezza del container */
        min-width: 200px; 
    }

    /* .refs {
        margin: 0px;
    } */

        .refs a {
            margin-top: 8px;
            margin-bottom: 10px;
        }

        .refs p {
            margin-top: 6px;
        }
}