.relatedPosts
  margin-top: 1rem

  .relatedPosts_headline
    margin-bottom: 5px
    font-weight: 700
    font-size: 20px

  .relatedPosts_item
    position: relative
    float: left
    overflow: hidden
    margin: 5px
    width: calc(100% / 3 - 10px)
    height: 200px
    background: $dark-black

    &:hover
      .relatedPosts_cover
        opacity: .8
        transform: scale(1.1)

  .relatedPosts_cover
    width: 100%
    height: 100%
    opacity: .4
    transition: all .6s
    object-fit: cover

  .relatedPosts_main
    position: absolute
    top: 50%
    padding: 0 1rem
    width: 100%
    color: $white
    transform: translate(0, -50%)

    .relatedPosts_date
      color: $light-grey
      font-size: 90%

    .relatedPosts_title
      display: -webkit-box
      overflow: hidden
      -webkit-line-clamp: 2
      -webkit-box-orient: vertical

  .clear_both
    clear: both

@media screen and (max-width: 768px)
  .relatedPosts
    .relatedPosts_item
      margin: 2px
      width: calc(100% / 2 - 4px)
      height: 150px

@media screen and (max-width: 480px)
  .relatedPosts
    .relatedPosts_item
      width: calc(100% - 4px)