.clientesTrabajos{
    /* height: 35rem;  */
    height: auto; width: var( --width--conteiner ); 
    padding: 2rem 0rem 2rem 0rem; margin: 0rem auto 7rem auto; 

    background-color:  var( --whiteDarck );
}
    .clt__conteiner__top{
        width: 100%; 
        padding: 4rem 4rem 3rem 4rem;

        color: var(--black);
        letter-spacing: 0.12rem;

        display: flex; flex-direction: column; 
        justify-content: center; align-items: center;
        
    }
        .clt__title{
            height: 6rem; width: 100%; 
            padding: 0.8rem;

            text-align: center;
            display: flex; flex-direction: row; 
            justify-content: center; align-items: center;
         
            font-size: 3rem;
            color: var( --black );
        }
        .clt__subtitle{
            width: 100%;

            color: var( --orange );
            font-size: 18px;
 
        }
        .clt__text{
            padding: 1.5rem 7rem;
            line-height: 32px;
            color: var(--gray);
            letter-spacing: 0.3px;
            /* background-color: rgb(150, 150, 158); */
        }
/*------------------------- G R I L L A -------------------------------------*/

    .clt__conteiner{
        height: 223rem; width: 100%; 
        padding: 0rem 0rem; margin: 0% 0rem;
        overflow: hidden;

        display: grid;
        gap: 0.5rem ;
        /* background-color: aqua; */
        grid-template-columns: repeat( 3 ,  1fr );
        grid-auto-rows: 230px;
        
    }
        .clt__items{
            height: 100%!important; width: 100%; 
            padding: 0%; margin:  0rem;

            border-radius: 4px;
        }
        .clt__items:nth-child(1){
            grid-column-start: span 2;
            grid-row-start: span 2;
            background-image: url("./../img/house.jpg");
            background-repeat: no-repeat; 
            background-size: cover;

        }
        .clt__items:nth-child(2){
            grid-row-start: span 3;

            background-image: url("./../img/Cerca\ de\ Madeira_\ 60\ Modelos\,\ Fotos\ e\ Passo\ a\ Passo.jpeg");
            
            background-repeat: no-repeat;
            background-size: cover;
        }
        .clt__items:nth-child(3){
            grid-column-start: span 2 ;
            grid-row-start: span 3;
            background-image: url("./../img/arh6.jpg");
       
            background-repeat: no-repeat;
            background-size: cover;
        }
        .clt__items:nth-child(4){
            grid-column: 3;
            grid-row-start: span 2;

            background-image: url("./../img/deckV1.jpeg");
            background-repeat: no-repeat;
            background-size: cover;
        }
        .clt__items:nth-child(5){
            grid-row-start: span 2;
            background-image: url("./../img/glorietaV1.jpg");
            /* background-image: url("./../img/deckV1.jpeg"); */
            background-repeat: no-repeat;
            background-size: cover;
        }
        .clt__items:nth-child(6){
            grid-column-start: span 2 ;
            grid-row-start: span 3;
            background-image: url("./../img/arh7.jpg");
   
            background-repeat: no-repeat;
            background-size: cover;

        }
        .clt__items:nth-child(7){
            grid-column-start: span 1;
            grid-row-start: span 1;
            background-image: url("./../img/alhtodo.jpg");

            background-repeat: no-repeat;
            background-size: cover;

        }
        .clt__items:nth-child(8){
            grid-column-start: span 2 ;
            grid-row-start: span 3;
            background-image: url("./../img/glorietaH2.jpg");
    
            background-repeat: no-repeat;
            background-size: cover;

        }
        .clt__items:nth-child(9){
            grid-column-start: span 1 ;
            grid-row-start: span 3;
            background-image: url("./../img/Listones\ de\ madera\ con\ enredadera\,\ para\ aportar\ intimidad\ a\ tu\ balcón.jpeg");
    
            background-repeat: no-repeat;
            background-size: cover;

        }
        .clt__items:nth-child(10){
            grid-column-start: span 2 ;
            grid-row-start: span 2;
            background-image: url("./../img/glorietaH1.jpg");
    
            background-repeat: no-repeat;
            background-size: cover;

        }
        .clt__items:nth-child(11){
            /* grid-column-start: span 2; */
            grid-row-start: span 2;

            background-image: url("./../img/arh4.jpg");

            background-repeat: no-repeat;
            background-size: cover;
        }
        .clt__items:nth-child(12){
            grid-column-start: span 2;
            grid-row-start: span 2;
           
            background-image: url("./../img/alh.jpg");

            background-repeat: no-repeat;
            background-size: cover;
        }
        .clt__items:nth-child(13){
            /* grid-column-start: span 2; */
            grid-row-start: span 1;
            background-image: url("./../img/alhmacetas.jpg");
           
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .clt__items:nth-child(14){
            grid-column-start: span 1;
            grid-row-start: span 1;
            background-image: url("./../img/almaceta.jpg");
           
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
  

/*--------------------------------- @ M E D I A ---------------------------------------------------------*/

@media(max-width:1250px){
   
.clientesTrabajos{
    height: auto; width: 100%; 
    padding: 2rem 0rem 0rem 0rem; margin: 0px auto 6rem auto; 
}
    .clt__conteiner__top{
        width: 100%; 
        padding: 4rem 4rem 3rem 4rem;
        
        letter-spacing: 0.12rem;
    }
        .clt__title{
            height: 70%; width: 100%; 
            padding: 0.8rem;      
        
        }
        .clt__subtitle{
            width: 100%;
            font-size: 18px;
        }
/*-------------------------------------------------------*/
        
        .clt__conteiner{
            padding: 0rem 5.5rem; 
            /* padding: 0rem 2rem ;  */
            margin: 0rem auto;  
    
        }
}

@media(max-width:1145px){

.clientesTrabajos{
   
    height: auto; width: 100%; 
    padding: 2rem 0rem 0rem 0rem; margin: 0rem auto 5rem auto; 
}
    .clt__conteiner__top{
        width: 100%; padding: 4rem 4rem 2rem 4rem;

        letter-spacing: 0.12rem;
    }
        .clt__title{
            height: 70%; width: 100%; 
            padding: 0.8rem; margin-bottom: 1rem;
        }
        .clt__subtitle{
            width: 100%;

            font-size: 18px;
        }
        .clt__text{
            padding: 1.5rem 0.8rem;
            line-height: 32px;
            color: var(--gray);
            letter-spacing: 0.3px;
        }

/*---------------------------------------------------------------------------*/

    .clt__conteiner{
        padding: 0rem 3.5rem ; margin: 2rem auto 0rem auto;  

        
    }

    
}

@media(max-width:1025px){

.clientesTrabajos{
    box-sizing: border-box;
    height: auto; width: 100%; 
    margin: 0px auto 5rem auto; 
    
}
    .clt__conteiner__top{
        width: 100%; 
        padding: 4rem 4rem 3rem 4rem;

        letter-spacing: 0.12rem;
    }
        .clt__title{
            height: 70%; width: 100%; 
            padding: 0.8rem;
        }
        .clt__subtitle{
            width: 100%;
            font-size: 20px;
        }

/*-----------------------------------------------------------------*/
    
    .clt__conteiner{
        height: 195rem;
        padding: 0rem 2.7rem ; margin: 1rem auto 0rem auto; 
        
    }    
    .clt__items:nth-child(6){
        grid-row-start: span 2;

        background-position: 80%;
     
    } 
    .clt__items:nth-child(7){
        grid-row-start: span 2;

        background-position: 70%;
     
    }
    .clt__items:nth-child(8){
        grid-row-start: span 2;

        background-position: 60%;
     
    }
    .clt__items:nth-child(9){
        display: none;
        grid-row-start: span 2;

        background-position: 60%;
     
    }
    .clt__items:nth-child(10){

        background-position: center;
     
    }
 
}

@media(max-width: 930px){
   
.clientesTrabajos{

    height: auto; width: 100%; 
    margin: 0px auto 0rem auto; padding: 2rem 0rem 0rem 0rem;

}
    .clt__conteiner__top{
        width: 100%; 
        padding: 5rem 2rem 2rem 2rem;
     
        letter-spacing: 0.12rem;
    }
        .clt__title{
            height: 70%; width: 100%; 
            padding: 0.8rem ; padding-top: 1.2rem;
        }
        .clt__subtitle{
            width: 100%;
       
            font-size: 22px;
        }
        .clt__text{
            padding: 1.5rem 0.8rem;
            line-height: 32px;
            letter-spacing: 0.3px;

        }

/*------------------------------------------------------*/
    
    .clt__conteiner{
        height: 170rem; 
        padding: 0rem 2rem ; margin: 1rem auto 0rem auto;  

        grid-auto-rows: 200px;
        
    }
 
    .clt__items:nth-child(1){
        background-position: center;

    }
    .clt__items:nth-child(5){
        grid-row-start: span 2;

        background-position: 95%;
     
    }
       
}

@media(max-width: 769px){

.clientesTrabajos{
    overflow: hidden;
    height: auto; width: 100%; 
    margin: 0px auto; 

}
    .clt__conteiner__top{
        width: 100%; 
        padding: 4rem 2rem 3rem 2rem;
 
        letter-spacing: 0.12rem;
        
    }
        .clt__title{
            height: 70%;
            width: 100%; padding: 0.8rem;
        }
        .clt__subtitle{
    
            width: 100%;
       
            font-size: 18px;
    
        }
        .clt__text{
            padding: 1.5rem 0.8rem;
            line-height: 32px;
            letter-spacing: 0.3px;
        }

/*------------------------------------------------------*/

    .clt__conteiner{
        height: 300rem; 
        padding: 0rem 2rem ; margin: 1rem auto 0rem auto;  
    
        grid-template-columns: repeat( 2 , 1fr );

    
    }
       
        .clt__items:nth-child(1){
            grid-column-start: span 2;
            grid-row-start: span 2;
      
        }
        .clt__items:nth-child(2){
            grid-column-start: 1;
            grid-row-start: span 3;

            background-image: url("./../img/Listones\ de\ madera\ con\ enredadera\,\ para\ aportar\ intimidad\ a\ tu\ balcón.jpeg");
            /* background-image: url("./../img/Cerca\ de\ Madeira_\ 60\ Modelos\,\ Fotos\ e\ Passo\ a\ Passo.jpeg"); */
            
        }
        .clt__items:nth-child(3){
            grid-column-start: 2 ;
            grid-row-start: span 3;
            background-image: url("./../img/deckV1.jpeg");

        }
        .clt__items:nth-child(4){
            grid-column-start: span 2;
            grid-row-start: span 2;
            background-image: url("./../img/arh6.jpg");

            background-position: center;


        }
        .clt__items:nth-child(5){
            grid-row-start: span 2;
            background-image: url("./../img/glorietaV1.jpg");
  
        }
        .clt__items:nth-child(6){
            grid-column-start: 2 ;
            grid-row-start: span 2;
            background-image: url("./../img/alhtodo.jpg");
            background-position: 70%;

        }
        .clt__items:nth-child(7){
            grid-column-start: span 2;
            grid-row-start: span 3;

            background-image: url("./../img/arh7.jpg");

        }
        .clt__items:nth-child(8){
            grid-column-start: span 2;
            grid-row-start: span 3;

        }
        .clt__items:nth-child(9){
            grid-column-start: span 2;
            grid-row-start: span 2;
            /* background-image: url("./../img/caminoV3.jpeg"); */
            background-image: url("./../img/caminoV1.jpeg");
            /* background-image: url("./../img/arh6.jpg"); */
           
            background-position: center;
     
        }
        .clt__items:nth-child(11){
            grid-column-start: span 2;
            grid-row-start: span 2;

            background-image: url("./../img/arh4.jpg");

        }
        .clt__items:nth-child(12){
            grid-column-start: span 2;
            grid-row-start: span 2;
           
            background-image: url("./../img/alh.jpg");

        }
        .clt__items:nth-child(13){
            /* grid-column-start: span 2; */
            grid-row-start: span 2;
            background-image: url("./../img/alhmacetas.jpg");
           
            background-position: center;
     
        }
        .clt__items:nth-child(14){
            grid-column-start: span 1;
            grid-row-start: span 2;
            background-image: url("./../img/almaceta.jpg");
           
            background-position: center;
   
        }
     
    
}

@media(max-width: 640px){
 
        .clt__conteiner__top{
            width: 100%; 
            padding: 3.5rem 2rem 3rem 2rem;
     
            letter-spacing: 0.12rem;
        /* background-color: aqua; */

            
        }
            .clt__title{
                height: 70%;
                padding: 0.8rem;
                letter-spacing: 1.5px;
                line-height: 3.8rem;
                /* background-color: rgb(255, 0, 238); */

            }
            .clt__subtitle{
                /* background-color: yellow; */
                margin-bottom: 12px;
                font-size: 18px;
        
            }
    
    
    /*------------------------------------------------------*/
    .clt__conteiner{ 
        height: 310rem; 
        padding: 0rem 2rem ; 

        grid-template-columns: repeat( 2 , 1fr );
        grid-auto-rows: 180px;
    }
     
        .clt__items:nth-child(2){
            grid-row-start: span 2;
        }
        .clt__items:nth-child(3){
            grid-row-start: span 4;
        }
        .clt__items:nth-child(4){
            background-image: url("./../img/glorietaV1.jpg");
            background-image: url("./../img/arh6.jpg");

            grid-column-start: 1;
            grid-row-start: span 2;
        }
        .clt__items:nth-child(5){
            grid-column-start: span 2;
            grid-row-start: span 4;
            background-image: url("./../img/arh6.jpg");
            background-image: url("./../img/glorietaV1.jpg");
        }
        .clt__items:nth-child(6){
            grid-column-start: span 2;
            grid-row-start: span 3;
            background-image: url("./../img/arh7.jpg");
           background-position: 90%;

        }
        .clt__items:nth-child(7){
            grid-column-start: span 2;
           grid-row-start: span 2;
           background-image: url("./../img/alhtodo.jpg");
           /* background-position: 85%; */
        } 
        .clt__items:nth-child(8){
            grid-column-start: span 2;
            /* background-image: url("./../img/arh4.jpg"); */
         } 
        .clt__items:nth-child(9){
            background-image: url("./../img/arh6.jpg");
 
         } 
    
}

@media(max-width: 540px){

.clientesTrabajos{
    height: auto; width: 100%; 
    margin: 0px auto;

}
    .clt__conteiner__top{        
        width: 100%; 
        padding: 4rem 1.2rem 3rem 1.2rem;
        letter-spacing: 0.12rem;

    }
        .clt__title{
            height: 70%; width: 100%; 
            padding: 0.8rem;

            font-size: 40px;
            line-height: 3rem;
        }
        .clt__subtitle{
            width: 100%;
            font-size: 18px;
    
        }
        .clt__text{
            padding: 1.5rem 0.8rem;
            font-size: 15px;
            line-height: 32px;
            letter-spacing: 0.3px;

        }

/*------------------------------------------------------*/
   
    .clt__conteiner{
        height: 310rem; 
        padding: 0rem 1.5rem ; 
        grid-template-columns: repeat( 1 , 1fr );
     
    }
   
        .clt__items:nth-child(1){
            grid-row-start: span 2;
            grid-column: 1;
           
        }
        .clt__items:nth-child(2){
            display: none;
            /* grid-column: 1; 
            grid-row-start: span 3;
 
            background-position: center; */
        }
        .clt__items:nth-child(3){
            grid-row-start: span 3;
            grid-column: 1;
    
        }
        .clt__items:nth-child(4){
            grid-column: 1;
            grid-row-start: span 2;

        }
        .clt__items:nth-child(5){
            grid-column: 1;
            grid-row-start: span 3 ;

        }
        .clt__items:nth-child(6){
            grid-column: 1;
            grid-row-start: span 2;

        }
        .clt__items:nth-child(7){
            grid-column: 1;
            grid-row-start: span 2;
        }   
        .clt__items:nth-child(8){
            grid-column: 1;
            grid-row-start: span 2;
  
        }   
        .clt__items:nth-child(9){
            grid-column: 1;
            grid-row-start: span 2;
        }  
        .clt__items:nth-child(10){
            grid-column: 1;
            grid-row-start: span 2;
        }    
        .clt__items:nth-child(11){
            grid-column: 1;
            grid-row-start: span 2;
        }  
        .clt__items:nth-child(12){
            grid-column: 1;
            grid-row-start: span 2;
        }  
        .clt__items:nth-child(13){
            grid-column: 1;
            grid-row-start: span 2;
        }  
  

}

@media(max-width: 462px){

        .clt__conteiner__top{        
            width: 100%; 
            padding: 4rem 1.2rem 1.5rem 1.2rem;
            letter-spacing: 0.12rem;
    
        }
            .clt__title{
                height: 70%; width: 100%; 
                padding: 0.8rem; 
    
                font-size: 40px;
                line-height: 3rem;
            }
    /*------------------------------------------------------------------------*/
  
          
}

@media(max-width: 408px){

    .clientesTrabajos{
        height: auto; width: 100%; 
        margin: 0px auto;
    
    }
        .clt__conteiner__top{        
            width: 100%; 
            padding: 4rem 1.2rem 0rem 1.2rem;
            letter-spacing: 0.12rem;
    
        }
            .clt__title{
                height: 70%; width: 100%; 
                padding: 0.8rem;
    
                font-size: 40px;
                letter-spacing: normal;
                line-height: 2.8rem;
            }
            .clt__subtitle{
                width: 100%;
                font-size: 18px;
        
            }
            .clt__text{
                padding: 1.5rem 0.8rem;
                font-size: 15px;
                line-height: 32px;
                letter-spacing: 0.3px;
    
            }
    
    /*------------------------------------------------------*/
    .clt__conteiner{
        height: 277rem;

        grid-auto-rows: 160px;
        
    }
    .clt__items:nth-child(1){
    
        grid-row-start: span 2;
       
        background-position: center;
    }
    
}

@media(max-width: 385px){

.clientesTrabajos{

    height: auto; width: 100%; 
    margin: 0px ;

}
    .clt__conteiner__top{
         width: 100%; 
         padding: 2rem 1rem 2rem 1rem;

         letter-spacing: 1.5px;
    }
        .clt__title{
         
            height: 70%; width: 100%;
            padding: 0rem 0rem;

            font-size: 2.2rem;
            line-height: 2.8rem;
     
        }
        .clt__subtitle{
            width: 100%;   
            padding: 1rem 0rem ;
            margin-bottom: 8px;

            font-size: 19px;
            letter-spacing: 0.3px;
            line-height: 28px;

          
        }
        .clt__text{
            padding: 1.5rem 0.8rem;
            font-size: 14px;
            line-height: 32px;
            letter-spacing: 0.3px;

        }

        
/*------------------------------------------------------*/
   
.clt__conteiner{
    height: 275rem; 
    padding: 0rem 0.5rem ; 

}

    
    
}

@media(max-width: 295px){

    .clientesTrabajos{
    
        height: auto; width: 100%; 
        margin: 0px ;
    
    }
        .clt__conteiner__top{
             width: 100%; 
             padding: 1.5rem 1rem 1.8rem 1rem;
            /* background-color: aqua; */
             letter-spacing: 1.5px;
        }
            .clt__title{
             
                height: 70%; width: 100%;
                padding: 0rem 0rem;
    
                font-size: 2rem;
                line-height: 2.8rem;
                letter-spacing: 0px;
            }
            .clt__subtitle{
                width: 100%;   
                padding: 0.5rem 0rem ;
    
                font-size: 19px;
                letter-spacing: 0.3px;
                line-height: 28px;
     
            }
            .clt__text{
                padding: 1.5rem 0.8rem;
                font-size: 14px;
                line-height: 32px;
                letter-spacing: 0.3px;
    
            }
            
    /*------------------------------------------------------*/
      
      
        
        
}