.section {
    min-height: 100vh;
    scroll-snap-align: start;
    box-sizing: border-box;
    padding: 1em;
}

.actionGroup {
    display: flex;
    text-align: center;
    gap: .5em;
    padding-top: 2em;
    flex-direction: column;
}

.subSectionContent {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box {
    max-width: 40vw;
    /* filter: drop-shadow(0px 10px 14px rgba(0, 0, 0, 0.3)); */
}


.sectionContent>h2 {
    text-align: center;
}

.container {
    scroll-snap-type: y mandatory;
    display: flex;
    flex-direction: column;
}

.section[data-charity='drk'] {
    background-color: #ce1609;
    --Text:white;
    color: var(--Text);
}

.section[data-charity='sternenregen'] {
    background-color: rgb(230, 174, 23);
    --Text:rgba(0, 0, 0, 0.819);;
    color: var(--Text);
}

.section[data-charity='herzenssache'] {
    background-color: #e62730;
    --Text:white;
    color: var(--Text);
}

.section[data-charity='kovive'] {
    background: linear-gradient(324deg, rgba(175, 16, 140, 1) 0%, rgba(61, 151, 216, 1) 100%);
    --Text:white;
    color: var(--Text);
}

.section[data-charity='theodora'] {
    background: linear-gradient(311deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
    color: ;
    --Text:rgba(0, 0, 0, 0.667);
    color: var(--Text);
}

@media (width > 1050px) {


    .subSectionContent {
        display: flex;
        flex-direction: row;
        gap: 2em;
        align-items: flex-start;
    }

    .box {
        max-width: 25ch;
        transition: all 0.5s linear;
    }

    .container {
        gap: 3em;
        align-items: center;
        padding-top: 3em;
        padding-bottom: 3em;
    }

    .section {
        margin: 0em;
        box-sizing: border-box;
        max-width: min(80%, 1400px);
        min-height: auto;
        transition: all 0.5s linear;
        border-radius: 2em;
    }

    @media (prefers-reduced-motion: no-preference) {
        .section:hover {
            transform: perspective(700px) rotateX(calc(5deg * calc(var(--relativeY) - .5))) rotateY(calc(5deg * calc(var(--relativeX) - .5)));
        }

        .section:hover .box {
            transform: scale(calc(1 + calc(var(--relativeX)/5))) rotate(calc(-15deg * var(--relativeX))) translateX(calc(-2em * var(--relativeX)));
            /* transform: scale(1.1) rotate(-15deg) translateX(-2em); */
        }
    }

    .sectionContent {
        padding: 1em;
        align-items: start;
    }

    .actionGroup {
        flex-direction: row;
    }

}