.profile { margin-top: 20vh; display: flex; flex-direction: row-reverse; align-items: center; } .profile .profile-content { width: 50%; margin: 0 $margin-l-0 0 0; } .profile .profile-content .profile-title { margin-top: 0; margin-bottom: $margin-m-0; } .profile .profile-content .profile-body { margin-top: 0; margin-bottom: $margin-m-1; color: $color-text-secondary; } .profile .profile-content .profile-link { margin-top: 0; margin-bottom: $margin-m-1; font-size: 0.9375rem; } .profile .profile-content .profile-link a { text-decoration: underline; text-underline-offset: 3px; transition: color $transition-duration ease; } .profile .profile-content .profile-link a:hover { color: $color-accent; } .profile .profile-image { width: 50%; display: flex; align-items: center; justify-content: center; } .profile .profile-image img { max-width: 100%; max-height: 35vh; object-fit: contain; } @media (max-width: 480px) { .profile { flex-wrap: wrap; align-items: flex-start; margin-top: $margin-l-0; } .profile .profile-content { width: 100%; margin-top: $margin-m-0; } .profile .profile-content .profile-link { font-size: 0.875rem; } .profile .profile-image { width: 100%; } .profile .profile-image img { max-height: 25vh; } }