@import '../../assets/styles/colors'
@import '../../assets/styles/mixins'

.cards
  width: 100%
  display: inline-flex
  flex-wrap: wrap

  a
    width: 100%
    color: $white
    text-decoration: none

    &:hover
      color: $white
      text-decoration: none

  &-image
    width: 100%
    background-color: $input-border-color
    margin: 0 0 10px 0
    height: 275px
    overflow: hidden

    img
      width: 100%
      height: 100%
      object-fit: cover

  &-content
    width: 100%

  &-rating
    display: inline-flex
    width: 100%
    margin: 3px 0 5px 0

    [class^='icon-']
      font-size: 1.6rem
      color: $orange

  &-title
    width: 100%
    font-size: 1.3rem
    line-height: 2rem
    text-transform: uppercase
    color: $white
    margin: 0
    @include ellipsis

  &-description
    margin: 0
    font-size: 1.3rem
    line-height: 1.8rem
    font-weight: 300
    color: $white
