card
  min-width: 256px
  display: inline-block
  margin: 1em
  vertical-align: top

  sprites > &, tunes > &
    width: 256px

    @include small
      margin: 1em 0 0
      width: 100%

  > .outline
    box-shadow: $item-shadow
    border-radius: 4px
    overflow: hidden

    > a > img
      display: block
      width: 100%
      height: auto
      image-rendering: pixelated

    > .details
      padding: 1em

    > .details
      > .title,
      > .description
        color: $text-color
        word-break: break-word

      > .description
        a
          display: inline-block
          max-width: 100%
          overflow: hidden
          text-overflow: ellipsis
          white-space: nowrap

      > .title
        font-size: 1.5em
        margin-bottom: 0.25em

        > a
          color: $text-color

      > .actions
        > a
          color: $primary-color
          font-weight: bold

card
  min-width: 256px
  display: inline-block
  margin: 1em
  vertical-align: top

  sprites > &, tunes > &
    width: 256px

    @include small
      margin: 1em 0 0
      width: 100%

      &:first-child
        margin-top: 0

  > .outline
    box-shadow: $item-shadow
    border-radius: 4px
    overflow: hidden

    > a > img
      display: block
      width: 100%
      height: auto
      image-rendering: pixelated

    > .details
      padding: 1em

    > .details
      > .title,
      > .description
        color: $text-color
        word-break: break-word

      > .description
        a
          display: inline-block
          max-width: 100%
          overflow: hidden
          text-overflow: ellipsis
          white-space: nowrap

      > .title
        font-size: 1.5em
        margin-bottom: 0.25em

        > a
          color: $text-color

      > .actions
        > a
          color: $primary-color
          font-weight: bold

Reduce extra margin on first card in mobile view
Reduce extra margin on first card in mobile view
