body.page-about { overflow-x: hidden; .entry-header { padding: ms( 4 ) ms( 1 ); text-align: center; .entry-title { font-size: ms( 12 ); line-height: 1; margin: 2rem auto 1rem; @include breakpoint( 0, 480px ) { font-size: ms( 10 ); } } .entry-description { color: rgba( 255, 255, 255, 0.8 ); font-size: ms( 2 ); font-weight: 300; margin: -.4rem auto 2rem; } } .shapes { height: 480px; margin: 4rem 0; position: relative; .parallelogram { height: 260px; width: 310px; &:hover, &:focus, &:active { text-decoration: none; } &.technology { background-color: darken( #0073aa, 2% ); top: 0; left: 0; z-index: 1; &:hover, &:focus, &:active { background-color: darken( #0073aa, 12% );; } } &.community { background-color: #67598e; right: 0; bottom: 0; &:hover, &:focus, &:active { background-color: darken( #67598e, 10% ); } } h3, p { margin: 0; transform: skew( 15deg ); } } @include breakpoint( 480px ) { height: 610px; .parallelogram { height: 336px; padding: 7rem 0; width: 400px; } } @include breakpoint( 640px ) { height: 580px; .parallelogram { height: 315px; padding: 5rem 0; width: 480px; &:before { font-size: ms( 14 ); height: 84px; width: 84px; } } } @include breakpoint( 768px ) { height: 323px; margin: 4rem 0; .parallelogram { height: 282px; padding: 4rem 0; width: 430px; &.technology { left: auto; right: 45%; top: 40px; } &.community { bottom: auto; left: 45%; } } } @include breakpoint( 1024px ) { height: 420px; .parallelogram { height: 380px; padding: 6rem 0; width: 580px; &.technology { right: 43%; } &.community { left: 43%; } &:before { font-size: ms( 16 ); height: 108px; width: 108px; } } } } .areas { h3 { @extend h4; } } }