@charset "UTF-8";

.news-card {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
}
.news-card__img {
    height: 285px;
}
.news-card__publishdate {
    order: 1;
    
    font-size: 12px;
    line-height: 14px;
    
    margin-top: 17px;
}
.news-card__title {
    order: 2;
    
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    
    margin-top: 4px;
}


.news-card__img-container {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.news-card__img-container::before {
    content: "";
    position: absolute;
    inset: 0px;
    display: block;
    background-image: linear-gradient(to top, var(--mdr--pure-black), var(--mdr--pure-black--0));
    opacity: 0.4;
}

/* this is the implementation of the FAT "LIRE" found here: https://www.figma.com/file/W2m2PQi2oWbAShRBxLKCOY/CFA-M%C3%A9d%C3%A9ric-UI?type=design&node-id=1403-8009&mode=design&t=DY4o2wvoHgKhcQx7-4 */

/*.news-card__img-container::after {*/
/*    content: "lire";*/
/*    position: absolute;*/
/*    inset: 0px;*/
    
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
    
/*    color: var(--mdr--pure-white);*/
/*    font-family: "Black Mango";*/
/*    font-size: 102px;*/
/*    line-height: 1em;*/
/*    text-transform: uppercase;*/
/*    opacity: 0;*/
/*    transition: opacity 0.125s ease 0s;*/
/*}*/
/*.news-card:hover .news-card__img-container::after {*/
/*    opacity: 1;*/
/*}*/

.news-card__img {
    width: 100%;
    
    
    /* loading (or missing) image placeholder */
    background-color: var(--mdr--eggplant-purple--90);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right center;
    background-image: var(--mdr--mederic-half-medallion);
}

.news-card__img--empty {
    object-fit: contain;
    /* padding: min(20%, 100px); */
    padding: clamp(20px, 12%, 100px) max(20px, 25%);
}
.news-card__tag-container {
    position: absolute;
    inset: 20px 20px auto 20px;
}
@media screen and (min-width: 768px) {
    .news-card__img {
        height: 380px;
    }
    .news-card__publishdate {
        font-size: 14px;
        line-height: 28px;
        
        margin-top: 20px;
    }
    .news-card__title {
        font-size: 22px;
        line-height: 1.2em;
        margin-top: 0px;
    }
}