.at-navigationCards.--light .articleTitle,
.at-navigationCards__itemWrapper.--light * {
    color: var(--baseLight100);
}

.at-navigationCards .g-gridContainer__inner.--1col {
    grid-template-columns: 1fr !important; /* because of specific styling from ".variantSidebar .main__content .content .g-gridContainer__inner" */
}

/**
 * Items
 */

.at-navigationCards__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--marginSmall);
    padding: var(--marginSmallMedium);
    border-radius: var(--borderRadiusSmall);
    box-shadow: var(--boxShadow), 0 0 1px 1px rgba(0,0,0,0.1);
    color: var(--baseDark900);
    background-color: var(--baseLight100);
    transition: transform .2s ease-out;
}

.at-navigationCards__item:has(.u-coverLink):hover {
    transform: translateY(-.15rem);
    box-shadow: var(--boxShadowHover);
}

.at-navigationCards__titleWrapper {
    display: flex;
    align-items: center;
    gap: var(--marginSmall);
}

.at-navigationCards__title {
    margin: 0;
}

.at-navigationCards__text {
    margin-bottom: 0;
}

.at-navigationCards__image {
    display: block;
    aspect-ratio: 1;
    order: -1;
    object-fit: contain;
}

.at-navigationCards__link {
    margin-top: auto;
    align-self: flex-start;
}

.at-navigationCards__moreLink {
    display: inline-block;
    margin-block-start: var(--marginMedium);
}

/**
 * Transparent items
 */

.at-navigationCards .g-gridContainer__inner.--1col.--transparentItems {
    grid-gap: 0;
    margin-inline: calc(-1 * var(--marginMedium));
}

.--transparentItems .at-navigationCards__item,
.--transparentItems .at-navigationCards__item:has(.u-coverLink):hover {
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.--transparentItems .at-navigationCards__item {
    padding: var(--marginSmall) var(--marginMedium);
}

.--transparentItems .at-navigationCards__item:has(.u-coverLink):hover {
    color: var(--primaryColor500);
    background-color: var(--primaryColor100) !important;
}

.--transparentItems .at-navigationCards__item {
    border-top: 1px solid var(--baseLight350);
}