/* =========================
   GALLERY
========================= */

#gallery{

    background:#15110d;

    color:white;

}

#gallery .section-title h2{

    font-size:55px;

    color:#f4e5b4;

    text-shadow:0 2px 12px rgba(0,0,0,.25);

}

.gallery-title{

    text-align:center;

    margin-bottom:36px;

}


/* =========================
   GALLERY GRID
========================= */

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

    align-items:start;

}


/* =========================
   ELEMENTO FOTOGRAFICO
========================= */

.gallery-item{

    margin:0;

    width:100%;

    overflow:hidden;

    border-radius:30px;

    box-shadow:0 20px 45px rgba(0,0,0,.14);

    position:relative;

    isolation:isolate;

}

.gallery-item img{

    display:block;

    width:100%;

    height:auto;

    object-fit:contain;

    transition:transform .7s ease;

}

.gallery-item:hover img{

    transform:scale(1.035);

}


/* ==========================================
   GALLERIA PAGINA
   galleria.html
========================================== */


/* =========================
   HERO
========================= */

.gallery-hero{

    padding:140px 0 90px;

    text-align:center;

    background:#f7f4ee;

}

.gallery-label{

    display:inline-block;

    color:var(--color-accent);

    font-size:var(--label-size);

    letter-spacing:5px;

    margin-bottom:25px;

}

.gallery-hero h1{

    font-family:"Cormorant Garamond",serif;

    font-size:var(--page-title-size);

    font-weight:500;

    line-height:1;

    color:#1b1b1b;

    margin:0;

}

.gallery-line{

    width:70px;

    height:1px;

    background:#8b6b3e;

    margin:32px auto;

}

.gallery-hero p{

    max-width:650px;

    margin:auto;

    color:#666;

    font-size:var(--body-size);

    line-height:1.9;

}


/* =========================
   IMMAGINE PRINCIPALE
========================= */

.gallery-feature{

    padding:88px 0 90px;

    background:#fff;

}

.gallery-feature-image{

    width:100%;

    overflow:hidden;

    border-radius:32px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.gallery-feature-image img{

    display:block;

    width:100%;

    height:620px;

    object-fit:cover;

    transition:transform .7s ease;

}

.gallery-feature-image:hover img{

    transform:scale(1.025);

}

.gallery-caption{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:22px;

    border-bottom:1px solid #ddd;

    padding-bottom:22px;

}

.gallery-caption span{

    color:#8b6b3e;

    font-size:11px;

    letter-spacing:3px;

}

.gallery-caption p{

    margin:0;

    font-family:"Cormorant Garamond",serif;

    font-size:22px;

    font-style:italic;

    color:#555;

}


/* =========================
   SEZIONI
========================= */

.gallery-section{

    padding:72px 0;

    background:#fff;

}

.gallery-light{

    background:#f7f4ee;

}

.gallery-heading{

    max-width:720px;

    margin-bottom:var(--block-spacing);

}

.gallery-heading span{

    display:block;

    color:#8b6b3e;

    font-size:11px;

    letter-spacing:4px;

    margin-bottom:20px;

}

.gallery-heading h2{

    font-family:"Cormorant Garamond",serif;

    font-size:var(--section-title-size);

    font-weight:500;

    line-height:1.1;

    color:#1b1b1b;

    margin:0 0 22px;

}

.gallery-heading p{

    max-width:650px;

    color:#666;

    font-size:var(--body-size);

    line-height:1.9;

    margin:0;

}


/* =========================
   ELEMENTI FOTOGRAFICI
========================= */

.gallery-page-item{

    margin:0;

    overflow:hidden;

    border-radius:30px;

    position:relative;

    isolation:isolate;

    box-shadow:0 20px 45px rgba(0,0,0,.14);

}

.gallery-page-item img{

    display:block;

    width:100%;

    height:auto;

    object-fit:contain;

    transition:transform .7s ease;

}

.gallery-page-item:hover img{

    transform:scale(1.035);

}


/* ==========================================
   GALLERY RITRATTI
========================================== */

.gallery-grid-portrait{

    display:grid;

    grid-template-columns:1.05fr .9fr 1.05fr;

    gap:28px;

    align-items:start;

}

.gallery-grid-portrait .gallery-item{

    margin:0;

    width:100%;

    overflow:hidden;

    border-radius:30px;

    box-shadow:0 20px 45px rgba(0,0,0,.14);

}


/* disposizione leggermente irregolare */

.gallery-grid-portrait .gallery-item:nth-child(1){

    margin-top:55px;

}

.gallery-grid-portrait .gallery-item:nth-child(2){

    margin-top:0;

}

.gallery-grid-portrait .gallery-item:nth-child(3){

    margin-top:90px;

}

.gallery-grid-portrait .gallery-item img{

    display:block;

    width:100%;

    height:auto;

    object-fit:contain;

    transition:transform .7s ease;

}

.gallery-grid-portrait .gallery-item:hover img{

    transform:scale(1.035);

}


/* ==========================================
   VIAGGI E LUOGHI
========================================== */

.gallery-mosaic{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:28px;

    max-width:1050px;

    margin:0 auto;

    align-items:start;

}


/* tutte le fotografie */

.gallery-mosaic .gallery-item{

    width:100%;

    height:430px;

    margin:0;

    overflow:hidden;

    border-radius:30px;

    box-shadow:0 20px 45px rgba(0,0,0,.14);

    position:relative;

    isolation:isolate;

}


/* immagini uniformi */

.gallery-mosaic .gallery-item img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transition:transform .7s ease;

}


