html, document {
    --shadow-small: 0 4px 6px rgba(0,0,0,0.10);
    --shadow-large: 0 4px 6px rgba(0,0,0,0.9);
}

card-img-top {
    width: 100%;
    height: 20vw;
    object-fit: cover;
}

.card {
    box-shadow: var(--shadow-small);
}
.card img {
    border: 1px solid transparent; 
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10); 
    border-radius: 2px;
}
.card-deck:hover > div {
/*    opacity: 0.5;
    filter: grayscale(100%);
    transition: all 100ms ease-in-out 0ms;
    transition-property: all;
    transition-duration: 100ms;
    transition-timing-function: ease-in-out;
    transition-delay: 0ms;*/
}

.card-deck:hover div.card:hover {
    opacity: 1;
    filter: grayscale(0%);
    box-shadow: var(--shadow-large);
}

.card-deck a {
    text-decoration: none;
    color: #004a80 !Important
}

.card-deck a:hover {
    text-decoration: none;
    color: #004a80 !Important
}