.thumbnail-card
  padding: 1rem
  +media-breakpoint-up(md)
    height: 100%
  +media-breakpoint-down(sm)
    .col-xs-6 &
      height: 100%

.thumbnail-card__inner
  display: flex
  flex-direction: column
  position: relative
  +media-breakpoint-down(sm)
    gap: .5rem
  +media-breakpoint-up(md)
    gap: .75rem

a.thumbnail-card__inner
  +flex-link
  &:hover
    .thumbnail-card__title
      text-decoration: underline

.thumbnail-card__image-link
  transition: all .2s ease-out
  &:hover
    opacity: .7

.thumbnail-card__image
  display: block
  border-radius: 4px
  aspect-ratio: 1.91 / 1
  width: 100%
  object-fit: cover

.thumbnail-card__title
  +text-block(1.125rem 1.4, 700)
  color: var(--default-text)
  overflow: hidden
  display: -webkit-box
  text-overflow: ellipsis
  -webkit-box-orient: vertical
  -webkit-line-clamp: 2
  max-height: calc(1.125rem * 1.4 * 2)
  .thumbnail-card.is-wip &
    color: var(--muted-text)

.thumbnail-card__title-link
  +hover-link-reversal

.thumbnail-card__metas
  display: flex

.thumbnail-card__meta:not(:first-child)
  margin-left: .75rem

.thumbnail-card__author
  display: flex
  align-items: center
  font-size: .875rem
  color: var(--default-text)
  img
    +size(1.125rem)
    object-fit: cover
    margin-right: .25rem
    border-radius: 50%

.thumbnail-card__date
  +text-block(.8125rem 1.4)
  color: var(--semi-muted-text)

.thumbnail-card__description
  +text-block(.875rem 1.6)
  color: var(--semi-muted-text)
