%skew-block {
    padding: 50px 0 70px;
    margin-bottom: 0;
    position: relative;
    z-index: 0;

    @include breakpoint(md) {
        padding: 65px 0 100px;
    }

    @include breakpoint(lg) {
        padding: 130px 0 200px;
    }

    &::before {
        @include skew-block($directions: 'top-bottom', $skew-size: 20px);
        @include absolute(0, null, null, 50%);
        @include size(100vw, 100%);

        background-color: var(--rocket-ui-section-background);
        content: '';
        transform: translateX(-50%);
        z-index: -1;

        @include breakpoint(md) {
            @include skew-block($directions: 'top-bottom', $skew-size: 40px);
        }

        @include breakpoint(lg) {
            @include skew-block('top-bottom');
        }
    }
}

%skew-block--green {
    &::before {
        --rocket-ui-section-background: var(--rocket-color-green-200);
    }

    .title,
    .text-lg {
        color: var(--rocket-color-white-base) !important;
    }
}

%skew-block--light-green {
    &::before {
        --rocket-ui-section-background: var(--rocket-color-green-100);
    }
}

%skew-block--yellow {
    &::before {
        --rocket-ui-section-background: var(--rocket-color-yellow-100);
    }
}

%skew-block--red {
    &::before {
        --rocket-ui-section-background: var(--rocket-color-red-200);
    }
}

.section {
    --rocket-ui-section-margin-value: var(--rocket-ui-section-margin, 107px) 0;
    --rocket-ui-section-background: transparent;

    $this: &;

    position: relative;
    width: 100%;
    margin: var(--rocket-ui-section-margin-value);
    background-color: var(--rocket-ui-section-background);

    &__heading {
        display: flex;
        flex-direction: column;
        margin-bottom: 50px;
        row-gap: 25px;
    }

    &__title {
        display: flex;
    }

    &__teaser {
        display: flex;
    }

    &__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 70px;
        text-align: center;
        column-gap: 2.25rem;
        row-gap: 1.5rem;

        &.is-left {
            @include breakpoint(md) {
                justify-content: flex-start;
                padding: 0 110px;
            }
        }
    }

    &--overflow {
        overflow: hidden;
    }

    &--filled {
        --rocket-ui-section-background: var(--rocket-color-black-base);

        padding: 130px 0;

        @include breakpoint(lg) {
            padding: 50px 0;
        }
    }

    &--skew-block {
        @extend %skew-block;
    }

    &--green {
        --rocket-ui-section-background: var(--rocket-color-green-200);

        padding-block: 50px;

        @include breakpoint(lg) {
            padding-block: 80px;
        }

        .title,
        .text-lg {
            color: var(--rocket-color-white-base) !important;
        }
    }

    &--light-green {
        --rocket-ui-section-background: var(--rocket-color-green-100);

        padding-block: 50px;

        @include breakpoint(lg) {
            padding-block: 80px;
        }

        &::before {
            @include absolute(0, null, null, 50%);
            @include size(100vw, 100%);

            background-color: var(--rocket-color-green-100);
            content: '';
            transform: translateX(-50%);
            z-index: -1;
        }
    }

    &--yellow {
        --rocket-ui-section-background: var(--rocket-color-yellow-100);

        padding-block: 50px;

        @include breakpoint(lg) {
            padding-block: 80px;
        }
    }

    &--red {
        --rocket-ui-section-background: var(--rocket-color-red-200);

        padding-block: 50px;

        @include breakpoint(lg) {
            padding-block: 80px;
        }

        &::before {
            @include absolute(0, null, null, 50%);
            @include size(100vw, 100%);

            background-color: var(--rocket-color-red-200);
            content: '';
            transform: translateX(-50%);
            z-index: -1;
        }
    }

    &--title-center {
        #{$this} {
            &__title,
            &__teaser {
                justify-content: center;
                text-align: center;
            }
        }
    }

    &--offset-bottom-lg {
        @include breakpoint(lg) {
            margin-bottom: 185px;
        }
    }

    &--offset-lg {
        @include breakpoint(lg) {
            margin-top: 200px;
            margin-bottom: 200px;
        }
    }
}