/* ==========================================================================

   Slider fotografico

   ==========================================================================

   Versione: 1.0.1

   ========================================================================== */





/* --------------------------------------------------------------------------

   Contenitore principale

   -------------------------------------------------------------------------- */



.slider {

    position: relative;

    width: 98%;

    overflow: hidden;

    margin: 0 auto;



    /*

     * Manteniamo lo stesso rapporto su tutti i dispositivi.

     * In questo modo lo slider non cambia proporzioni passando

     * dal desktop allo smartphone.

     */

    aspect-ratio: 16 / 9;

    background-color: #000;

}





/* --------------------------------------------------------------------------

   Singola slide

   -------------------------------------------------------------------------- */



.slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    transition: opacity 1s ease-in-out;

}





/* --------------------------------------------------------------------------

   Slide attiva

   -------------------------------------------------------------------------- */



.slide.active {

    opacity: 1;

    z-index: 1;

}





/* --------------------------------------------------------------------------

   Immagine

   -------------------------------------------------------------------------- */



.slide img {

    display: block;

    width: 100%;

    height: 100%;



    /*

     * L'immagine riempie completamente il contenitore.

     * Se il rapporto dell'immagine è diverso da 16:9,

     * una parte può essere ritagliata.

     */

    object-fit: cover;

}





/* --------------------------------------------------------------------------

   Pulsanti di navigazione

   -------------------------------------------------------------------------- */



.slider-prev,

.slider-next {

    position: absolute;

    top: 50%;

    z-index: 2;

    transform: translateY(-50%);

    width: 45px;

    height: 65px;

    border: 0;

    background: rgba(0, 0, 0, 0.35);

    color: #fff;

    font-size: 30px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;



    /*

     * Rimuoviamo il bordo di default che alcuni browser

     * possono applicare ai pulsanti.

     */

    outline: none;

    transition:

        background-color 0.2s ease,

        opacity 0.2s ease;

}





/* --------------------------------------------------------------------------

   Posizione pulsante precedente

   -------------------------------------------------------------------------- */



.slider-prev {

    left: 10px;

}





/* --------------------------------------------------------------------------

   Posizione pulsante successivo

   -------------------------------------------------------------------------- */



.slider-next {

    right: 10px;

}





/* --------------------------------------------------------------------------

   Effetto mouse sui pulsanti

   -------------------------------------------------------------------------- */



.slider-prev:hover,

.slider-next:hover {

    background: rgba(0, 0, 0, 0.65);

}





/* --------------------------------------------------------------------------

   Focus da tastiera

   -------------------------------------------------------------------------- */



.slider-prev:focus-visible,

.slider-next:focus-visible {

    outline: 2px solid #fff;

    outline-offset: 2px;

}





/* --------------------------------------------------------------------------

   Dispositivi con schermo piccolo

   -------------------------------------------------------------------------- */



@media (max-width: 600px) {



    .slider-prev,

    .slider-next {

        width: 35px;

        height: 50px;

        font-size: 24px;

    }



    .slider-prev {

        left: 5px;

    }



    .slider-next {

        right: 5px;

    }

}