.cards__link {
    justify-self: end
}

@media (min-width: 1024px) {
    .cards__link {
        --parallax-ratio: .1
    }
}

.cards.layout--1 .tiles {
    --tiles-gap: max(.2rem, 2px)
}

.cards.layout--1 .tile {
    grid-template-columns: 1fr auto;
}

.cards.layout--1 .tile .heading {
    order: -10;
    align-self: center
}

.cards.layout--1 .tile .rich-text {
    grid-column: 1/-1
}

.cards.layout--2 .tiles {
    gap: 0;
    margin-bottom: 0 !important
}

@media (min-width: 1024px) {
    .cards.layout--2 .tiles {
        display: flex;
        max-width: calc(100% + .5*var(--tile-width));
        margin-right: calc(-.5*var(--tile-width));
        padding-right: calc(.5*var(--tile-width));
        overflow-x: hidden;
        scroll-padding-right: 30rem
    }

    .cards.layout--2 .tiles:has(.tile:nth-child(2)) {
        --tile-width: 80rem
    }

    .cards.layout--2 .tiles:has(.tile:nth-child(3)) {
        --tile-width: 60rem
    }

    .cards.layout--2 .tiles:has(.tile:nth-child(4)) {
        --tile-width: 48rem
    }

    .cards.layout--2 .tiles:has(.tile:nth-child(5)) {
        --tile-width: 40rem
    }

    .cards.layout--2 .tiles:has(.tile:nth-child(6)) {
        --tile-width: 34.2857142857rem
    }

    .cards.layout--2 .tiles:has(.tile:hover) .tile:not(:first-child):not(.tile:hover~.tile) {
        translate: -50% 0
    }
}

.cards.layout--2 .tile {
    --tile-width: inherit;
    flex-basis: 0;
    flex-grow: 1;
    position: static;
    gap: 3rem 2rem;
    min-height: 0;
    padding: 0 2rem;
    background-color: var(--color-background)
}

@media (min-width: 1024px) {
    .cards.layout--2 .tile {
        align-content: space-between;
        align-items: end;
        grid-template-columns: 1fr 1fr;
        min-width: 0
    }
}

@media (max-width: 1023px) {
    .cards.layout--2 .tile {
        --tile-width: 25rem;
        grid-template-columns: auto;
        gap: .5em
    }
}

.cards.layout--2 .tile:before {
    grid-column: 1/-1
}

.cards.layout--2 .tile .rich-text {
    grid-column-end: -1;
    font-size: var(--font-size-small)
}

.cards.layout--2 .tile:not(:first-child) {
    border-left: 1px solid var(--color-subtle)
}

@media (min-width: 1024px) {
    .cards.layout--2 .tile:not(:first-child) {
        margin-right: calc(-.5*var(--tile-width));
        transition: translate var(--duration-slow);
        will-change: transform
    }
}

@media (min-width: 1024px)and (hover: hover) {
    .cards.layout--2 .tile:not(:first-child):hover .rich-text {
        opacity: 1
    }
}

@media (min-width: 1024px) {
    .cards.layout--2 .tile:not(:first-child) .rich-text {
        opacity: 0;
        transition: opacity var(--duration-slow);
        will-change: opacity
    }
}

.cards.layout--3 .module__background {
    --parallax-ratio: .2
}

.cards.layout--3 .wrapper {
    gap: 3rem 5rem
}

@media (min-width: 1350px) {
    .cards.layout--3 .wrapper {
        grid-template-columns: 1fr 60rem;
        grid-template-rows: auto 1fr;
        grid-column-gap: 10rem
    }
}

@media (max-width: 1349px) {
    .cards.layout--3 .wrapper {
        grid-template-columns: 100%
    }
}

.cards.layout--3 .header {
    grid-column-start: 1
}

.cards.layout--3 .header .heading {
    font-size: 5rem;
    line-height: 1.25
}

.cards.layout--3 .header .rich-text {
    align-self: end;
    font-weight: 600
}

.cards.layout--3 .tiles {
    grid-column-end: -1;
    gap: 3rem
}

@media (min-width: 1350px) {
    .cards.layout--3 .tiles {
        grid-row: 1/-1;
        margin-bottom: 0 !important
    }
}

@media (max-width: 1349px) {
    .cards.layout--3 .tiles {
        grid-auto-flow: column;
        grid-auto-columns: auto;
        max-width: none;
        margin-top: 0;
        margin-bottom: calc(-1*var(--scroll-horizontal-padding)) !important
    }
}

.cards.layout--3 .tile {
    position: static;
    min-height: 0;
    -webkit-backdrop-filter: blur(3rem);
    backdrop-filter: blur(3rem);
    background: none;
    background-image: radial-gradient(circle at top left, color-mix(in srgb, var(--color-background) 10%, transparent), color-mix(in srgb, var(--color-background) 60%, transparent))
}

.cards.layout--3 .tile .rich-text {
    font-weight: 600
}