.mission-piramide{


    padding: 5rem 0 0;


    article{
            width: 850px;
            max-width: 100%;
            padding: 0 !important;


            /* Triangolo isoscele con punta in alto e base parallela al bordo inferiore */
            &::before{
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                height: 100%;
                width: 950px; /* regola se necessario */
                max-width: 140%;
                background: linear-gradient(30deg, var(--bianco) -10%, var(--colore01chiaro2) 90%), var(--colore01chiaro) 140%;
                -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
                clip-path: polygon(50% 0, 100% 100%, 0 100%);
                z-index: 0;
                pointer-events: none;
            }


        }


    .blocco-val{
        position: relative;
        display: flex;
        align-items: center;

        padding: 2rem 0;
        gap: 2rem;

        @media only screen and (max-width: 850px) {
            padding: 2rem 5svw;
            gap: 1.5rem;
        }

        &::after{
            content: '';
            position: absolute;
            display: block;
            width: 100svw;
            height: 8px;
            bottom: 0;
            left: calc(50% - 50svw);
            background: var(--bianco);
            pointer-events: none;
            z-index: 1;
        }


        .num{
            width: max-content;
            font-size: clamp(3.5rem, 5vw, 5rem);
            line-height: 1;
            color: var(--colore01);
            font-family: var(--carattere02);
            font-weight: 700;
        }

        .tit{
            font-size: clamp(1.3rem, 3vw, 2rem);
            text-transform: uppercase;


        }

        
    }
}



.cont-miss{

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

    @media only screen and (max-width: 850px){
            margin-top: 2rem;
            order: 999;
        }

        @media only screen and (max-width: 600px){
            grid-template-columns: 1fr;
        }

    .blocco-miss{
        
        background: var(--bianco);
        border-radius: 1rem;

        display: flex;
        flex-direction: column;
        padding: 2rem;

        box-shadow: 0 0 10px -1px rgba(0, 0, 0, 0.2) inset;

        

        .tit{
            font-size: 1.4rem;
            color: var(--colore01);
            text-transform: uppercase;
            line-height: 1.2;
        }


            @media only screen and (min-width: 480px) {
                /* Ogni quattro elementi: 1, 5, 9, ... */
            &:nth-child(4n+1){
                border-top-left-radius: 6rem;
                border-top-right-radius: 3rem;
                border-bottom-left-radius: 3rem;
            }

            &:nth-child(4n+2){
                border-top-right-radius: 6rem;
                border-top-left-radius: 3rem;
                border-bottom-right-radius: 3rem;
            }

            &:nth-child(4n+3){
                border-bottom-left-radius: 6rem;
                border-top-left-radius: 3rem;
                border-bottom-right-radius: 3rem;
            }

            &:nth-child(4n+4){
                border-bottom-right-radius: 6rem;
                border-top-right-radius: 3rem;
                border-bottom-left-radius: 3rem;
            }

            /* Ogni due elementi: 1, 3, 5, 7... */

            &:nth-child(2n+1){
                text-align: right;
                padding-left: 3rem;
            }
            
            &:nth-child(2n+2){
                text-align: left;
                padding-right: 3rem;
            }

            /* I primi due si, poi il terzo e quarto no, poi quinto e sesto si, settimo e ottavo no... */

            &:nth-child(-n+2),
            &:nth-child(n+5){
                padding-top: 3rem;
                justify-content: flex-end;
            }

            &:nth-child(n+3):nth-child(-n+4){
                padding-bottom: 3rem;
                justify-content: flex-start;
            }


            @media only screen and (max-width: 600px){
                padding: 2rem !important;
                text-align: center !important;
                justify-content: center !important;
                border-radius: 2rem !important;
            }


            }
        
    }


    
}





.mission-approfondimenti{
    #JS_approfondimenti{
        overflow : visible;

        .cella{
            width: calc( 100% / 4 - 2rem );
            min-width: 240px;
            max-width: 70svw;
            margin: 0 1rem;

            min-height: 100%;
        }

        .flickity-viewport{
            overflow: visible !important;
        }

        .flickity-page-dots {
            .dot{
                background: var(--colore01chiaro2);
            }
        }
    }
}