.article-author
  &.is-welcome-index
    height: 100%

.article-author__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
  .article-author.is-articles-show &
    padding: .75rem 1rem 0
  .article-author.is-articles-show &:last-child
    padding-bottom: 1rem

.article-author__header
  display: flex
  gap: 1.5rem
  align-items: flex-start

.article-author__header-start
  flex: 0 0 4.5rem

.article-author__header-end
  flex: 1
  display: flex
  flex-direction: column
  gap: .5rem

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

.article-author__name
  font-weight: 800
  color: var(--main)
  +media-breakpoint-up(md)
    +text-block(1.5rem 1.2)
  +media-breakpoint-down(sm)
    +text-block(1.5rem 1.2)

.article-author__job
  font-weight: 400
  +text-block(.875rem 1)
  margin-bottom: .125rem
  color: var(--main)

.article-author__sns
  +media-breakpoint-up(md)
    display: flex
    gap: .75rem
  +media-breakpoint-down(sm)
    display: none

.article-author__sns-item-link
  +text-block(1.25rem 1.45)
  color: var(--main)
  display: flex
  +size(2.5rem)
  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)

.article-author__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
