.at-articleContainer {
    position: relative;
}

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

.main .at-articleContainer .at-articleContainer__article .Article {
    margin-block: 0;
}

.at-articleContainer .Article:first-of-type.--noMarginTop {
    margin-top: 0;
}

.at-articleContainer__article {
    container-type: inline-size;
}

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

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

.at-articleContainer__article.--equalHeight > :where(.Article, .Form) {
    height: 100%;
}

.--block .at-articleContainer__articles {
    display: flex;
    flex-direction: column;
    gap: var(--gridGutter);
}

.at-articleContainer .--equalHeight .at-banner .g-container__inner,
.at-articleContainer .--equalHeight .at-videoBanner .g-container__inner,
.at-articleContainer .--equalHeight .at-banner .g-container__inner > div,
.at-articleContainer .--equalHeight .at-videoBanner .g-container__inner > div {
    height: 100%; /** make sure the content uses all available vertical space */
}

@container (min-width: calc(256px * 2 + 2rem)) {
    .at-articleContainer__articles.--wideSmall .at-articleContainer__article:first-child,
    .at-articleContainer__articles.--smallWide .at-articleContainer__article:nth-child(2) {
        grid-column: span 2;
    }
}

/* Prevent double titles that occurs when an article template with visible title is included in the container */
.at-articleContainer__article:has(.Article--template .articleTitle) .at-articleContainer__articleTitle {
    display: none;
}

/**
 * Background image
 */

/*
 * Image wrapper
 */

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

.at-articleContainer__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--borderRadiusSmall);
}

.at-articleContainer__imageWrapper.--hasOverlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: var(--borderRadiusSmall);
}

.bannerContainer .at-articleContainer__image,
.bannerContainer .at-articleContainer__imageWrapper.--hasOverlay::before {
    border-radius: 0;
}