.card{
    width:100%;
    background-color: var(--gray-50);
    box-sizing:border-box;
    margin-bottom:8px;
    border-radius:6px;
    overflow: hidden;
    cursor:default;
}
.card-title{
    padding:8px;
    color:var(--gray-900);
    height:140px;
}

.card-title-flex{
    width:100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.related-link{
    margin-left: auto;
    display: block;
    border-radius: 100%;
        width:24px;
    height:24px;
    padding:5px;
    transition:background-color 0.2s ease;
}

.related-link:hover{
    margin-left: auto;
    display: block;
    background-color: var(--gray-300);
}
.card-title-flex svg{
    color:var(--gray-500);
    transition: color 0.2s ease;

}
.card-title-flex svg:hover{
    color:var(--gray-800);
}
.card-title a{
    color:var(--gray-900);
    text-decoration: none;
}

.card-title a:hover{
    text-decoration: underline;
}
.card-title h3{
   cursor: pointer;
   font-size:18px;
}
.card-title h3:hover{
    text-decoration: underline;
}
.preview-cover{
    height:240px;
    overflow:hidden;
    cursor:pointer;
    position:relative;
}
.preview-cover .preview-img-link{
    position: absolute;
    top:0;
    height:240px;
    width:100%;
}
.card img{
    width:100%;
    height:100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card:hover img{
    transform:scale(1.1,1.1);
}

.card-subtitle{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap:wrap;
    position:absolute;
    bottom:4px;
    right:4px;
    z-index: 10;
        filter: drop-shadow(0 0 1rem black);

}
.card-date{
    margin-left: auto;
    color:var(--gray-600);
    font-size:14px;
    font-weight: bold;
}

html.dark .card-subtitle{
    filter: drop-shadow(0 0 1rem white);
}

@media (width >= 768px){
    .card{
        max-width: 400px;
    }
    .card-title{
        height:205px;
    }
}

@media (width >= 1024px){
    .card-title{
        height:160px;
    }
}