.at-articleContainer.--light .articleTitle,
.at-articleContainer.--light .at-articleContainer__article:not(:has(form)),
.at-articleContainer.--light .at-articleContainer__article a,
.at-articleContainer.--light a[class*='more'] /** This selector is guessing that a link with the word 'more' in the classname is a 'read more' link and should be made white. */ {
    color: var(--baseLight100);
}

.at-articleContainer {
    position: relative;
    --ornamentSize: var(--pageGutter);
}

.at-articleContainer__articles .Article {
    margin-block: 0;
}

.at-articleContainer__articles .Article:not(.--hasBackground) {
    padding-inline: 0;
}

.at-articleContainer__articles .--hasBackground {
    border-radius: var(--borderRadiusSmall);
}

.at-articleContainer__imageWrapper {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.at-articleContainer__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/**
 * Ornaments
*/

.at-articleContainer__article {
    position: relative;/** To position ornaments */
}

.at-articleContainer__line {
    position: absolute;
    inset: 0;
    min-width: 100%;
    min-height: 100%;
}

.at-articleContainer__ornament {
    display: none;
}

@container (min-width: calc(256px * 2 + 2rem)) {
    .at-articleContainer__ornament {
        display: block;
        position: absolute;
        width: var(--ornamentSize);
        height: var(--ornamentSize);
    }

    .at-articleContainer__ornament.--left {
        transform: rotate(270deg) translate(calc(var(--ornamentSize) * .55), calc(var(--ornamentSize) * -.65));
    }

    .at-articleContainer__ornament.--right {
        top: calc(var(--ornamentSize) * -.6);
        right: calc(var(--ornamentSize) * -.6);
    }

    .at-articleContainer__articles.--wideSmall {
        grid-template-columns: 1fr .5fr;
    }

    .at-articleContainer__articles.--smallWide {
        grid-template-columns: .5fr 1fr;
    }
}

@media screen and (min-width: 1180px) {
    .at-articleContainer {
        --ornamentSize: 50px;
    }
}