/* hover */

.gallery-mosaic .gallery-item:hover img{

    transform:scale(1.035);

}


/* disposizione leggermente irregolare */

.gallery-mosaic .gallery-item:nth-child(1){

    margin-top:45px;

}

.gallery-mosaic .gallery-item:nth-child(2){

    margin-top:0;

}

.gallery-mosaic .gallery-item:nth-child(3){

    margin-top:35px;

}

.gallery-mosaic .gallery-item:nth-child(4){

    margin-top:-15px;

}


/* annulliamo completamente
   le vecchie proporzioni */

.gallery-mosaic .mosaic-large,
.gallery-mosaic .mosaic-small,
.gallery-mosaic .mosaic-wide,
.gallery-mosaic .mosaic-landscape,
.gallery-mosaic .mosaic-portrait{

    grid-column:auto;

    grid-row:auto;

    aspect-ratio:auto;

    min-height:0;

}


/* ==========================================
   VIAGGI E LUOGHI - TABLET
========================================== */

@media (max-width:900px){

    .gallery-mosaic{

        grid-template-columns:1fr 1fr;

        gap:24px;

    }

    .gallery-mosaic .gallery-item{

        height:380px;

    }

    .gallery-mosaic .gallery-item:nth-child(1),
    .gallery-mosaic .gallery-item:nth-child(2),
    .gallery-mosaic .gallery-item:nth-child(3),
    .gallery-mosaic .gallery-item:nth-child(4){

        margin-top:0;

    }

}


/* ==========================================
   VIAGGI E LUOGHI - MOBILE
========================================== */

@media (max-width:650px){

    .gallery-mosaic{

        grid-template-columns:1fr;

        gap:24px;

    }

    .gallery-mosaic .gallery-item{

        height:auto;

    }

    .gallery-mosaic .gallery-item img{

        width:100%;

        height:auto;

        object-fit:contain;

    }

}

/* ==========================================
   VITA E INCONTRI
========================================== */

.gallery-grid-events{

    display:grid !important;

    grid-template-columns:1.15fr .85fr !important;

    gap:30px !important;

    max-width:1050px !important;

    margin:0 auto !important;

    align-items:start !important;

}


/* tutte le immagini hanno la stessa struttura */

.gallery-grid-events .gallery-item{

    width:100% !important;

    height:auto !important;

    min-height:0 !important;

    max-height:none !important;

    margin:0 !important;

    overflow:hidden !important;

    border-radius:30px !important;

    box-shadow:0 20px 45px rgba(0,0,0,.14);

}


/* disposizione irregolare */

.gallery-grid-events .gallery-item:nth-child(1){

    margin-top:0 !important;

}

.gallery-grid-events .gallery-item:nth-child(2){

    margin-top:80px !important;

}

.gallery-grid-events .gallery-item:nth-child(3){

    margin-top:35px !important;

}

.gallery-grid-events .gallery-item:nth-child(4){

    margin-top:-20px !important;

}

.gallery-grid-events .gallery-item img{

    display:block !important;

    width:100% !important;

    height:auto !important;

    min-height:0 !important;

    max-height:none !important;

    object-fit:contain !important;

    transition:transform .7s ease;

}

.gallery-grid-events .gallery-item:hover img{

    transform:scale(1.035);

}

.gallery-grid-events .gallery-item-tall{

    height:auto !important;

}


/* ==========================================
   TRA LE PAGINE
========================================== */

.gallery-writing{

    background:#f7f4ee;

}

.gallery-writing-layout{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:30px;

    align-items:start;

}


/* immagine principale */

.writing-main{

    height:auto;

    margin-top:35px;

}


/* tutte le immagini hanno
   la stessa struttura */

.gallery-writing-layout .gallery-page-item{

    height:auto;

    overflow:hidden;

    border-radius:30px;

    box-shadow:0 20px 45px rgba(0,0,0,.14);

}


/* immagini */

.gallery-writing-layout .gallery-page-item img{

    display:block;

    width:100%;

    height:auto;

    object-fit:contain;

    transition:transform .7s ease;

}

.gallery-writing-layout .gallery-page-item:hover img{

    transform:scale(1.035);

}


/* colonna laterale */

