.related-wrapper {
    position: sticky;
    top: 0;
    grid-column: var(--related-start) / span var(--related-span);
    grid-row: 1;
}

.related-intro {
    padding-left: 5px;
    margin-top: var(--spacing--5);
    color: var(--color-gray-500);
    font-size: var(--text-sm);
}

@media screen and (max-width: 70rem) {
    .related-wrapper {
        grid-column: var(--article-start) / span var(--article-span);
        grid-row: 2;
        margin-top: var(--spacing-10);
    }
    .article-grid-sizer,
    .article-grid-item {
        width: calc(100% / var(--article-span));
    }
}

@media screen and (max-width: 60rem) {
    .related-wrapper {
        grid-column: 1 / span var(--columns);
        grid-row: 2;
        margin-top: var(--spacing-10);
    }
    .article-grid-sizer,
    .article-grid-item {
        width: calc(100% / var(--columns));
    }
}