/* ==========================================================================
   Testimonial specific css
   ========================================================================== */

// The container has display flex for it works in one direction
.testimonial-container
  display: flex
  justify-content: flex-end

  width: 50%

  background-repeat: no-repeat
  background-size: contain
  background-position: left bottom

  &:nth-child(2n)
   justify-content: flex-start

  // Align items on grid layout
  .contained-layout
    display: grid
    grid-template-columns: 6fr 6fr 2fr
    grid-template-areas: '. quote .'
    max-width: $gridMaxWidth / 2
    margin: 0
    align-items: center

  // The grid-item
  .quote
    grid-area: quote

    color: rgba(255,255,255,.8)
    font-size: 1rem
    font-weight: 300
    line-height: 1.3
    white-space: normal
    padding-top: 100px

  .author
    margin-top: 1em
    display: block
    color: #fff
    font-size: 1rem
    font-style: normal
    font-weight: semibold()

  .button
    margin: 60px 0 100px
    font-style: normal

  /* Responsive Testimonials
     ========================================================================== */

  +respond-to-width($mdGridBreakpoint)
    background-size: auto 300px
    .contained-layout
      display: block
      padding: 50px column(1,7) 300px
    .quote
      padding-top: 0
      font-size: 1.3rem
      line-height: 1.4
    .button
      margin-bottom: 0

  +respond-to-width($smGridBreakpoint)
    width: 100%
    .contained-layout
      padding: column(.5,7) column(.5,7) 300px

  +respond-to-width($xsGridBreakpoint)
    .contained-layout
      padding: $mobileTopSpace $mobileAsideSpace 300px



/* Testimonial page CSS
   ========================================================================== */

.testimonials
  header.main
    margin-bottom: 0

.testimonial-logo-grid
  display: flex
  flex-wrap: wrap

  /**
   * Grid layout for our list
   */
  .clients
    position: relative
    display: grid
    align-items: center
    justify-content: center
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
    grid-gap: 30px
    padding: columnVw(.5) columnVw(1)
    width: 100%
    list-style: none

    // The fractions can be done with min/max-width,
    // but this way we have more control.
    +respond-to-width($lgGridBreakpoint)
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr
    +respond-to-width($mdGridBreakpoint)
      grid-template-columns: 1fr 1fr 1fr 1fr
    +respond-to-width($smGridBreakpoint)
      grid-template-columns: 1fr 1fr 1fr
    +respond-to-width($xsGridBreakpoint)
      grid-template-columns: 1fr 1fr

    .inner-shadow
      position: absolute
      left: 0
      bottom: 0
      width: 100%
      height: 100px
      box-shadow: inset 0px -100px 100px -50px rgba(255,255,255,1)

    .toggle-client-mask
      position: absolute
      left: 50%
      bottom: -30px
      margin-left: -30px
      width: 60px
      height: 60px
      cursor: pointer

    // IE fix
    html.ie &
      ul
        +clearfix
        li
          float: left
          width: 25%

  html.ie &
    +clearfix

    .testimonial-container
      padding: 50px
      float: left
      width: 50%

  +respond-to-width($smGridBreakpoint)
    .client-logo-group
      width: 100%