#mentors { .mentor { display : flex; flex-direction : row; margin : 4rem auto; .photo-container { flex : 1; img { display : block; height : auto; width : 100%; margin-top : 2rem; } } .description { flex : 2; display : flex; flex-direction : row; * { margin : 0.1rem 0; } h1, h4 { margin : 1rem 0; } .general { flex : 2; margin : 0 3rem; } .varia { flex : 3; margin : 1rem 3rem 0; } } .mentor-info-text { flex : 3; display : flex; flex-direction : column; padding-left : 5rem; padding-right : 3rem; } } } @media (max-width : 900px) { #mentors { .mentor { flex-direction : column; .description { flex-direction : column; .general, .varia { margin : 0; } } .photo-container { img { max-height : 75vh; max-width : 75vh; } } } } }