:root{
      --gap:30px;
}

.d-flex{
    display: flex;
}

.flex-column{
    display: flex;
    flex-direction: column;
}

 .item-listado{
    width: 100%;
 }


.listado-2{
        gap: var(--gap);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        & .item-listado{
            max-width:calc( ( 100%  - (var(--gap)/1)   )   / 2 )  ;
         }

}

.listado-1-2{
    width: 100%; 
    @include media-breakpoint-up(md){
        gap: var(--gap);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    } 


     & .item-listado{

         width:100%;        


        @include media-breakpoint-up(md){

          
             max-width:calc( ( 100%  - (var(--gap)*1)   )   / 2 )  ;
        }

    }  

}

.listado-1-sm-2{
    width: 100%; 
    @include media-breakpoint-up(sm){
        gap: var(--gap);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    } 


     &  .item-listado{

         width:100%;        


        @include media-breakpoint-up(sm){

          
             max-width:calc( ( 100%  - (var(--gap)*1)   )   / 2 )  ;
        }

    }  

} 

.listado-1{

        width: 100%; 

     &  .item-listado{    

        width:100%;
 
    }
}        

 



.listado-1-to-3{

        width: 100%; 
    @media screen and (min-width:768px){
        gap: var(--gap);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    } 

      &  .item-listado{
             @media screen and (min-width:768px){

          
             max-width:calc( ( 100%  - (var(--gap)/1)   )   / 2 )  ;
        }

        @media screen and (min-width:1024px){

          
             max-width:calc( ( 100%  - (var(--gap)*2)   )   / 3 )  ;
        }

 

     }
 
}


.listado-1-to-4{       

        width: 100%; 
        @media screen and (min-width:768px){
            gap: var(--gap);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        } 

    &    .item-listado{    
            @media screen and (min-width:768px){
 
             max-width:calc( ( 100%  - (var(--gap)/1)   )   / 2 )  ;
        }          

        @media screen and (min-width:992px){

          
             max-width:calc( ( 100%  - (var(--gap)*2)   )   / 3 )  ;
        }

        @media screen and (min-width:1024px){

          
             max-width:calc( ( 100%  - (var(--gap)*3)   )   / 4 )  ;
        }


     }
 
}

.grid-falla {
    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:25px;
    row-gap: 50px;

        @media screen and (min-width:768px){
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(23, 1fr);
            gap: 15px;
        }
}

.flex-falla {
    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:10px;
    row-gap: 20px;
        @media screen and (min-width:768px){
           gap:25px;
    row-gap: 50px;
        }


        @media screen and (min-width:1024px){
            row-gap: 75px;
        }

 
}

*[class*='item-grid']{
    /* border:1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;

 
}
    

.item-listado-falla{
 

   /* @media screen and (max-width:768px){*/
        width: 100%;;
        max-width: calc((100% / 2 ) - 10px);

        @media screen and (min-width:768px){
            max-width: calc((100% / 2 ) - 25px);
        }


        & img {
            aspect-ratio: 1 ;
            object-fit: contain;
        }

    /*}*/

}

.img-falla{

    max-height: 300px ;
    width: 100%;
    object-position: center;
    object-fit: contain;

}

.m-h-auto{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: block;
}

.img-falla-2025{
    max-width: 325px;
   
    
}

.img-falla-23{
 
}

.img-cover{
    object-fit: cover !important;
}

.img-qubit{
    max-height: 275px;
}

.item-listado{

        background-color: #fafafa;
    
    padding: 25px 12px 20px 12px ;
    @media screen and (min-width:768px) {
            background-color: #fafafa;
    
    padding: 50px 25px 25px ;
    }

}