.STILE_building-duecol{

    display: flex;
    flex-direction: column;
    padding: 3rem 0;
    row-gap: 3rem;
    
    article{

        position: relative;
        display: grid;
        grid-template-columns: 50% auto;
        grid-column-gap: 8rem;

        /*padding: 1rem !important;*/

        text-align: justify;

/*
        &:before{
            content: "";
            display: block;
            position: absolute;
            width: calc(100% - 160px);
            height: 100%;
            top: 0;
            left: 0;
            border: 1px solid var(--colore01);
            margin-bottom: 2rem;
            z-index: -1;

            @media only screen and (max-width: 980px) {
                width: calc(100%);
                left: 0 !important;
                right: 0 !important;
            }

        }


        &:after{
            content: "";
            display: block;
            position: absolute;
            width: calc(16px * 46);
            height: 100%;
            top: 0;
            background-image: url(/css/images/bgrighe.png);
            background-size: 128px 1px;            
            margin-bottom: 2rem;
            opacity: 0.2;
            z-index: -1;

            @media only screen and (max-width: 1260px) {
                width: calc(16px * 30);
            }


            @media only screen and (max-width: 980px) {
                width: calc(16px * 12);
                left: auto !important;
                right: 0 !important;
            }

        }


        &:nth-child(even){

            grid-template-columns: 50% auto;

            &::after{
                left: 160px;
            }

            &::before{
                left: 160px;
            }

            >*{

                &:first-child{
                    order: 99;
                }
            }
        }

        &:nth-child(odd){

            grid-template-columns: auto 50%;

            &::after{
                right: 160px;
            }

            &::before{
                right: 160px;
            }

            >*{

                &:first-child{
                    order: -1;
                }
            }
        }
*/




        &:before{
            content: "";
            display: block;
            position: absolute;
            width: 40%;
            height: calc(100% - 180px);
            top: 90px;
            left: 40%;
            border: 15px solid var(--colore01);
            margin-bottom: 2rem;
            z-index: -1;

            opacity: 0.13;
            background: var(--colore01);

            @media only screen and (max-width: 980px) {
                width: 80%;
                height: 50%;
                top: 45%;
                left: 10% !important;
                right: 10% !important;
            }
        }


        &:after{
            content: "";
            display: block;
            position: absolute;
            width: 50%;
            height: calc(100% - 80px);
            top: 40px;
            z-index: 8;
            border: 1px solid var(--colore01);
            mix-blend-mode: hard-light;

            @media only screen and (max-width: 980px) {
                width: 90%;
                height: 50%;
                top: 48%;
                left: 5% !important;
                right: 5% !important;
            }

}


        &:nth-child(even){

            grid-template-columns: 50% auto;

            &::after{
                left: auto;
                right: 47%;
            }

            &::before{
                right: 40%;
                left: auto;
            }

            >*{

                &:first-child{
                    order: 99;
                }
            }
        }

        &:nth-child(odd){

            grid-template-columns: auto 50%;

            &::after{
                left: 47%;
            }

            &::before{
                /*! right: 160px; */
            }

            >*{

                &:first-child{
                    order: -1;
                }
            }
        }




        @media only screen and (max-width: 1260px) {
            column-gap: 4rem;
        }

        @media only screen and (max-width: 980px) {
            grid-template-columns: 1fr !important;

            row-gap: 2rem;

            >*:has(img){
                order: 999 !important;
            }
        }
        
        >*{
            .centra, &.centra{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 1rem;
            }

            .centra-y, &.centra-y{
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 1rem;
            }

            .centra-x, &.centra-x{
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1rem;
            }

            .mob-primo, &.mob-primo{

                @media only screen and (max-width: 980px) {
                    order: -1;
                }
            }
            
        }

    }


}



header, .hero {
    & #slidepreview, & #slidepreview1 {
        .intro{

            width: 90svw !important;
            max-width: 90svw !important;            
        }
    }
}



.gallery{
    width: 100svw !important;
    max-width: 100svw !important;

    .cella {

        	overflow: clip;
			display: block;
			width: 380px;
            max-width: 70svw;
			margin: 0 .5rem;

			&::before {
				content: '';
				display: block;
				padding-top: 100%;
			}

			picture,
			#picture {
				position: absolute;
        		overflow: clip;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;

				img {
					position: absolute;
					margin: auto auto;
					left: -10000%;
					right: -10000%;
					top: -10000%;
					bottom: -10000%;
					/*queste caratteristiche sotto x effetto COVER*/
                    max-width: 10000% !important;
                    min-width: 1000%;
                    min-height: 1000%;
                    -webkit-transform: scale(0.1);
                    transform: scale(0.1);
                    object-fit: cover;
					/*queste caratteristiche sotto x effetto CONTAIN
					object-fit: contain;
					max-width: 100%;
					max-height: 100%;
					-webkit-transform: scale(1);
					transform: scale(1);*/
				}
			}
		}
}