// variables
$module-bg:        #EEEEEE;

// styling
.team {
    background: $module-bg;
    padding: 4rem 0;
    text-align: center;
    @include clearfix;
    h2 {
        color: $light-gray;
        margin: 0;
        line-height: 100%;
    }
    p {
        margin: 1rem 0;
    }
    .members {
        width: 100%;
        text-align: left;
        padding-top: 2rem;
        .member {
            display: inline-block;
            float: left;
            width: 29%;
            margin: 0 1rem;
            margin-bottom: 2rem;
            @include breakpoint(mobile-only) {
                display: block;
                width: 100%;
                text-align: center;
                margin: 0;
                margin-bottom: 2rem;
            }
            @include breakpoint(tablet-range) {
                display: block;
                width: 44%;
                margin-bottom: 2rem;
            }
            h4 {
                text-align: left;
                margin-bottom: 0;
                @include breakpoint(mobile-only) {
                    text-align: center;
                }
            }
            hr {
                margin: 1rem 0;
            }
        }
        .social-icons {
            line-height: 2rem;
            margin: 0;
            list-style: none;
            @include breakpoint(mobile-only) {
                text-align: center;
                display: inline-flex;
            }

            li {
                @extend .default-animation;
                float: left;
                width: 2.1rem;
                height: 2.1rem;
                background: $white;
                border-radius: 100%;
                text-align: center;
                margin-right: 0.8rem;
                a {
                    @extend .default-animation;
                    color: $black;
                    display: block;
                    margin-top: 0.1rem;
                }
                &:hover {
                    background: transparentize($white, 0.5);
                    i {
                        color: $core-accent;
                    }
                }
            }
        }
    }
}