:root{
    --border-radius: 1rem;
    --card-gradient: linear-gradient(to bottom, rgba(255,255,255,0) 30%,rgba(16,186,185, .8) 100%);
    --transition: .2s ease-in-out;
    --img-height: 350px;
    --card-min-width: 350px;
    --darkgrey: #0c3c53;
}

/* bootstraps card */
.card{
    width:19vw !important;
    min-width:var(--card-min-width) !important;
    boder-radius:5rem !important;
    border-radius: var(--border-radius);
    margin: 12px;
    cursor:pointer;
    transition: var(--transition);
    box-shadow: 0 0 0.625rem -0.1875rem rgb(0 0 0 / 13%) !important;
    overflow:hidden !important;
    display:block !important;
    position: relative !important;
    z-index:1 !important;
}

.card .card-body{
    padding:25px 40px;
    color:var(--darkgrey) !important;
}

.card img{
    height:var(--img-height);
    object-fit: cover;
    object-position: 0 0;
}

.card-floating-text{
    color: #fff;
    position: absolute;
    right:0;
    bottom:0;
    z-index:5;
    padding:10px;
    opacity:0;
    transition: var(--transition);
}

.card-img-container{
    display:block;
    position:relative;
    overflow:hidden;
    z-index:1;
}

.card-img-container::after{
    content:'';
    position:absolute;
    left:0; top:0;
    width:100%;
    height:var(--img-height);
    display:inline-block;
    background: var(--card-gradient);
    transition: var(--transition);
    opacity:.5;

}

.card:hover{
    border-color: #10bab9;
}

.card:hover .card-img-container::after{
    opacity:1;
}

.card:hover .card-floating-text{
    opacity:.9;
}


/* tag selections */

.tag-section{
    margin-left:25%;
    margin-right:25%;
    margin-bottom:20px;
}

.tag-badge{
    color:grey;
    border: solid grey 1px;
    border-radius: 50px;
    padding: 1px 20px;
    margin: 5px;
    cursor:pointer;
    font-family: "innogyWEB-Regular", sans-serif;
    font-weight:400;
    transition: .3s;
}

.tag-badge:hover{
    background-color: grey;
    color: #fff;
}