.article-snippet {
    margin-bottom: 3rem;
}

.article-snippet > figure {
    height: calc(var(--column) * 3 + 2.625rem);
}

.article-snippet h1,
.article-snippet h2 {
    white-space: pre-wrap;
}

.article-snippet__details {
    width: 100%;
    margin-top: 2rem;
}

.article-snippet__details > * {
    grid-column: span 2;
}

.article-snippet:hover * {
    color: black !important;
}

body.dark .article-snippet h1,
body.dark .article-snippet:hover * {
    color: white !important;
}


/* 
LARGE
*/
.article-snippet.large {
    display: grid !important;
    grid-column: span 10;
}

.article-snippet.large > * {
    grid-column: span 5;
}

.article-snippet--large_text {
    display: flex;
    flex-direction: column;
}

.article-snippet__preview {
    margin: 2rem 0 0;
}
.article-snippet__preview.hide {
    display: none;
}

.article-snippet__preview > figure {
    min-height: calc(var(--column) * .7 + .35rem);
    max-height: calc(var(--column) * .7 + .35rem);
    margin-bottom: 1rem;
}

.article-snippet.large .article-snippet__details {
    margin-top: auto;
}



/* 
SMALL
*/
.article-snippet.small {
    grid-column: span 5;
}

.article-snippet.small figure {
    margin-bottom: 1rem;
}



/*
TABLET
*/
@media only screen and (max-width: 1024px) {
    .article-snippet {
        margin-bottom: 4rem;
    }

    .article-snippet > figure {
        height: 30vw;
    }
    
    .article-snippet.large {
        grid-column: span 8;
    }

    .article-snippet.large > * {
        grid-column: span 3;
    }

    .article-snippet.small {
        grid-column: span 4;
    }

    .article-snippet.small h2 {
        max-height: 10rem;
        overflow: hidden;
    }
}


/*
MOBILE
*/
@media only screen and (max-width: 620px) {
    .article-snippet.large,
    .article-snippet.small {
        grid-column: 1/-1;
    }

    .article-snippet > figure {
        height: 65vw;
        margin-bottom: 1rem;
    }

    .article-snippet h2 {
        max-height: 10rem;
        overflow: hidden;
    }

    .article-snippet.large > * {
        grid-column: 1/-1;
    }

    .article-snippet.large .article-snippet__details {
        margin-top: 2rem;
    }

    .article-snippet__preview {
        display: none;
    }
}