.at-articles {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 5em;
}

.at-articles {
    margin-bottom: 5em;
}

.at-articles__title {
    position: relative;
    margin-bottom: 1rem;
}

@media (min-width: 108em) {
    .at-articles__title .subsection {
        margin-top: 3em;
    }
}

.at-article__title,
.at-articles__article h2 /** weblog related articles */{
    padding: .5em 0;
    font-size: 1.5rem;
}

:is(.at-articles--backgroundFirst .at-articles__article:first-child, .at-articles--backgroundLast .at-articles__article:last-child) {
    padding: 2em;
    background: #1e1e1e;
}

:is(.at-articles--backgroundFirst .at-articles__article:first-child, .at-articles--backgroundLast .at-articles__article:last-child) * {
    color: rgba(255, 255, 255, 0.6);
}

:is(.at-articles--backgroundFirst .at-articles__article:first-child, .at-articles--backgroundLast .at-articles__article:last-child) :is(h2, h3) {
    color: #fff;
}

@media screen and (min-width: 460px) {
    .at-articles__article--33,
    .at-articles__article--66 {
        flex-grow: 0;
        flex-shrink: 0;
        margin-right: 2rem;
    }

    .at-articles__article--33 + .at-articles__article,
    .at-articles__article--66 + .at-articles__article {
        flex-grow: 1;
    }

    .at-articles__article--50,
    .at-articles__article--50 + .at-articles__article {
        flex: 0 0 45%;
        margin-right: 0;
    }
}

@media screen and (min-width: 768px) {
    .at-articles {
        flex-direction: row;
    }

    .at-articles__article--33 {
        flex-basis: 33%;
    }

    .at-articles__article--66 {
        flex-basis: 66%;
    }
}