.related-wrap
  padding: 2rem 1rem
  &:empty
    display: none

.related-wrap#related-posts
  .related-posts
    width: 100%
    display: flex
    margin: 1rem 0
    overflow-x: scroll
    align-items: flex-start
    scrollbar(8px, 4px)
    padding-bottom: 8px
    border-radius: $border-block
    a
      flex-grow: 0
      flex-shrink: 0
      background: var(--card)
      border-radius: $border-block
      padding-bottom: 1rem
      line-height: 1.2
      display: flex
      flex-direction: column
      overflow: hidden
      min-width: 280px
      width: 40vw
      max-width: 460px
      border: 1px solid var(--hover-block)
      .img
        min-width: 100%
        min-height: 140px
        height: "calc(%s * 0.5)" % @width
        max-height: 230px
        overflow: hidden
        img
          width: 100%
          height: 100%
          object-fit: cover
          &:not(.lazy)
            trans1: transform 1s
      @media screen and (max-width: $device-tablet)
        width: 70vw
        .img
          height: "calc(%s * 0.5)" % @width
      .title
        color: var(--text-p1)
        font-weight: 500
        font-size: $fs-15
        margin: 1rem 1rem 0 1rem
        display: -webkit-box
        -webkit-box-orient: vertical
        overflow: hidden
        -webkit-line-clamp: 2
      .excerpt
        color: var(--text-p2)
        font-size: $fs-13
        margin: 0.4rem 1rem 0 1rem
        display: -webkit-box
        -webkit-box-orient: vertical
        overflow: hidden
        -webkit-line-clamp: 3
      &:hover
        img
          transform: scale(1.04)
    a+a
      margin-left: 1rem


.related-wrap#read-next
  .body
    .post-title
      margin: 0.5rem 0
      line-height: 1.2
      a
        color: inherit
        &:hover
          color: $color-hover
      &.fs14
        color: var(--text-p3)
        font-weight: 500
      &.h2
        color: var(--text-p1)


.related-wrap#comments
  div.cmt-body
    min-height: 150px
    position: relative
    svg.loading
      top: 60px