.single-team-member { .team-member-top { @extend .intro_block; } .team-member { margin-top: -162px; @include media-breakpoint-down(md) { height: -150px; } @include media-breakpoint-down(sm) { height: -125px; } .content-wrapper { background-color: $c-offWhiteLight; } .team-member-intro-bar { background-color: $c-navy; color: $c-white; display: flex; gap: 1rem; height: 394px; justify-content: space-between; align-items: center; @include media-breakpoint-down(md) { height: 300px; } @include media-breakpoint-down(sm) { height: 250px; } .text { padding-left: 2rem; h2 { font-size: 48px; line-height: 49px; font-weight: 600; span { display: block; font-size: 28px; line-height: 28px; } @include media-breakpoint-down(lg) { font-size: 38px; line-height: 39px; span { font-size: 22px; line-height: 22px; } } @include media-breakpoint-down(sm) { font-size: 30px; line-height: 30px; span { font-size: 18px; line-height: 18px; } } } } .image { height: 100%; border-right: 160px solid $c-tan; flex-shrink: 0; @include media-breakpoint-down(lg) { border-right: 80px solid $c-tan; } @include media-breakpoint-down(md) { border-right: 60px solid $c-tan; } @include media-breakpoint-down(sm) { border-right: 10px solid $c-tan; } } img { height: 100%; width: auto; display: block; } } .bio-wrapper { padding: 0 3rem; @include media-breakpoint-down(md) { padding: 0 1.5rem; } .left { padding-top: 4rem; @include media-breakpoint-down(md) { padding-top: 2rem; } a { display: block; color: $c-textGrey; } img { display: block; margin-bottom: 1rem; } } .right { padding: 4rem 2rem 8rem 0; @include media-breakpoint-down(md) { padding: 2rem 1rem 4rem 0; } strong { color: $c-navy; } h2 { @extend .goudy; font-size: 50px; line-height: 50px; color: $c-navy; margin-bottom: 2rem; } } } } }