.blank-background
  background: white
  display: none
  +position(fixed, 0 0 0 0)
  height: 100%
  width: 100%
  z-index: -1


.product-row
  margin-top: -275px
  width: 100%

  .placeholder
    margin: auto
    float: none
    min-width: 600px

    .product
      z-index: 10
      +flex(center, center)
      cursor: pointer
      max-width: 711px


      &:nth-child(1)
        +productBackground(0 0)

      &:nth-child(2)
        +productBackground(33.3333333% 0)

      &:nth-child(4)
        +productBackground(66.6666666% 0)

      &:nth-child(3)
        +productBackground(100% 0)


      &:hover
        .overlay
          background: $yellow
        h3, p
          color: black
        span
          +blackArrowRight

      .overlay
        +position(absolute, 0 0 0 0)
        height: 100%
        width: 100%
        background: black
        opacity: 0.65

      .text
        z-index: 5

      h3
        +font-bold(48px, 48px)
        color: white
        text-transform: uppercase
        text-align: center
        margin-bottom: 0

      p
        color: $yellow
        text-transform: uppercase
        +font-bold(28px)
        text-align: center
        margin-top: 20px

      span
        +yellowArrowRight
        display: inline-block
        margin-left: 12px


+media-query(640px)
  .product-row
    .placeholder
      padding: 0

+media-query(600px)
  .product-row
    .placeholder
      padding: 0
      min-width: initial
      width: 100%

      .product
        width: 90%
        margin: auto
        float: none