.app-section {
    position: relative;
    padding-top: 77px;
    padding-bottom: 85px;
    background-color: var(--section-bg-color, var(--color-app-background));
    background-image: var(--section-bg, none);
    background-size: cover;
    color: var(--section-text-color, var(--color-text-primary));

    @include breakpoint-down('lg') {
        padding-top: 51px;
        padding-bottom: 81px;
    }

    @include breakpoint-down('sm') {
        padding-bottom: 27px;
    }

    &.is-rounded {
        border-radius: 2rem;
    }

    &.is-full-height {
        display: flex;
        flex-flow: column;
        justify-content: center;
        min-height: min(100vh, 1080px);
        min-height: min(calc(100 * var(--vh, 1vh)), 1080px);

        //@media (max-width: 1200px) {
        //    min-height: min(100vh, 790px);
        //    min-height: min(calc(100 * var(--vh, 1vh)), 790px);
        //}

        @include breakpoint-down('lg') {
            min-height: min(100vh, 629px);
            min-height: min(calc(100 * var(--vh, 1vh)), 629px);
        }

        @include breakpoint-down('sm') {
            min-height: min(100vh, 712px);
            min-height: min(calc(100 * var(--vh, 1vh)), 712px);
        }
    }

    &__header {
        text-align: center;
        margin-bottom: 10px;

        @include breakpoint-down('lg') {
            margin-bottom: 27px;
        }

        @include breakpoint-down('sm') {
            margin-bottom: 19px;
        }

        h2 {
            font-size: var(--typo-headline);
            font-weight: var(--section-header-weight, 700);

            @include breakpoint-down('sm') {
                font-size: 42px;
                letter-spacing: -1px;
            }
        }
    }

    &__description {
        font-family: 'Proxima Nova', sans-serif;
        max-width: 820px;
        text-align: center;
        margin: 0 auto 25px;
        font-size: 21px;
        letter-spacing: -0.2px;
        line-height: 27px;
    }

    &:first-child:not(.welcome) {
        padding-top: 120px;

        @include breakpoint-down('lg') {
            padding-top: 60px;
        }
    }

    &__call-to-scroll {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);

        @include breakpoint-down('lg') {
            &:not(.app-section__call-to-scroll--mobile) {
                display: none;
            }
        }

        .action-marker {
            svg {
                width: 14px;
                margin-right: -1px;
                transition: 0.3s all ease;
                transform: translateY(0%);
            }

            &::before {
                content: "";
                position: absolute;
                height: 0px;
                width: 2px;
                top: 49%;
                left: calc(33% + 9px);
                background: #fff;
                transition: 0.3s all ease;
            }

            &:hover {

                svg {
                    margin-bottom: -20%;
                }

                &::before {
                    height: 15px;
                    transform: translateY(-45%);
                }
            }
        }
    }
}