.links
  .card
    box-shadow none
    min-width 33%
    background-color transparent
    border 0

  .card-body
    margin 1rem 0
    padding 1rem
    border-radius .3rem
    display block
    width 100%
    height 100%

    &:hover
      .link-avatar
        transform scale(1.1)

  .card-content
    display flex
    flex-wrap nowrap
    width 100%
    height 3.5rem

.link-avatar
  flex none
  width 3rem
  height 3rem
  margin-right .75rem
  object-fit cover
  transition-duration .2s
  transition-timing-function ease-in-out

  img
    width 100%
    height 100%
    border-radius 50%
    background-color transparent
    object-fit cover

.link-text
  flex 1
  display grid
  flex-direction column
  line-height 1.5

.link-title
  overflow hidden
  text-overflow ellipsis
  white-space nowrap
  color var(--text-color)
  font-weight bold

.link-intro
  max-height 2rem
  font-size 0.85rem
  line-height 1.2
  color var(--sec-text-color)
  display -webkit-box
  -webkit-box-orient vertical
  -webkit-line-clamp 2
  text-overflow ellipsis
  overflow hidden

@media (max-width 767px)
  .links
    display flex
    flex-direction column
    justify-content center
    align-items center

    .card
      padding-left 2rem
      padding-right 2rem

@media (min-width 768px)
  .link-text:only-child
    margin-left 1rem