@media(max-width: 768px) {
.card-0Wrapper {
    margin-top: 20px;
    /* width: 80% !important;
    margin-left: 10%; */

}

}
.card-0Wrapper {
    /* width: 250px;
    height: 300px; */
    width: 100%;
    height: 300px;
}
@media(max-width: 576px) {
    .card-0Wrapper {
        /* width: 250px;
        height: 300px; */
        max-width: 300px;
        min-width: 300px;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
    } 
}
.card-0Wrapper a {
    width: 100%;
    height: 100%;
    z-index: 99999;
    position: absolute;
}
.card-0Wrapper .wrapper {
    cursor: pointer;
    width: 100%;
    height: 100%;
    /* margin: 15px; */
    color:white;
    position: relative;
    font-weight: bold;
    background-color:#DDDDDD;
    border-radius: 10px;

}
.card-0Wrapper .wrapper:hover {

}
.card-0Wrapper #image{
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    border-radius: 10px;
}
.card-0Wrapper :hover img{
    animation-name: changeBlur;
    animation-duration: 2s;
    filter: blur(4px);
}
@keyframes changeBlur {
    from{filter: blur(0)};
    to{filter: blur(4px)};
}
.card-0Wrapper .text {
    color:white;
    z-index: 9999;
    position: absolute;
    font-size: 20px;
    top: 50px;
    left: 15px;
    right: 15px;
}
.card-0Wrapper .overlap {
    position: absolute;
    z-index: 999;
    background-color: black;
    border-radius: 10px;
    opacity: .3;
    width: 100%;
    height: 100%;
}