/* ------------------------- 
Hover Cards Are 300px x 300px or 225px x 225px
Make all hover Cards in a group the same size for best results
Make sure images are at least 300px x 300px
Make sure all images are the sane size.
Note: We are assuming square images and cards.
--------------------------- */

.hc-wrapper{
    display:flex;
    justify-content: center;
}

.hc-card{
    width:225px;
    height:225px;
    border-radius: 15px;
    padding:1.5rem;
    background-color: white;
    position:relative;
    display:flex;
    align-items: end;
    transition:.4s ease-out;
    box-shadow: 0px 7px 10px rgba(0,0,0,.5);
}

.hc-card img{
    width: 100%;
    height: 100%;
    object-fit:cover;
    -o-object-fit: cover;
    top: 0;
    left: 0;
    border-radius:15px;
    position: absolute;
}

.hc-card .hc-content{
    position: relative;
    z-index: 3;
    color: white;
    opacity: 0;
    transform: translateY(30px);
    transition: .5s ease-out;
}

.hc-card .hc-content{
    font-size: .9rem;
    letter-spacing: 1px;
    margin-top:.5rem;
}


.hc-card:before{
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    display:block;
    width:100%;
    height:100%;
    background: rgba(0,0,0,.6);
    z-index: 2;
    transition: .5s;
    opacity:0;
    border-radius: 15px;
}

.hc-card:hover{
    transform: translateY(20px);  /*Negative is up */

}

.hc-card:hover::before{
    opacity:1;
}

.hc-card:hover .hc-content{
    opacity: 1;
    transform: translateY(0px);
}



/* Media Queries for hover card */
@media(min-width:1199.98px){
    .hc-card{
        width:300px;
        height:300px;
    }
}