#cards{
    position: relative;
    z-index:1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap:var(--grid__gutter);
}

.card{
    perspective:1000px;
    position:relative;
    aspect-ratio: 3/ 4;
}

.card-inner{
    position: absolute;
    inset:0;
    perspective:1000px;
    transform-style: preserve-3d;
    transform-origin: center center;
    transition: transform .3s;
}

.card .shadow{
    position:absolute;
    inset:0 0 -1rem;
    background-color:rgba(0,0,0,.5);
    filter:blur(1rem);
    transform: translateZ(-100px);
}

.card .content{
    position:absolute;
    inset:0px;
    transition:filter .3s;
}


.card:hover .card-inner{
    transform: rotateX(40deg);
}

.card .content .cardImage{
    position:absolute;
    inset: 0;
    background-color:#fff;
    border-radius:var(--border_radius);
    overflow:hidden;
}

.card .content .cardImage img{
    position:absolute;
    transform:translate(-50%, -50%);
    top:45%;
    left:50%;
    width:auto;
    height:55%;
}

a.card:last-child .content .cardImage img{
    width:80%;
    height:auto;
}

.card .text{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    color:var(--c_darkgreen);
    text-align:center;
    font-weight:var(--f_w_button);
    line-height:1em;
    padding:1rem;
    z-index:1;
}


.card .effectImage{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    min-height:100%;
    z-index:1;
    opacity:0;

    transition:transform .3s, bottom .3s, opacity .3s;

    pointer-events: none;
}

.card .effectImage::before{
    content:"";
    position:absolute;
    left:20%;
    right:20%;
    bottom:0;
    height:2rem;
    border-radius:50%;
    background-color:rgba(0,0,0,.5));
    filter:blur(10px);
    transition:bottom .3s;
}

.card:hover .effectImage{
    opacity: 1;
    bottom:30%;
    transform:scale(1.1);
}

.card:hover .effectImage::before{
    bottom:-3rem;
}

.card .effectImage img{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:auto;

    -webkit-filter: drop-shadow(0 50px 5px rgba(0,0,0,.4));
    filter: drop-shadow(0 50px 5px rgba(0,0,0,.4));
}

/* .content-downloads li{
    margin-bottom:.5rem;
} */

@media screen and (max-width:1050px){

    .card .text{
        font-size:var(--f_s_small);
        padding:1rem .5rem
    }
}

@media screen and (max-width:750px){

    #cards{
        grid-template-columns: repeat(2, 1fr);
    }
}