/*GRID SQUARES*/

.grid-card-boxes{
    container-type: inline-size;
}

.grid-card-boxes > div{
    position: relative;
}

.grid-card-boxes > div{
    width: calc((100% - 0px) / 1 - .1px) !important;
    height: calc(((100cqw - 0px) / 1 - .1px));
}

.grid-card-boxes .itemBox{
  width: 100%;
  height: 100%;
  transition: height .25s ease;
  overflow: hidden;
  will-change: height;
  z-index: 1;
  position: relative;
  
}

.grid-card-boxes.slideUp > div{
    overflow: hidden !important;
    position: relative !important;
}

.grid-card-boxes.slideUp > div:before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    height: 100%;
    height: 100%;
    border-radius: 20px;
    background: var(--primary1) !important;
    z-index: 0;
    width: 100%;
}

.grid-card-boxes.slideUp .itemBox:after{
        content: "";
        position: absolute !important;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMC43MDcxNTMgNy40MTQwNkw2LjcwNzE1IDEuNDE0MDZMMTIuNzA3MiA3LjQxNDA2IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiLz4KICA8cGF0aCBkPSJNNi43MDcxNSAxLjkxNDA2TDYuNzA3MTUgMTcuOTE0MSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPg==");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 25px;
        height: 25px;
        z-index: 1;
}

.grid-card-boxes.slideUp > div:hover .itemBox:after{
    opacity: 0;
}


.grid-card-boxes.slideUp > div:hover .itemBox{
    height: max(0px, calc(((100cqw - 0px) / 1 - .1px) - 75%)) !important;
}

.grid-card-boxes.slideUp .itemBox + span{
 position: absolute;
 bottom: 0px;
 line-height: 120%;
 width: 100%;
 left: 0px;
 height: 120px;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 80% !important;
}




.grid-card-boxes.slideUp > div .itemBox img{
  transform: scale(1);
  transition: transform .35s ease;
  transform-origin: center center;
}

.grid-card-boxes.slideUp > div:hover .itemBox img{
  transform: scale(0.55) translateY(-13px); /* se “hace pequeña” sin cambiar el alto del card */
}

.grid-card-boxes.slideUp > div:hover .itemBox p{
    margin-top: -40px !important;
    transform: translateY(-20px);
    height: 85px;
    opacity: 0;
}


/*DOWNLOAD VARIATION*/
.grid-card-boxes.download > div:after{
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0Ni40NTQiIGhlaWdodD0iNTEuOTA0IiB2aWV3Qm94PSIwIDAgNDYuNDU0IDUxLjkwNCI+CiAgPGcgaWQ9IkRvd25sb2FkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzYuMDQ2IC0zOS4yNjQpIj4KICAgIDxwYXRoIGlkPSJQZmFkXzEzIiBkYXRhLW5hbWU9IlBmYWQgMTMiIGQ9Ik0zOC41NDYsNzguM3Y1LjE4MmE1LjE4Miw1LjE4MiwwLDAsMCw1LjE4Miw1LjE4Mkg3NC44MTlBNS4xODIsNS4xODIsMCwwLDAsODAsODMuNDg2Vjc4LjMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAyMmU3NSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1Ii8+CiAgICA8cGF0aCBpZD0iUGZhZF8xNCIgZGF0YS1uYW1lPSJQZmFkIDE0IiBkPSJNNDYuMzE4LDYyLjc1OSw1OS4yNzMsNzUuNzE0LDcyLjIyNyw2Mi43NTkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAyMmU3NSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1Ii8+CiAgICA8cGF0aCBpZD0iUGZhZF8xNSIgZGF0YS1uYW1lPSJQZmFkIDE1IiBkPSJNNTkuMjczLDQxLjc2NFY3Mi44NTUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAyMmU3NSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1Ii8+CiAgPC9nPgo8L3N2Zz4=") !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    
}


@media (min-width: 900px){
    .grid-card-boxes > div{
        width: calc((100% - 40px) / 2 - .1px) !important;
        height: calc(((100cqw - 40px) / 2 - .1px));
    }
    
    .grid-card-boxes.slideUp > div:hover .itemBox{
        height: max(0px, calc(((100cqw - 60px) / 2 - .1px) - 75%)) !important;
    }
    
    .grid-card-boxes.slideUp > div:hover .itemBox img{
        transform: scale(0.55) translateY(-16px); /* se “hace pequeña” sin cambiar el alto del card */
    }
    
    .grid-card-boxes.slideUp > div.itemBox p{
        height: 85px;
    }
    
    .grid-card-boxes.slideUp > div:hover .itemBox p{
        margin-top: -20px !important;
        transform: translateY(-20px);
        height: 0px !important;
        overflow: hidden !important;
    }
    
    .grid-card-boxes > div:after{
        bottom: 20px;
    }
}


/*@media (min-width: 1000px){
    .grid-card-boxes > div:hover .itemBox{
        height: max(0px, calc(((100cqw - 60px) / 2 - .1px) - 100px)) !important;
    }
}*/

@media (min-width: 1400px){
    .grid-card-boxes > div{
        width: calc((100% - 80px) / 3 - .1px) !important;
        height: calc(((100cqw - 80px) / 3 - .1px));
    }
    
    .grid-card-boxes.slideUp > div:hover .itemBox{
        height: max(0px, calc(((100cqw - 80px) / 3 - .1px) - 75%)) !important;
    }
    
    .grid-card-boxes.slideUp > div:after{
        bottom: 15px;
    }
    
    .grid-card-boxes.slideUp > div:hover .itemBox img{
        transform: scale(0.65) translateY(-15px); /* se “hace pequeña” sin cambiar el alto del card */
    }
    
    .grid-card-boxes.slideUp > div:hover .itemBox p{
        margin-top: -20px !important;
        transform: translateY(-40px);
    }
}

@media (min-width: 1800px){
    .grid-card-boxes.slideUp > div:hover .itemBox{
        height: max(0px, calc(((100cqw - 120px) / 3 - .1px) - 75%)) !important;
    }
    
    .grid-card-boxes.slideUp > div:hover .itemBox p{
        height: 190px;
    }
    
    .grid-card-boxes.slideUp > div:after{
        bottom: 20px;
        height: 35px;
        width: 35px;
    }
    
    .grid-card-boxes.slideUp > div:hover .itemBox img{
        transform: scale(0.55) translateY(-17px); /* se “hace pequeña” sin cambiar el alto del card */
    }
    
    .grid-card-boxes.slideUp .itemBox + span{
         height: 150px;
    }
}


@media (min-width: 2400px){
    .grid-card-boxes.slideUp > div:hover .itemBox{
        height: max(0px, calc(((100cqw - 120px) / 3 - .1px) - 75%)) !important;
    }
    
    .grid-card-boxes.slideUp > div:hover .itemBox p{
        height: 190px;
    }
    
    .grid-card-boxes > div:after{
        bottom: 20px;
        height: 35px;
        width: 35px;
    }
    
    .grid-card-boxes.slideUp > div:hover .itemBox img{
        transform: scale(0.75) translateY(-17px); /* se “hace pequeña” sin cambiar el alto del card */
    }
}