// Широкая карточка
// (ex cardWide())
tilesWide()
  article
    border: 5px solid //colorDull
    theme(border-color 'dull')
    padding: 15px 15px 15px
    /*width: 280px*/
    width: auto
    height: 310px
    position: relative
    theme(background 'white')

    > a
      display: block
      text-decoration: none
      theme(color 'base')
      &:hover
        theme(color 'base')
        h3
          theme(color 'accent-2')

    /*@media screen and (min-width: 321px) and (max-width: 1270px)
      height: 400px*/

  h3
    text-transform: none
    display: block
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap
    font-size: 20px
    font-weight: 500
    line-height: 1.4
    margin-bottom: 0.5em
    @media min
      font-size: 40px

  .tpl-property-type
    display: block
    position: relative
    margin: -0.4em 0 0
    line-height: 1.2
    z-index: 3
    gradient-bottom()

  .tpl-property-description
    display: none

  .tpl-property-image
    display: block
    position: absolute
    left: 15px
    width: 110px
    height: 140px
    line-height: 140px
    float: left
    top: 90px
    text-align center

    img
      display: inline-block
      vertical-align: middle
      max-width: 100%
      max-height: 100%

    /*@media screen and (min-width: 321px) and (max-width: 1270px)
      top: 105px
      height: 100px
      left: 15px
      right: 15px
      line-height: 100px
      width: auto
      float: none*/

  .tpl-block-rating
    position: absolute
    right: 0
    top: 90px
    font-size: 1.3em
    width: 115px
    /*@media screen and (min-width: 321px) and (max-width: 1270px)
      left: 15px
      top: 205px
      font-size: 1em*/

  .tpl-property-item-price
    display: block
    position: absolute
    /*left: 140px*/
    top: 125px
    /*width: 130px*/
    font-size: 30px
    white-space: nowrap
    left: auto
    right: 10px
    min-width: 125px
    text-shadow: 0 0 5px bgColor, 0 0 5px bgColor, 0 0 5px bgColor, 0 0 5px bgColor, 0 0 5px bgColor, 0 0 5px bgColor, 0 0 5px bgColor, 0 0 5px bgColor, 0 0 5px bgColor, 0 0 5px bgColor, 0 0 5px bgColor, 0 0 5px bgColor
    .rouble:after { text-shadow: none }

    @media max
      .tpl-block-front-page &
        min-width: 112px

    /*@media screen and (min-width: 321px) and (max-width: 1270px)
      left: 15px
      top: 245px
      font-size: 25px
      font-weight: 400
      line-height: 30px*/

  .tpl-property-original-price
    display: block
    position: absolute
    left: 140px
    top: 180px
    font-size: 18px
    opacity: 0.5
    price-strike-through(52%)
    /*@media screen and (min-width: 321px) and (max-width: 1270px)
      left: auto
      right: 15px
      top: 240px*/

  .tpl-link-compare-add
  .tpl-link-compare-remove
  .tpl-link-favorite-add
  .tpl-link-favorite-remove
  .tpl-link-cart-add
    position:absolute
    top: 250px
    line-height: lineHeight
    font-size: 0
    /*@media screen and (min-width: 321px) and (max-width: 1270px)
      top: 285px*/

  .tpl-link-compare-add
  .tpl-link-compare-remove
    left: 15px
    icon-down-accent-1()

  .tpl-link-favorite-add
  .tpl-link-favorite-remove
    left: 45px
    icon-flag-accent-1()

  .tpl-link-cart-add
    left: 80px;
    font-size 0
    button-transparent()
    icon-cart-accent-2()

  .tpl-link-select-variant
    button()

  .tpl-link-cart-add-and-checkout
  .tpl-link-select-variant
    display: block
    position: absolute
    left: auto
    right: 15px
    min-width: 125px
    bottom: 15px
    height: 40px
    margin: 0
    button-colors('input-bg', 'base', 'accent-2', 'white')
    @media max
      padding: 0
    /*@media screen and (min-width: 321px) and (max-width: 1270px)
      right: auto
      left: 15px*/

.s-tiles-wide
  tilesWide()