Cacher is the code snippet organizer for pro developers

@import '__'

$districts__cols = 3
$districts__width = _grid_value($grid__cols / $districts__cols)
$districts__offset = 15px
$districts__border-width = 1px
$districts__border-color = #e2e2e2 // @todo нет в константах
$districts__inner-offset = 24px

$districts__tablet__cols = 2
$districts__tablet__width = _grid_value($grid__cols / $districts__tablet__cols)
$districts__tablet__offset = 10px

$districts__mobile__cols = 1
$districts__mobile__width = _grid_value($grid__cols / $districts__mobile__cols)
$districts__mobile__offset = 0px
$districts__mobile__inner-offset = 14px

.districts
  font-size: 0
  margin: 0 (-($districts__offset)) 0

  +media($_b__tablet)
    margin: 0 (-($districts__tablet__offset)) 0

  +media($_b__mobile)
    margin: 0 (-($container__mobile__offset)) 0
    padding-bottom: 8px
    border-bottom: 1px solid #e2e2e2

  &__list
    display: inline-block
    vertical-align: top
    width: $districts__width
    padding: 0 $districts__offset

    +media($_b__tablet)
      width: $districts__tablet__width
      padding: 0 $districts__tablet__offset

    +media($_b__mobile)
      width: 100%
      padding: $districts__mobile__offset

      &:nth-child(1n + 4)
        display: none

  &__item
    display: inline-block
    border: $districts__border-width solid $districts__border-color
    padding-bottom: 8px
    margin-bottom: 30px
    cursor: pointer

    +media($_b__mobile)
      border: 0
      margin-bottom: 1px

  &__image
    position: relative
  //height: 240px
    width: 100%
    margin: -($districts__border-width)
    margin-bottom: 19px
    padding: 0 $districts__border-width
    box-sizing: content-box
    responsive-ratio(320px, 240px)

    &::after
      content: ''
      absolute: null 0 0 0
      height: 60px
      background: linear-gradient(to bottom, rgba($_c__black, 0) 0%, rgba($_c__black, 0.7) 100%)

    & > img
      absolute: 0 null null 0
      width: 100%
      height: 100%

    +media($_b__mobile)
      padding-left: 0
      padding-right: 0

  &__caption
    display: block
    position: absolute
    left: $districts__inner-offset
    bottom: 20px
    font-family: $_f__roboto-light
    font-size: 22px
    line-height: @font-size
    color: $_c__white
    z-index: 1

    +media($_b__mobile)
      left: $districts__mobile__inner-offset

  &__title
    display: block
    padding-left: $districts__inner-offset
    font-size: 16px
    line-height: 24px
    color: $_c__black
    font-family: $_f__roboto-light

    +media($_b__mobile)
      padding-left: $districts__mobile__inner-offset

  &__date
    display: block
    padding-left: $districts__inner-offset
    font-size: 13px
    line-height: @font-size
    font-family: $_f__roboto-light
    color: $_c__gray2
    margin-top: 6px
    margin-bottom: 21px

    +media($_b__mobile)
      padding-left: $districts__mobile__inner-offset

  &__row
    font-size: 0
    padding-left: $districts__inner-offset

    +media($_b__mobile)
      padding-left: $districts__mobile__inner-offset

  &__size,
  &__price
    width: 50%
    display: inline-block
    font-size: 16px
    line-height: 40px
    font-family: $_f__roboto-light
    color: $_c__black

    .sup
      font-size: 11px
      position: relative
      left: -4px
      top: -4px

  &__price
    padding-left: 19px // @todo такой вот магический отступ

    +media($_b__mobile)
      padding-left: 34px

    &_empty

      &::before
        content: ''
        display: inline-block
        vertical-align: middle
        width: 24px
        height: 1px
        background-color: $_c__black
        margin-top: 4px