// ----- product-slider ----- //

.product-slider-container
  overflow: hidden

.product-slider
  display: flex
  left: -100%
  list-style: none
  margin: 0
  padding: 0
  position: relative
  transform: translateX(100%)
  @media (min-width: 30em)
    left: -50%
    transform: translateX(50%)
  @media (min-width: 40em)
    left: -33.33333%
    transform: translateX(33.33333%)
      
// States
      
.product-slider.is-reversing
  transform: translateX(-100%)
  @media (min-width: 30em)
    transform: translateX(-50%)
  @media (min-width: 40em)
    transform: translateX(-33.33333%)
  
.product-slider.is-set
  transform: none
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)
    
// ----- products ----- //
      
.product-slider-product
  background: #ddd
  flex: 1 0 100%
  order: 2
  &:nth-child(even)
    background: #d5d5d5
  @media (min-width: 30em)
    flex-basis: 50%
  @media (min-width: 40em)
    flex-basis: 33.33333%
    
// States
    
.product-slider-product.is-ref
  order: 1

// Presentation