.about_author_layout { .about_author_layout_container { padding-top: 35px; padding-bottom: 50px; .about_author_title_container { width: max-content; .about_author_title { font-size: 24px; line-height: 23px; color: $black-color; font-family: $main-font; font-weight: 700; position: relative; margin-bottom: 35px; &:after { position: absolute; content: ''; background-color: $yellow-color; height: 3px; left: 0; right: 0; bottom: -5px; } } } .about_author_subtitle { min-height: 120px; padding: 27px 139px; background-color: $yellow-color; position: relative; @media(max-width: 767px) { margin-right: -15px; margin-left: -15px; } @media(max-width: 1199px) { min-height: 140px; padding: 19px 30px; } .about_author_letter_square { width: 42px; height: 42px; @media(min-width: 1200px) { width: 65px; height: 65px; } } .about_author_name_div { position: absolute; background-color: $yellow-color; left: 177px; top: 41px; @media(max-width: 1199px) { left: 53px; top: 28px; } .about_author_name { color: $black-color; font-weight: 700; font-size: 36px; line-height: 112%; font-family: $main-font; @media(max-width: 1199px) { font-size: 24px; } } } } .about_author_container { display: flex; @media(max-width: 1199px) { flex-direction: column-reverse; top: -77px; position: relative; } .about_author_description { width: 58%; @media(max-width: 1199px) { width: 100%; } @media(min-width: 1200px) { padding-left: 98px; padding-top: 30px; } .about_author_div { padding-bottom: 32px; border-bottom: 1px solid #C4C4C4; .about_author_p { color: $black-color; font-size: 16px; line-height: 130%; font-family: $main-font; margin-bottom: 20px; @media(max-width: 1199px) { margin-bottom: 15px; margin-top: 15px; } } .about_author_ul { list-style: square; padding-left: 22px; .about_author_li { font-size: 16px; line-height: 130%; font-family: $main-font; color: $black-color; font-weight: 400; padding-left: 9px; &:not(:last-child) { margin-bottom: 20px; } &::marker { font-size: 30px; } } } } .about_author_p { margin-top: 31px; margin-bottom: 30px; } .about_author_networks_ul { display: flex; width: 35%; @media(max-width: 767px) { width: 55%; } @media(min-width: 768px) and (max-width: 1199px) { width: 30%; } .networks_ul { display: flex; justify-content: space-between; width: 100%; .networks_li { &:hover { svg { transform: scale(1.2); } } } } } } .about_author_comment { @media(min-width: 1200px) { width: 40%; position: relative; top: -166px; right: 0; margin-bottom: -90px; } .about_author_photo_div { width: 100%; .about_author_photo { width: 462px; height: 750px; position: relative; @media(max-width: 1199px) { width: 306px; height: 496px; margin: 0 auto; display: block; } } } .about_author_attribute { display: block; top: -15px; left: 55px; position: relative; z-index: 100; @media(max-width: 1199px) { bottom: 336px; left: 0; } } .about_author_comment_div { background: $white-color; box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.25); padding: 40px 24px; max-width: 398px; position: relative; left: 63px; top: -34px; @media (max-width: 1199px) { left: 0; padding: 40px 14px; max-width: 100%; } .about_author_comment_title { font-size: 16px; line-height: 130%; font-family: $main-font; color: $black-color; font-weight: 700; text-align: center; margin-bottom: 10px; } .about_author_comment_p { font-size: 16px; line-height: 130%; font-family: $main-font; color: $black-color; font-weight: 400; text-align: center; } } } } } }