.at-cards__grid {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - var(--marginSmall)/2));
    gap: var(--marginSmall);
    align-items: flex-end;
}

.at-cards.g-gridContainer {
    container-name: cards;
}

@container (min-width: 568px) {
    .at-cards__grid {
        grid-template-columns: repeat(auto-fit, minmax(min(157px, 320px), 1fr));
        gap: var(--marginMedium);
    }
}

/**
 * Cards
 */

.at-cards__card {
    display: flex;
    flex-direction: column-reverse;
    position: relative;
    height: 100%;
    aspect-ratio: 4/5;
    padding: var(--marginSmall);
    color: var(--baseDark900);
    background: var(--baseLight200);
    border-radius: 0 0 var(--borderRadiusMedium) 0;
    overflow: hidden;
}

.at-cards__grid:has(.at-cards__card[data-priority='2']) .at-cards__card[data-priority='1'],
.at-cards__card[data-priority='2'] {
    display: none;
}

@container (min-width: 568px) {
    .at-cards__card[data-priority='1'] {
        display: none;
    }

    .at-cards__card[data-priority*='2'],
    .at-cards__card[data-priority*='3'],
    .at-cards__card[data-priority*='4'] {
        display: flex;
    }
}

@container (min-width: 768px) {
    .at-cards__grid:has(.at-cards__card[data-priority='2']) .at-cards__card[data-priority='1'],
    .at-cards__card[data-priority='1'],
    .at-cards__card[data-priority*='2'],
    .at-cards__card[data-priority*='3'],
    .at-cards__card[data-priority*='4'] {
        display: flex;
    }
}

.at-cards__card:has(.at-cards__imageWrapper)::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: 10;
    opacity: .8;
}

.at-cards__card:has(.at-cards__contentWrapper) {
    &.--grey,
    &.--grey::after {
        background: var(--baseLight500);
    }

    &.--blue {
        color: var(--baseLight100);
    }

    &.--blue,
    &.--blue::after {
        background: var(--primaryColor500);
    }

    &.--yellow,
    &.--yellow::after {
        background: var(--secondaryColor300);
    }

    &.--green,
    &.--green::after {
        background: var(--tertiaryColor500);
    }

    &.--lightgreen,
    &.--lightgreen::after {
        background: var(--tertiaryColor100);
    }
}

/**
 * Content
 */

.at-cards__contentWrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    position: relative;
    z-index: 20;
}

.at-cards__cardTitle {
    margin: 0;
    font-size: var(--h1Size);
    font-weight: 600;
}

.at-cards__cardSubtitle {
    hyphens: auto;
}

/**
 * Image
 */

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

.at-cards__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/**
 * Changes for when this article is used inside an articleContainer AT
 */

.at-articleContainer:has(.at-cards) {

    @container articleContainer (min-width: calc(512px + 2rem)) {
        .g-gridContainer__inner.--2col {
            grid-template-columns: 1fr;
        }
    }

    @container articleContainer (min-width: calc(576px + 2rem)) {
        .g-gridContainer__inner.--2col {
            grid-template-columns: repeat(2, minmax(min(100%, 256px), 1fr));
        }
    }

    @container cards (min-width: 568px) {
        .at-cards__grid {
            grid-template-columns: repeat(2, calc(50% - var(--marginMedium)/2));
        }

        .at-cards__card[data-priority='1'] {
            display: flex !important;
        }

        .at-cards__card {
            height: auto;
            aspect-ratio: 5/4;
        }

        .at-cards__card:first-of-type {
            aspect-ratio: 9/10;
        }
    }

    & .at-articleContainer__article .at-cards {
        padding-inline: 0;
    }
}