.lp-mentor
  &.is-welcome-index
    height: 100%

.lp-mentor__inner
  display: flex
  flex-direction: column
  gap: 1rem
  +media-breakpoint-up(md)
    padding: 1.25rem 1.5rem 1.5rem
  +media-breakpoint-down(sm)
    padding: .75rem 1rem 1rem
  .lp-mentor.is-articles-show &
    padding: .75rem 1rem 0
  .lp-mentor.is-articles-show &:last-child
    padding-bottom: 1rem

.lp-mentor__header
  display: flex
  gap: 1rem
  align-items: flex-start
  +media-breakpoint-up(md)
  +media-breakpoint-down(sm)
    flex-direction: column

.lp-mentor__header-start
  +media-breakpoint-up(md)
    flex: 0 0 4.5rem
  +media-breakpoint-down(sm)
    width: 100%
    display: flex
    align-items: center

.lp-mentor__header-end
  flex: 1
  display: flex
  flex-direction: column
  gap: .5rem
  +media-breakpoint-up(md)
  +media-breakpoint-down(sm)
    width: 100%


.lp-mentor__image
  border-radius: .25rem
  +media-breakpoint-up(md)
    width: 100%
  +media-breakpoint-down(sm)
    width: 3rem
    display: block
    margin-inline: auto

.lp-mentor__name
  font-weight: 800
  color: var(--main)
  +media-breakpoint-up(md)
    +text-block(1.5rem 1.2)
  +media-breakpoint-down(sm)
    +text-block(1.125rem 1.2)
    text-align: center

.lp-mentor__job
  font-weight: 400
  color: var(--main)
  +media-breakpoint-up(md)
    +text-block(.875rem 1)
    margin-bottom: .125rem
  +media-breakpoint-down(sm)
    +text-block(.625rem 1)
    text-align: center
    margin-bottom: .125rem

.lp-mentor__sns
  display: flex
  +media-breakpoint-up(md)
    gap: .75rem
  +media-breakpoint-down(sm)
    gap: .5rem
    flex-wrap: wrap
    justify-content: center

.lp-mentor__sns-item-link
  color: var(--main)
  display: flex
  justify-content: center
  align-items: center
  text-decoration: none
  border: solid 1px var(--main)
  border-radius: .25rem
  transition: all .2s ease-out
  &:hover
    color: var(--welcome-pink)
  +media-breakpoint-up(md)
    +size(2.25rem)
    +text-block(1.25rem 1.45)
  +media-breakpoint-down(sm)
    +size(1.75rem)
    +text-block(1rem 1.45)


.lp-mentor__body
  font-size: .875rem
  &.is-trancate
    overflow: hidden
    display: -webkit-box
    text-overflow: ellipsis
    -webkit-box-orient: vertical
    -webkit-line-clamp: 3
    +media-breakpoint-up(md)
      height: 67.2px
    +media-breakpoint-down(sm)
      display: none

  &.is-temp
    +text-block(.875rem 1.6)
    img
      width: 6.25rem
      float: right
      margin-left: 1rem
      margin-bottom: 0.75rem
      &.has-3-books
        width: 8.25rem
      &.has-5-books
        width: 10rem
    a
      color: var(--link-text)
      text-decoration: underline
      cursor: pointer
    a:hover
      text-decoration: none
