.content-cards-container {
    padding-block: 6rem 10rem;
    display: grid;
    grid-template-areas: "contentCards";
    overflow: hidden;
    position: relative;
}

.content-cards-container > * {
    grid-area: contentCards;
}

.content-cards-container .region {
    position: relative;
    z-index: 1;
    width: 100%;
}

.content-cards-container .headline {
    text-align: center;
    width: 100%;
    color: var(--color-primary-black);
    font-weight: 700;
}

.content-cards-container.dark-green-bg .headline {
    color: var(--color-primary-white);
}

.content-cards-container .content-cards{
    margin-top: 4rem;
}

.content-cards-container .content-cards {
    display: flex;
    flex-flow: row wrap;
    gap: 4rem;
    align-items: flex-start;
}

.content-cards-container:is(.cards-1)  .content-cards {
    justify-content: center;
}

.content-cards-container:is(.cards-2, .cards-4) .single-content-card:is(:nth-child(2), :nth-child(4)) {
    justify-self: flex-start;
}

.content-cards-container:is(.cards-2, .cards-4) .single-content-card:is(:nth-child(1), :nth-child(3)) {
    justify-self: flex-end;
}

.content-cards-container:is(.cards-2, .cards-4) .content-cards{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: flex-start;
}

.content-cards-container.cards-5 .content-cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.content-cards-container .single-content-card {
    display: grid;
    grid-template-rows: 35rem 32rem;
    max-width: 44rem

}

.content-cards-container .single-content-card picture {
    max-width: 44rem;
    max-height: 35rem;
    height: 100%;
    overflow: hidden;
}

.content-cards-container .single-content-card img {
    border-radius: 1rem 1rem 0 0;
    min-width: 30rem;
    height: 100%;
    transform: scale(1.1);
    transition: 1s ease-in-out all;
}

.content-cards-container.animate .single-content-card img {
    transform: scale(1.0);
}

.content-cards-container .content-card-text {
    background: var(--color-primary-white);
    color: var(--color-brand-blue);
    padding: 2rem;
    border-radius:  0 0 1rem 1rem;
    display: grid;
    grid-template-rows: 1fr 4fr 1fr;
    font-weight: 600;
}

.content-cards-container .content-card-title {
    font-size: 2.1rem;
}

.content-cards-container .content-card-text .content-card-link {
    color: var(--color-brand-light-blue);
    text-decoration: none;
    font-weight: 800;
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.content-cards-container .content-card-text .content-card-link:hover {
    text-decoration: underline;
}

.content-cards-container .content-cards-background-svg {
    background-image: url("../svgs/content-cards-background-svg.svg");
    width: 120rem;
    height: 120rem;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(30rem, 55rem);
    position: absolute;
    align-self: flex-end;
    justify-self: flex-end;
}


@media screen and (max-width: 90em) {
    .content-cards-container:not(:is(.cards-1, .cards-2, .cards-4)) .content-cards {
        row-gap: 2rem;
        column-gap: 1rem;
        justify-content: space-between;
        padding-inline: 3rem;
    }
    .content-cards-container .single-content-card {
        max-width: 41rem;
    }
}

@media screen and (max-width: 85em) {
    .content-cards-container:not(:is(.cards-2, .cards-1)) .content-cards {
        display: flex;
        flex-flow: column wrap;
    }
    .content-cards-container:not(:is(.cards-2, .cards-1)) .single-content-card {
        grid-template-rows: unset;
        grid-template-columns: 44rem auto;
        max-width: 100%;
        padding-inline: 6rem;
    }

    .content-cards-container:not(:is(.cards-2, .cards-1)) .single-content-card img {
        border-radius: 1rem 0 0 1rem;
    }
    .content-cards-container:not(:is(.cards-2, .cards-1)) .single-content-card .content-card-text {
        border-radius: 0 1rem 1rem 0 ;
    }
}



@media screen and (max-width: 60em) {

    .content-cards-container .content-cards {
        display: flex !important;
        flex-flow: column wrap;
        padding-inline: var(--mobile-inline-padding);
        align-items: center;
    }

    .content-cards-container:is(.cards-2, .cards-4) .content-cards {
        align-items: center;
    }
    .content-cards-container:is(.cards-6, .cards-5, .cards-4, .cards-3, .cards-2, .cards-1) .single-content-card {
        grid-template-columns: unset;
        grid-template-rows: auto auto;
        max-width: 44rem;
        padding-inline: 0;
    }

    .content-cards-container .single-content-card > .content-card-text {
        border-radius:  0 0 1rem 1rem !important;
    }

    .content-cards-container .content-card-image img {
        border-radius: 1rem 1rem 0 0 !important;
    }
}