#whoami { padding: 20px 0 50px; .page-contents-center { padding: 40px; @include flex-center-col; h2 { text-align: center; background-color: $medium_grey; @include flex-center-col; width: 220px; height: 220px; border-radius: 100%; padding: 30px; margin: 40px 0; color: $blue_3; } .presentation-card { .header { display: grid; grid-template-columns: auto 1fr; gap: 30px; padding: 50px 0; .pic { @include flex-center-col; img { width: 150px; height: auto; border-radius: 100%; } } .header-text { h3 { font-size: 22px; color: $light_1; margin: 0; } h4 { font-size: 18px; } strong, h4 { color: $light_1; } } } .body { p { font-size: 18px; font-style: italic; font-family: serif; color: $dark_3; *:not(blue, a) { color: $dark_3; } } } } } @media screen and (max-width: $screen_s) { .page-contents-center { .presentation-card { .header { @include flex-center-col; .header-text { text-align: center; } } } } } }