#primary > .author-block { border-bottom: 1px solid rgba($black_color, 0.1); padding-bottom: 30px; margin-bottom: 50px; } .author-block { display: flex; flex: 1; flex-wrap: wrap; .author-img { width: 120px; height: 120px; border-radius: 100%; overflow: hidden; img { width: 100%; height: 100%; object-fit: cover; } }//.author-img .author-content-wrap { width: calc(100% - 120px); padding-left: 35px; .author-name { margin-top: 0; margin-bottom: 20px; font-size: 0.7778em; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; border-bottom: 1px solid rgba($primary_color, 0.3); padding-bottom: 15px; position: relative; &:after { content: ""; background: $primary_color; width: 100px; height: 1px; position: absolute; bottom: -1px; left: 0; } .sub-title { display: block; color: #999; margin-bottom: 5px; font-size: 0.857142em; } }//.author-name .author-info { font-size: 0.8888em; line-height: 1.63em; }//.author-info .author-social { margin-top: 20px; ul { display: flex; flex: 1; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; li { font-size: 0.8888em; margin-right: 30px; margin-bottom: 20px; a { color: #999; svg.svg-inline--fa { margin-top: 0; margin-right: 5px; width: 30px; height: 30px; text-align: center; line-height: 28px; border: 1px solid rgba($black_color, 0.1); border-radius: 100%; padding: 7px; color: $black_color; vertical-align: middle; } &:hover svg.svg-inline--fa { background: $primary_color; border-color: $primary_color; color: $white_color; } }//a }//li }//ul }//.author-social }//.author-content-wrap }//.author-block @include media(xs) { .author-block { flex-direction: column; align-items: center; text-align: center; .author-img { margin-bottom: 30px; }//.author-img .author-content-wrap { width: 100%; padding-left: 0; .author-name { &:after { right: 0; margin: 0 auto; } }//.author-name .author-social { ul { justify-content: center; }//ul }//.author-social }//.author-content-wrap }//.author-block }//@include media(xs)