.article-panel {
    /*background-color : var(--color-grey-light);*/
    padding : 8rem;

    .article-content {
        max-width     : 65ch;
        margin-inline : auto;
    }

    .article-title {
        color       : var(--color-itp-blue);
        /*letter-spacing : 0;*/
        line-height : 1.2;
    }

    .article-subtitle {
        margin-top     : 2rem;
        color          : var(--color-grey-black);
        letter-spacing : 0;
        line-height    : 1.5;
        font-weight    : 300;
    }

    .article-subtitle:has(+ .article-meta) {
        margin-bottom : 2rem;
    }

    .article-meta {
        margin-top            : 2rem;
        margin-bottom         : 6rem;
        display               : flex;
        flex-wrap             : wrap;
        gap                   : 1rem;
        color                 : var(--color-grey-dark-bright);
        font                  : var(--font-tag-label);
        font-feature-settings : var(--font-features);
        line-height           : 1.4;
    }

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

    .article-paragraph {
        margin-top  : 3rem;
        color       : var(--color-grey-black);
        font-size   : 1.6rem;
        line-height : 1.75;
        max-width   : none;
    }

    .article-heading {
        margin-top            : 5rem;
        margin-bottom         : 3rem;
        color                 : var(--color-itp-blue);
        font                  : var(--font-h3);
        font-feature-settings : var(--font-features);
        line-height           : 1.6;
        letter-spacing        : 0;
    }

    .article-subheading {
        margin-top            : 4rem;
        margin-bottom         : 2rem;
        color                 : var(--color-grey-black);
        /*text-transform        : uppercase;*/
        font                  : var(--font-h4);
        font-feature-settings : var(--font-features);
        font-size             : 1.6rem;
        font-weight           : 800;
        line-height           : 1.4;
        letter-spacing        : 0;
    }

    .article-quote {
        margin-top    : 4rem;
        margin-bottom : 4rem;
        padding-block : 0.4rem;
        padding-left  : 2rem;
        border-left   : 4px solid var(--color-blue-light);
        color         : var(--color-grey-dark);

        p {
            margin      : 0;
            font-style  : italic;
            font-size   : 2rem;
            line-height : 1.55;
            font-weight : 500;
        }
    }

    .article-list {
        margin-top   : 3rem;
        padding-left : 3.2rem;
        color        : var(--color-grey-black);
        font-size    : 1.6rem;
        line-height  : 1.75;

        li {
            padding-left : 0.4rem;
        }
    }

    .article-list-item + .article-list-item {
        margin-top : 1rem;
    }

    .article-list-item::marker {
        color : var(--color-itp-blue);
    }

    .article-cta {
        margin-block     : 5.6rem;
        padding          : 3.2rem;
        border           : 1px solid var(--color-itp-green);
        border-radius    : calc(var(--var-panel-border-radius) / 2);
        background-color : var(--color-itp-green-light);

        > :first-child {
            margin-top : 0;
        }

        > :last-child {
            margin-bottom : 0;
        }
    }

    .article-link {
        color                 : var(--color-itp-blue);
        font                  : inherit;
        font-feature-settings : inherit;
        text-decoration       : underline;
        text-underline-offset : 0.2em;
        padding-inline        : 0.4rem;
        font-weight           : bolder;
    }

    .article-link:hover {
        color            : white;
        background-color : var(--color-itp-blue);
    }

    .article-figure {
        max-width        : 100%;
        margin-block     : 6rem;
        margin-inline    : auto;
        background-color : var(--color-grey-light-bright);
        padding          : 4rem 4rem 2rem 4rem;
        border-radius    : calc(var(--var-panel-border-radius) / 2);
    }

    .article-image {
        display         : block;
        width           : auto;
        height          : auto;
        max-width       : 100%;
        margin-inline   : auto;
        object-fit      : contain;
        object-position : center;
        border          : 1px solid var(--color-grey-light);
        border-radius   : calc(var(--var-panel-border-radius) / 4);
    }

    .article-image-subtitle {
        /*text-transform        : uppercase;*/
        margin-top            : 2rem;
        color                 : var(--color-grey-dark-bright);
        font                  : var(--font-tag-label);
        font-feature-settings : var(--font-features);
        font-size             : 1.2rem;
        font-weight           : 700;
        line-height           : 1.4;
        text-align            : left;
    }

    .nav {
        margin-inline   : auto;
        margin-top      : 4rem;
        display         : flex;
        gap             : 2rem;
        justify-content : flex-end;
        align-items     : center;

        .nav-link {
            text-underline-offset : 4px;
            text-wrap             : nowrap;
            color                 : var(--color-grey-dark);
        }

        .nav-link:hover {
            text-decoration-line : underline;
            color                : var(--color-grey-black);
        }
    }
}

@media (max-width : 600px) {
    .article-panel {
        padding : 4rem;
    }
}

@media (max-width : 480px) {
    .article-panel {
        padding : 2rem;

        .article-title {
            font-size : 3.6rem;
        }

        .article-subtitle {
            font-size : 2.4rem;
        }

        .article-quote p {
            padding-inline : 1rem;
            font-size      : 1.8rem;
        }

        .article-figure {
            padding : 2rem 2rem 1rem 2rem;
        }

        .article-image-subtitle {
            margin-top : 1rem;
        }

        .nav {
            justify-content : center;
        }
    }
}