site/_src/_assets/styles/_sections.scss

.section {
    padding-top: ($spacer * 3);
    padding-bottom: ($spacer * 3);

    &:last-child { border-bottom: 0; }

    // use this so animated elements coming in from outside of screen
    // don't affect layout
    overflow: hidden;

    .row {
        flex: 0 0 100%;
    }

    @media ($screen-sm) {
        padding-top: ($spacer * 5);
        padding-bottom: ($spacer * 5);
    }
}

.section-header {
    margin-bottom: ($spacer * 4);
}

.section-title,
.section-description {
    text-align: center;

    @media ($screen-sm) {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .text-left & {
        text-align: left;
    }
}

.section-title {
    @extend .h2;
    margin-top: 0;
    margin-bottom: ($spacer * 2);

    // the bottom line
    &::after {
        content: '';
        height: 2px;
        width: 3rem;
        display: block;
        margin: ($spacer * 2) auto 0;
        background: $gray-light;
    }

    .text-left & {
        &:after {
            margin-left: 0;
        }
    }
}

.section-description {
    font-size: $font-size-lg;
    margin-bottom: 0;
    color: $brand-main-gray-lighter;

    + .section-description {
        margin-top: $spacer;
    }
}

.section-actions {
    margin-top: $spacer;

    .btn {
        margin-left: 5px;
        margin-right: 5px;
        min-width: 200px;
    }
}


//
// Section backgrounds
//
.background--blue {
    background: $brand-main-blue;
}

.background--darker {
    background: $gray-dark;
}

.background--light {
    background: $brand-main-gray-lighter;

    .section-title,
    p {
        color: $brand-main-gray;
    }
}

.background--gray {
    background: $brand-main-gray;
}

.background--green {
    background: $brand-main-green;

    .section-title,
    p {
        color: $brand-main-blue;
    }

    .section-title {
        &:after {
            background: darken($brand-main-green, 10%);
        }
    }

    .feature__icon {
        stroke: darken($brand-main-green, 15%);
        color: darken($brand-main-green, 15%);
    }

    .feature__title {
        color: $brand-main-blue;
    }

    .feature__text {
        color: $brand-main-gray-lighter;
    }
}


//
// Photo background
//
.background--photo {
    @include color-overlay;

    // background
    background: url('../img/hero-berlin.jpg') no-repeat top center;
    background-size: cover;

    .row * {
        position: relative;
        z-index: 5;
    }

    .section-title {
        &::after {
            background: rgba($brand-main-blue-light, .5);
        }
    }

    .section-title,
    .section-description,
    .header__title {
        color: #fff;
    }
}


//
// Specific sections
//
@import '_sections/section-cta-whitepaper';
@import '_sections/section-cta-features';
@import '_sections/section-cta-community';
@import '_sections/section-partners';