.section-card-navigation {
    margin-block: 8rem;
    isolation: isolate;
}

.section-card-navigation .additional-headline h2{
    font-size: 2.8rem;
    font-weight: 600;

}
.section-card-navigation:where(.wide) > .region {
    max-width: var(--content-width-wide-2);
    grid-column: 2;
}

.section-card-navigation:where(.narrow) > .region {
    max-width: var(--content-width-wide-2);

}
.section-card-navigation:where(.narrow) > .region > * {
    grid-column: 2;
}


.section-card-navigation .card-nav-wrapper{
    margin-left: 6rem;
}


.section-card-navigation .single-card-nav{
    display: grid;
    grid-template-columns: 20rem 5fr;
    grid-template-rows: 1fr;
    place-content: flex-start;
    place-items: center;
    min-height: 20rem;
    margin-block: 4rem;
}

.section-card-navigation.gray .single-card-nav{
    background: var(--color-gray-light-web);
}
.section-card-navigation.teal .single-card-nav{
    background: var(--color-brand-teal);
}
.section-card-navigation .single-card-nav .content-wrap{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 4fr 1fr;
}
.section-card-navigation .single-card-nav .content-wrap > * {
    grid-row: 1;
}
.section-card-navigation .single-card-nav .content-wrap .card-nav-text{
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    justify-content: center;
}

.section-card-navigation.narrow .single-card-nav{
    max-width: 74rem;

}

.section-card-navigation.wide .single-card-nav{
    max-width: var(--content-width-wide-2);
}
.section-card-navigation .single-card-nav > * {
    grid-row: 1;
}


.section-card-navigation .single-card-nav img{
    display: flex;
    align-self: center;
    justify-self: flex-start;
    transform: translateX(-6rem);
    grid-column: 1;
    min-width: 21.4rem;
    object-fit: contain;
    background: var(--color-brand-navy);
}
.section-card-navigation .column > * {
    grid-area: cardNavShort;
    place-items: center;
    place-content: flex-start;
}

.section-card-navigation .column > * {
    grid-row: 1;
}

.section-card-navigation img {
    grid-column: 1 / 3;
    z-index: 1;
    max-height: 13rem;
}

.section-card-navigation .content-wrap {
    /* display: grid;
    grid-template-columns: 5fr 0.5fr;
    width: 100%;
    column-gap: 4rem;
    min-height: 20rem;
    align-content: center;
    padding-block: 2rem; */
    /* display: grid;
    grid-template-columns: 4fr 1fr; */
}

.section-card-navigation.narrow .content-wrap {
    grid-column: 2 / 4;

}

.section-card-navigation.teal .content-wrap {
    background: var(--color-brand-teal);
}

.section-card-navigation.teal .content-wrap :where(.headline, .copy) {
    color: var(--color-primary-white);
}

.section-card-navigation .headline {
    font-size: 2rem;
    grid-area: headline;
    margin: 0 0 0.5rem 0;
}

.section-card-navigation .copy {
    grid-area: copy;
    margin:0;
}

.section-card-navigation .button {
    justify-self: end;
    margin-inline-end: 4rem;
    grid-area: arrow;
    align-self: center;
    grid-column: 10;
}

.section-card-navigation .button > * {
    display: none;
}

.section-card-navigation.cta-mode-arrow .button > .arrow {
    display: block;
}

.section-card-navigation.cta-mode-text .button > .text {
    display: block;
}

@media (max-width: 100em) {
    .section-card-navigation.wide > .region {
        max-width: var(--content-width-wide);
    }
}

@media (max-width: 90em) {
    .section-card-navigation.wide > .region {
        max-width: var(--content-width-normal);
    }
}

@media (max-width: 60em) {
    .section-card-navigation > .region {
        padding-inline: 2rem;
    }

    .sidebar-safe .section-card-navigation > .region {
        padding-inline: 0;
    }

    /* .section-card-navigation:where(.narrow) > .region {
        margin-inline: 5%;
    } */

    .section-card-navigation .column {
        grid-template-columns: 1fr;
        max-width: 50rem;
        margin-inline: auto;
        padding: 2rem;
        row-gap: 2rem;
    }

    .section-card-navigation.gray .column {
        background: var(--color-gray-light-web);
    }

    .section-card-navigation.teal .column {
        background: var(--color-brand-teal);
    }

    .section-card-navigation .column > * {
        grid-row: unset;
        grid-column: unset;
    }

    .section-card-navigation .column .content-wrap {
        display: contents;
    }

    .section-card-navigation .column .content-wrap > * {
        grid-area: unset;
    }

    .section-card-navigation .column .button {
        justify-self: center;
        margin: 0;
    }
}

@media screen and (max-width: 50em){
    .section-card-navigation .card-nav-wrapper{
        margin-inline: auto !important;
    }
    .section-card-navigation .single-card-nav{
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        justify-content: center;
        padding-inline: 4rem;
        margin-block: 8rem;
    }
    .section-card-navigation .single-card-nav img{
        transform: translate(0,-2.5rem);
    }
    .section-card-navigation .single-card-nav .content-wrap{
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        justify-content: center;
    }
    .section-card-navigation .button{
        margin-inline-end: 0;
        transform: translateY(2rem);
    }
}