.l-author { width: 100%; display: flex; padding: 50px 0; justify-content: space-between; flex-direction: column; align-items: center; @include rwd($break-flow) { flex-direction: row; align-items: flex-start; } h2 { margin: 0; font-weight: 600; font-size: 21.5px; line-height: 140%; border-bottom: 1px solid #D9D9D9; padding-bottom: 15px; padding-top: 5px; letter-spacing: -0.01em; color: #007880; margin-bottom: 23px; } .row { width: 100%; &:nth-child(1) { > div { display: flex; flex-wrap: wrap; @include rwd($break-wide) { flex-wrap: nowrap; } } h2 { width: 100%; } .l-author__photo { flex-shrink: 0; width: calc(50% - 24px); @include rwd($break-wide) { width: 238px; } img { width:100%; } } } &:nth-child(2) { max-width: 415px - 32px; padding-top: 48px; @include rwd($break-flow) { max-width: 415px; padding-left: 32px; } } } } .l-author__info { display: contents; min-width: 364px; @include rwd($break-wide) { display: block; } h3 { margin: 0; font-weight: 600; font-size: 31px; line-height: 140%; letter-spacing: -0.01em; color: #007880; width: 40%; } p { margin-top: 20px; font-weight: normal; font-size: 18px; line-height: 150%; color: #474747; } h4 { font-size: 18px; line-height: 150%; font-weight: bolder; color: #474747; } ul { padding: 0; list-style: none; margin-top: 0.25rem; margin-bottom: 0; li { font-size: 18px; line-height: 150%; font-weight: normal; } } dt { float: left; clear: left; margin-right: .4em; font-weight: normal; font-size: 18px; line-height: 150%; } dd { margin-left: 0; font-weight: normal; font-size: 18px; line-height: 150%; } } .l-author__photo { margin: 0; margin-right: 16px; @include rwd($break-wide) { margin-right: 50px; } img { border-radius: 10px; overflow: hidden; } figcaption { margin-top: 5px; font-weight: normal; font-size: 15px; line-height: 160%; color: #808080; } } .l-author__quotes { background: #E1F1F2; border-radius: 10px; padding: 48px 32px 40px 32px; position: relative; &:before { display: flex; align-items: center; justify-content: center; content: $icon-quote; top: 0; transform: translateY(-50%); font-family: '#{$icomoon-font-family}' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: white; background-color: #007880; font-size: 33px; width: 60px; height: 60px; border-radius: 50%; position: absolute; } } .l-author__quotes__slider { display: flex; div { em { font-style: italic; font-weight: 300; font-size: 28px; line-height: 140%; letter-spacing: -0.02em; color: #083F4D; p { font-size: inherit; line-height: inherit; margin-top: 0; } } > p { font-style: normal; font-weight: normal; font-size: 15px; line-height: 160%; color: #007880; } } } .l-author__quotes__slider__item { max-width: 336px; outline: 0; .verse-indent { padding-left: 1em; &.verse-indent-2 { padding-left: 1.1em; } &.verse-indent-3 { padding-left: 1.2em; } &.verse-indent-4 { padding-left: 1.3em; } &.verse-indent-5 { padding-left: 1.4em; } &.verse-indent-6 { padding-left: 1.5em; } &.verse-indent-7 { padding-left: 1.6em; } &.verse-indent-8 { padding-left: 1.7em; } &.verse-indent-9 { padding-left: 1.8em; } &.verse-indent-10 { padding-left: 1.9em; } &.verse-indent-11 { padding-left: 2em; } &.verse-indent-12 { padding-left: 2.1em; } } .verse-cont { padding-left: 2.1em; } .verse-p { padding-left: 1em; } .verse-right { text-align: right; } .verse-center { text-align: center; } } .l-author__header { display: flex; align-items: center; width: 100%; border-bottom: 1px solid #D9D9D9; padding-bottom: 22px; figure { padding: 0; font-size: 0; width: 40px; height: 40px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin: 0 12px 0 0; img { max-width: 100%; } } h1 { font-weight: $bold; font-size: 37px; line-height: 130%; letter-spacing: -0.01em; color: #083F4D; margin: 0; span { font-weight: $regular; } } }