.writing-side{

    display:flex;

    flex-direction:column;

    gap:30px;

}


/* prima foto laterale */

.writing-side .gallery-page-item:nth-child(1){

    margin-top:0;

}


/* seconda foto laterale */

.writing-side .gallery-page-item:nth-child(2){

    margin-top:45px;

}


/* ==========================================
   EFFETTO GENERALE
========================================== */

.gallery-page-item,
.gallery-feature-image,
.gallery-item{

    overflow:hidden;

    isolation:isolate;

}


/* uniformiamo il trattamento delle immagini */

.gallery-page-item img,
.gallery-feature-image img,
.gallery-item img{

    display:block;

}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:900px){

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

    }


    .gallery-grid-portrait{

        grid-template-columns:repeat(2,1fr);

    }


    .gallery-grid-portrait .gallery-item:nth-child(1),
    .gallery-grid-portrait .gallery-item:nth-child(2),
    .gallery-grid-portrait .gallery-item:nth-child(3){

        margin-top:0;

    }


    .gallery-mosaic{

        grid-template-columns:1fr 1fr;

        gap:24px;

    }


    .gallery-mosaic .gallery-item:nth-child(1),
    .gallery-mosaic .gallery-item:nth-child(2),
    .gallery-mosaic .gallery-item:nth-child(3),
    .gallery-mosaic .gallery-item:nth-child(4){

        margin-top:0;

    }


    .gallery-grid-events{

        grid-template-columns:1fr 1fr !important;

    }


    .gallery-writing-layout{

        grid-template-columns:1fr 1fr;

    }

}


@media (max-width:650px){

    .gallery-grid{

        grid-template-columns:1fr;

    }


    .gallery-grid-portrait{

        grid-template-columns:1fr;

    }


    .gallery-mosaic{

        grid-template-columns:1fr;

        gap:24px;

    }


    .gallery-mosaic .gallery-item:nth-child(1),
    .gallery-mosaic .gallery-item:nth-child(2),
    .gallery-mosaic .gallery-item:nth-child(3),
    .gallery-mosaic .gallery-item:nth-child(4){

        margin-top:0;

    }


    .gallery-grid-events{

        grid-template-columns:1fr !important;

    }


    .gallery-writing-layout{

        grid-template-columns:1fr;

    }


    .gallery-grid-portrait .gallery-item:nth-child(1),
    .gallery-grid-portrait .gallery-item:nth-child(2),
    .gallery-grid-portrait .gallery-item:nth-child(3){

        margin-top:0;

    }


    .gallery-grid-events .gallery-item:nth-child(1),
    .gallery-grid-events .gallery-item:nth-child(2),
    .gallery-grid-events .gallery-item:nth-child(3),
    .gallery-grid-events .gallery-item:nth-child(4){

        margin-top:0 !important;

    }


    .writing-main,
    .writing-side .gallery-page-item:nth-child(1),
    .writing-side .gallery-page-item:nth-child(2){

        margin-top:0;

    }


    .gallery-hero h1{

        font-size:58px;

    }


    .gallery-heading h2{

        font-size:46px;

    }


    .gallery-feature-image img{

        height:auto;

    }


    .gallery-caption{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

}

/* ==========================================
   VIAGGI E LUOGHI
   STESSA STRUTTURA DELLE ALTRE GALLERIE
========================================== */

.gallery-grid-travel{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:30px;

    max-width:1050px;

    margin:0 auto;

    align-items:start;

}


/* tutte le fotografie */

.gallery-grid-travel .gallery-item{

    width:100%;

    height:auto;

    margin:0;

    overflow:hidden;

    border-radius:30px;

    box-shadow:0 20px 45px rgba(0,0,0,.14);

}


/* immagini */

.gallery-grid-travel .gallery-item img{

    display:block;

    width:100%;

    height:auto;

    object-fit:contain;

    transition:transform .7s ease;

}


/* hover */

.gallery-grid-travel .gallery-item:hover img{

    transform:scale(1.035);

}


/* disposizione irregolare */

.gallery-grid-travel .gallery-item:nth-child(1){

    margin-top:55px;

}

.gallery-grid-travel .gallery-item:nth-child(2){

    margin-top:0;

}

.gallery-grid-travel .gallery-item:nth-child(3){

    margin-top:45px;

}

.gallery-grid-travel .gallery-item:nth-child(4){

    margin-top:0;

}


/* ==========================================
   TABLET
========================================== */

@media (max-width:900px){

    .gallery-grid-travel{

        grid-template-columns:1fr 1fr;

    }

    .gallery-grid-travel .gallery-item:nth-child(1),
    .gallery-grid-travel .gallery-item:nth-child(2),
    .gallery-grid-travel .gallery-item:nth-child(3),
    .gallery-grid-travel .gallery-item:nth-child(4){

        margin-top:0;

    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width:650px){

    .gallery-grid-travel{

        grid-template-columns:1fr;

    }

}