section.mini-gallery{
    padding-top: 0;

    & > ul.maxwidth{
        display: grid;
        height: 500px;
        grid-template-columns: 2fr repeat(2, 1fr);
        grid-template-rows: repeat(2, 250px);
        grid-template-areas:
            "one two two"
            "one three four";
        box-sizing: border-box;
        list-style: none;
        padding: 0 15px;

        & > li{
            position: relative;

            & > picture{
                display: block;
                width: 100%;
                height: 100%;
                padding: 10px 10px 0 10px;
    
                & > img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            & > h3.smaller{
                position: absolute;
                bottom: 0;
                left: 10px;
                width: calc(100% - 20px);
                height: calc(100% - 10px);
                display: flex;
                align-items: flex-end;
                padding: 10px;
                margin-bottom: 0;
                background: linear-gradient(
                            to bottom,
                            rgba(33, 54, 65, 0) 0%,         /* In alto è 100% trasparente */
                            rgba(33, 54, 65, 0) 55%,        /* Fino al 55% rimane completamente trasparente */
                            rgba(33, 54, 65, 0.07) 58%,     /* Al 45% (scendendo dall'alto, quindi ~58%) è quasi invisibile */
                            rgba(33, 54, 65, 0.25) 66%,     
                            rgba(33, 54, 65, 0.52) 74%,    
                            rgba(33, 54, 65, 0.75) 80%,     /* All'80% inizia la zona testo: lo sfondo è già bello visibile */
                            rgba(33, 54, 65, 0.93) 91%,    
                            rgba(33, 54, 65, 1) 100%        /* Sul fondo (100%) il colore è pieno per dare massimo contrasto */
                        );
                color: var(--white-text);
                font-weight: 500;
            }

            &:is(#one){
                grid-area: one;
            }
            &:is(#two){
                grid-area: two;
            }
            &:is(#three){
                grid-area: three;
            }
            &:is(#four){
                grid-area: four;
            }
        }
    }
}



section.servizi-inc > div.maxwidth{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    & > ul{
        width: 100%;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 50px;
        border-bottom: 1px dotted var(--bg-blu-chiaro);
        border-top: 1px dotted var(--bg-blu-chiaro);
        padding: 30px 0;
        margin-top: 20px;

        & > li{
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            color: var(--text-blue);

            & > span{
                font-size: 2em;
                height: 40px;
            }

            & > p{
                line-height: 1em;
                margin: 5px 0 0 0;
            }
        }
    }
}


section.desc-two{
    background-color: var(--bg-azzurro);

    & > div.maxwidth{
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: center;
        align-items: center;
        gap: 50px;

        & > div.text{
            width: 100%;
            flex: 1;
            flex-basis: 400px;
        }

        & > span{
            font-size: 8em;
        }
    }
}


section.disposizione > div.maxwidth{

    & > ul{
        list-style: none;
        padding: 30px 0;

        & > li{
            padding: 15px 5px;
            border-bottom: 1px dashed var(--bg-blu-chiaro);
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 10px;

            &:first-of-type{
                border-top: 1px dashed var(--bg-blu-chiaro);
            }

            & > p > span{
                width: 20px;
            }
        }
    }

    & > a.btn2{
        width: fit-content;
        margin: auto;
        display: block;
        margin-top: 30px;
    }
}


section.googlemaps{

    & > div.maxwidth{
        margin-bottom: 20px;
    }

    & > div#maps-container{
        position: relative;
        width: 100%;
        height: 500px;
        margin-top: 20px;

        & > div.maps-placeholder{
            display: none;
            width: 100%;
            max-width: 1440px;
            height: 100%;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            text-align: center;
            padding: 20px;
            margin: 0 auto;
            border: 1px solid var(--bg-blu-chiaro);
            border-radius: 4px;

            & > p{
                color: var(--black-text);

                & > a{
                    color: var(--text-blue);
                    text-decoration: underline;
                }
            }

            & > button{
                background: #28a745;
                color: var(--black-text);
                border: none;
                margin-top: 20px;
                padding: 10px 20px;
                font-weight: bold;
                cursor: pointer;
                border-radius: 4px;
            }
        }
    }

}

main > :last-child{
    padding-bottom: 0;
}


@media (max-width: 900px){
    section.mini-gallery > ul.maxwidth{
        height: auto;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 250px);
        grid-template-areas:
            "one one"
            "two two"
            "three four";
        padding: 0 15px;

        & > li{
            max-height: 300px;
        }
    }
}

@media (max-width: 550px){
    section.mini-gallery > ul.maxwidth{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 250px);
        grid-template-areas:
            "one"
            "two"
            "three"
            "four";
        padding: 0 15px;
    }
}