.Article {
    margin-block: var(--articleMargin);
    scroll-margin-top: 100px;
}

.Article.--hasBackground {
    padding-block: var(--articleMargin);
}

.Article.--hasBackground:not(.at-intro) + .Article.--hasBackground {
    margin-top: calc(-1 * var(--articleMargin));
}

.main .Article.--hasBackground:first-of-type {
    margin-top: 0;
}

.Article + .Article.--noMarginTop {
    margin-top: calc(-0.5 * var(--articleMargin));
}

.Article.--hasBackground + .Article.--hasBackground.--noMarginTop {
    margin-top: calc(-1.5 * var(--articleMargin));
    padding-top: 0;
}

.Article.--hasBackground + .Article.--noMarginTop,
.Article + .Article.--hasBackground.--noMarginTop {
    margin-top: calc(-1 * var(--articleMargin));
}

.Article.--hasBackground:last-of-type {
    margin-bottom: 0;
}

/**
 * First article on the page doesn't need the margin top
 */

.Article:first-of-type {
    margin-block-start: 0;
}

/**
 * Article title styling
 */

.Article:not(.Article--static) .Article__title {
    font-size: var(--h3Size);
    color: var(--primaryColor500);
}

@media (min-width: 768px) {
    .Article:not(.Article--static) .Article__title {
        max-width: var(--maxIndentWidth);
        margin-inline: auto;
    }
}

/**
 * Highlight article followed by an list article
 */

/** When a Highlight article is directly followed by a gridList (normal or related), use a negative margin to put the two together */
.Article:has(.weblogHighlight) + .Article:has(.u-gridList),
.Article:has(.meetingHighlight) + .Article:has(.u-gridList) {
    margin-block-start: calc((-1 * var(--articleMargin) + var(--marginMedium)));
}

/** Only do the above when there is no article title on the postList article */
.Article:has(.weblogHighlight) + .Article:has(.Article__title ~ .u-gridList),
.Article:has(.meetingHighlight) + .Article:has(.Article__title ~ .u-gridList) {
    margin-block-start: var(--articleMargin);
}