:root {
    --article-transition-duration : 200ms;
}

.articles-heading {
    margin-bottom : var(--var-panel-gap);
    color         : var(--color-grey-dark-dim);
}

.articles-grid {
    --min-item-width      : 280px;
    --min-item-height     : var(--min-item-width);
    --item-padding        : 2rem;

    min-height            : 100dvh;
    display               : grid;
    grid-gap              : var(--var-panel-margin);
    grid-template-columns : repeat(auto-fill, minmax(min(var(--min-item-width), 100%), 1fr));
    grid-auto-rows        : min-content;

    .article-item {
        position                   : relative;
        border                     : 1px solid var(--color-grey-light);
        border-radius              : var(--var-panel-border-radius);
        min-height                 : var(--min-item-height);
        display                    : grid;
        grid-row                   : span 4;
        grid-template-rows         : subgrid;
        gap                        : var(--item-padding);
        overflow                   : hidden;
        padding                    : var(--item-padding);
        background-color           : white;
        box-shadow                 : none;

        transition-property        : transform, box-shadow, border;
        transition-duration        : var(--article-transition-duration);
        transition-timing-function : ease-in-out;

        .article-card-cover {
            margin           : calc(var(--item-padding) * -1) calc(var(--item-padding) * -1) 0;
            aspect-ratio     : 3 / 1;
            overflow         : hidden;
            background-color : var(--color-grey-light-bright);

            img {
                display    : block;
                width      : 100%;
                height     : 100%;
                object-fit : cover;
            }
        }

        .article-card-cover_empty {
            background-color : transparent;
        }

        .article-card-title {
            align-self     : end;
            color          : var(--color-grey-black);
            font-weight    : 700;
            font-size      : 2.0rem;
            line-height    : 1.5;
            letter-spacing : 0;
        }

        .article-card-meta {
            align-self            : end;
            display               : flex;
            flex-wrap             : wrap;
            gap                   : 0.6rem;
            color                 : var(--color-grey-dark-bright);
            font                  : var(--font-tag-label);
            font-feature-settings : var(--font-features);
            line-height           : 1.4;
        }

        .article-card-meta_empty {
            min-height : 1.4em;
        }

        .article-card-meta-item:not(:last-child)::after {
            content     : "•";
            margin-left : 0.6rem;
            color       : var(--color-grey-medium);
        }

        .article-card-subtitle {
            align-self         : start;
            color              : var(--color-grey-dark-dim);
            font               : var(--font-small);
            line-height        : 1.5;
            display            : -webkit-box;
            -webkit-line-clamp : 4;
            -webkit-box-orient : vertical;
            overflow           : hidden;
        }

        .article-card-read {
            position                   : absolute;
            inset                      : 0;
            /*background-color           : var(--color-grey-light-bright);*/
            backdrop-filter            : blur(24px) hue-rotate(348deg);
            display                    : flex;
            align-items                : center;
            justify-content            : center;
            color                      : var(--color-grey-black);
            font-weight                : 600;
            font-size                  : 2rem;
            opacity                    : 0;
            user-select                : none;

            transition-property        : opacity;
            transition-duration        : calc(var(--article-transition-duration) / 2);
            transition-timing-function : ease-in-out;
        }
    }

    .article-item:hover {
        transform  : scale(1.02);
        box-shadow : 0 2px 24px -6px rgba(0, 0, 0, 0.2);
        border     : 1px solid var(--color-itp-blue);
        cursor     : pointer;

        .article-card-read {
            opacity : 1;
        }
    }
}

.articles-grid_empty {
    min-height            : unset;
    grid-template-columns : 1fr;
}

.articles-empty {
    color      : var(--color-grey-dark);
    margin-top : 2rem;
}