.models-menu-row
  position: relative
  background-color: $darkBrown
  overflow: hidden


  .models-grid
    +flex(flex-start, center)
    +flex-rows

    .model
      position: relative
      width: 25%
      text-decoration: none
      background-color: transparent
      transition: background-color 0.3s

      &:after
        position: absolute
        left: -100vw
        bottom: 0
        width: 200vw
        height: 1px
        background-color: rgba($lightGrey, 0.2)

      &:nth-child(4n + 4)
        &:after
          content: ''
          display: block


      .placeholder
        position: relative
        width: 100%
        padding-bottom: 100%
        height: 0

        .background
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          opacity: 0
          background:
            size: cover
            position: center
          transition: opacity 0.5s

        .content-placeholder
          position: absolute
          top: 0
          left: 0
          +flex(space-between, flex-end)
          +flex-rows
          width: 100%
          height: 100%
          padding: 30px



          p
            width: calc(100% - 25px)
            margin: 0
            color: $lightBrown
            font-size: 1rem
            line-height: 1.2
            font-weight: medium()
            transition: color 0.5s

            .location
              display: block
              margin-bottom: 5px 
              font-size: 0.8rem
              color: rgba($lightBrown, 0.5)
              transition: color 0.5s

          .arrow
            display: inline-block
            +sprite(442px 1px, 12px, 21px)


      &:hover
        &.no-background
          background-color: darken($darkerBrown, 3%)

        .placeholder
          .background
            opacity: 1

          .content-placeholder
            p
              color: white

              .location
                color: $lightBrown

  +respond-to-width(1100)
    z-index: 3
    .models-grid
      border-left: 1px solid rgba($lightGrey, 0.2)
      .model
        width: 33%
        border-right: 1px solid rgba($lightGrey, 0.2)


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

        &:nth-child(3n + 3)
          &:after
            content: ''
            display: block

        +respond-to-width(900)
          width: 50%

          &:nth-child(3n + 3)
            &:after
              display: none

          &:nth-child(2n + 2)
            &:after
              content: ''
              display: block

  +respond-to-width(650)
    .models-grid
      display: block

      .model
        display: block
        width: 100%

        &:after
          content: ''
          display: block !important

        .placeholder
          padding-bottom: 0
          height: auto

          .content-placeholder
            position: relative

            +respond-to-width(425)
              padding: 30px 15px