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

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

    // vertically center everything
    display: flex;
    align-items: center;
    min-height: 420px;

    .row { flex: 1; }

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

.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;
    }
}

.section-title {
    font-size: $font-size-h3;
    margin-top: 0;
    margin-bottom: 0;

    &:after {
        content: "";
        height: 2px;
        width: 5rem;
        display: block;
        margin: ($spacer * 2) auto 0 auto;
        background: lighten($brand-main-gray, 30%);
    }

    @media ($screen-sm) {
        font-size: $font-size-h2;
    }
}

.section-description {
    color: $text-color;
    margin-bottom: 0;

    + .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; // fallback
    background: linear-gradient(to bottom right, $brand-main-blue 0%, lighten($brand-main-blue, 10%) 100%);

    * { color: #fff }
}

.background--dark {
    background: $brand-main-blue-dark; // fallback
    background: linear-gradient(to bottom right, $brand-main-blue-dark 0%, lighten($brand-main-blue-dark, 10%) 100%);

    * { color: #fff }
}

.background--gray {
    background: $brand-main-gray; // fallback
    background: linear-gradient(to bottom right, $brand-main-gray 0%, lighten($brand-main-gray, 10%) 100%);

    * { color: #fff }
}