section.hero-section {
    width: 100%;
    height: auto;
    background-color: #393939;
    color: var(--white-text);
    padding: 100px 0 150px;
    position: relative;

    & > picture{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &  > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    & > div.maxwidth {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 30px;
        z-index: 1;

        & > div.text{
            width: 100%;
            text-align: center;

            & > *{
                text-shadow: 1px 1px 0px black;
            }
        }
    }
}

section.contatti{
    background-color: var(--bg-azzurro);
    padding: 0px 15px 50px;

    & > div.maxwidth{
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: white;
        top: -180px;
        position: relative;
        border-radius: 30px;
        box-shadow: 0 0 30px 0px rgba(112, 118, 124, 0.212);
        padding: 50px 0;

        & > div.contact-cont{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas:"assistenza assistenza" 
                                "one two";
            gap: 30px;
            margin-top: 30px;

            & > section.cards{
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;
                padding: 20px;
                background-color: var(--bg-azzurro);
                border-radius: 20px;

                &:nth-child(1){
                    grid-area: assistenza;
                }
                &:nth-child(2){
                    grid-area: one;
                }
                &:nth-child(3){
                    grid-area: two;
                }

                & > div.picture{
                    width: 100%;
                    text-align: center;

                    & > img{
                        width: 100px;
                    }
                }

                & > div.info{
                    width: 100%;
                    height: 100%;

                    & > h3{
                        width: 100%;
                        text-align: center;
                        border-bottom: 1px dotted var(--blu-logo-scuro);
                    }

                    & > span{
                        display: flex;
                        flex-wrap: nowrap;
                        flex-direction: column;
                        align-items: center;
                        text-align: center;
                        padding: 20px 20px 0 20px;
                        gap: 15px;
                        margin-top: 20px;

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

                        & > div.text{
                            display: flex;
                            flex-direction: column;

                            & > a{
                                padding: 13px 0;
                                color: inherit;
                            }
                        }
                    }
                }

            }
        }
    }
}



@media (max-width: 900px) {
    section.contatti{
        background-color: unset;
        padding: 0 !important;

        & > div.maxwidth{
            border-radius: unset;
            box-shadow: none;
            top: 0;
            padding: 80px 25px;

            & > :where(p, h2){
                text-align: center;
            }

            & > div.contact-cont{
                width: 100%;
                grid-template-columns: 100%;
                grid-template-rows: auto;
                grid-template-areas:"assistenza"
                                    "one"
                                    "two";
            }

            & > div.contact-cont > section.cards{
                width: 100%;
                max-width: 600px;
                flex-direction: row;
                margin: 0 auto;

                & > div.picture{
                    width: auto;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 20px;
                }

                & > div.info{
                    & > h3{
                        text-align: left;
                        margin-bottom: 10px;
                    }

                    & > span{
                        flex-direction: row;
                        text-align: left;
                        background-color: unset;
                        padding: 0;

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

                        &:last-of-type > span{
                            margin-top: 0;
                        }
                    }

                    & > div.text{
                        margin-left: 8px;
                        justify-content: center;

                        & > b{
                            display: none;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 425px){
    section.contatti > div.maxwidth > div.contact-cont > section.cards{
        flex-direction: column;

        & > div.info{
            & > span{
                justify-content: center;
            }

            & > h3{
                text-align: center;
            }
        }

        & > div.picture{
            margin-right: 0;
            margin-bottom: 20px;
        }
    }
}