:root {
    --article-spacing: 1.5rem;
}

#cl-articles-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--article-spacing);
    padding-block: 2rem;
}

#cl-articles-container a.cl-article {
    padding: var(--article-spacing);
    background: var(--col-light-grey);
    border-radius: 1rem;
    text-decoration: none;
    transition: all 50ms ease-in-out;
}

#cl-articles-container a.cl-article:hover {
    text-decoration: none !important;
}

#cl-articles-container a.cl-article :is(h5, p) {
    color: var(--col-default);
}

#cl-articles-container a.cl-article h5 {
    font-size: 1.35rem;
    margin-bottom: var(--article-spacing);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#cl-articles-container a.cl-article p {
    font-size: .85rem;
}

@media screen and (max-width: 1200px) {
    #cl-articles-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    #cl-articles-container {
        grid-template-columns: 1fr;
    }
}