.ArticleCard {
    --article-card-image-height: 15em;

    display: flex;
    flex-direction: column;

    border-radius: var(--radius);
    box-shadow: var(--shadow);
    /* box-shadow: 0 0 0 1px var(--color-shadow); */

    overflow: hidden;
    
    transition: box-shadow 150ms;
}

.ArticleCard:hover {
    box-shadow: var(--shadow-active);
}

.ArticleCard > a {
    display: block;
    position: relative;
}

.ArticleCard-image {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: var(--article-card-image-height);
}

.ArticleCard-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: all 150ms ease-out;

    position: absolute;
    top: 0;
    left: 0;
}

.ArticleCard-body {
    position: relative;

    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    height: 5em;

    background-color: white;

    padding: 0 var(--size-m) var(--size-m);
}

.ArticleCard-body:before {
    position: absolute;
    content: '';
    background-color: white;

    border-radius: var(--radius) var(--radius) 0 0 ;
    width: 100%;
    height: var(--radius);
    top: calc(var(--radius) * -1);
    left: 0;
}

.ArticleCard:hover img {
    width: 104%;
    height: 104%;
 
    top: -2%;
    left: -2%;
}

/* Tablet */
@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
    .ArticleCard {
        --article-card-image-height: 12em;
    }
}

/* Mobile */
@media (max-width: 31.25em) {
    .ArticleCard {
    }
}