.index-card
  margin-bottom 2.5rem

.index-img
  img
    display block
    width 100%
    height 10rem
    object-fit cover
    box-shadow 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
    border-radius .25rem
    background-color transparent

.index-info
  display flex
  flex-direction column
  justify-content space-between
  padding-top .5rem
  padding-bottom .5rem

.index-header
  color var(--text-color)
  font-size 1.5rem
  font-weight bold
  line-height 1.4
  white-space nowrap
  overflow hidden
  text-overflow ellipsis
  margin-bottom .25rem

  .index-pin
    color var(--text-color)
    font-size 1.5rem
    margin-right .15rem

.index-btm
  color var(--sec-text-color)

  a
    color var(--sec-text-color)

.index-excerpt
  color var(--sec-text-color)
  margin 0.5rem 0
  height calc(1.4rem * 3)
  overflow hidden
  display flex

  & > div
    width 100%
    line-height 1.4rem
    word-break break-word
    display -webkit-box
    -webkit-box-orient vertical
    -webkit-line-clamp 3

.index-excerpt__noimg
  height auto
  max-height calc(1.4rem * 3)

@media (max-width: 767px)
  .index-info
    padding-top 1.25rem

  .index-header
    font-size 1.25rem
    white-space normal
    overflow hidden
    word-break break-word
    display -webkit-box
    -webkit-box-orient vertical
    -webkit-line-clamp 2

    .index-pin
      font-size 1.25rem

  .index-excerpt
    height auto
    max-height calc(1.4rem * 3)
    margin 0.25rem 0
