// 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: 22%; margin: 0 1rem; @include breakpoint(mobile-only) { display: block; width: 100%; text-align: center; margin: 0; 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; } } } } } }