/* When not a slider, give some space between items */
.testimonial-slider:not(.slick-slider) > div + div { margin-top: 5em; }

/* Slick slider overrides */
.testimonial-slider .slick-prev { left: -80px; }
.testimonial-slider [dir=rtl] .slick-prev { right: -80px; left: auto; }
.testimonial-slider .slick-next { right: -80px; }
.testimonial-slider [dir=rtl] .slick-next { right: auto; left: -80px; }
.testimonial-slider .slick-prev.slick-disabled, .testimonial-slider .slick-next.slick-disabled { opacity: 0; cursor: default; }
.testimonial-slider.slick-slider.slick-dotted { padding-bottom: 30px; }

@media all and (max-width: 1023px) {
  .testimonial-slider .slick-prev, .testimonial-slider .slick-next { width: 30px; }
  .testimonial-slider .slick-prev { left: -20px; }
  .testimonial-slider [dir=rtl] .slick-prev { right: -20px; left: auto; }
  .testimonial-slider .slick-next { right: -20px; }
  .testimonial-slider [dir=rtl] .slick-next { right: auto; left: -20px; }
}

/* CSS Grid implementation */
/* IE 11 supports an older version of the CSS Grids spec, so vendor prefixes are required. */
/* Properties such as "grid-gap" and "grid-template" are not supported in IE 11. */
/* See also: https://css-tricks.com/snippets/css/complete-guide-grid/ */
.grid-testimonial {
  display: -ms-grid;
  display: grid;
  grid-gap: 1em;
  -ms-grid-rows: minmax(0, max-content) 1em minmax(0, max-content) 1em minmax(0, max-content);
  -ms-grid-columns: 1fr;
  grid-template:
    "quote"  minmax(0, max-content)
    "primary" minmax(0, max-content)
    "citation" minmax(0, max-content) /
    1fr;
}

.grid-testimonial .popup-youtube,
.grid-testimonial .popup-img {
  margin: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.grid-testimonial .preview {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0 none;
  background: #000;
  opacity: 0;
}

.grid-testimonial > .primary-image,
.grid-testimonial > .image-1,
.grid-testimonial > .image-2 {
  background: transparent none center center no-repeat;
  background-size: cover;
}

.grid-testimonial > .primary-image {
  display: block;
  height: 50vw;
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: primary;
  margin: 0 16vw;
}

.grid-testimonial > .image-1 {
  display: none;
}

.grid-testimonial > .image-2 {
  display: none;
}

.grid-testimonial > .author-quote {
  display: block;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: quote;
  text-align: center;
}

.grid-testimonial > .author-quote h5 {
  font-size: 1.2em;
  line-height: 1.2;
  font-family: "Interstate Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .05em;
  text-transform: none;
  margin: 1em 2vw;
}

.grid-testimonial > .author-citation {
  display: block;
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: citation;
  text-align: center;
  padding: 1em;
  color: #000;
}

.grid-testimonial > .author-citation p {
  text-transform: uppercase;
  font-weight: bold;
  font-size: .8em;
  line-height: 1.4em;
  margin-bottom: 1em;
}

@media (min-width: 768px) {
  .grid-testimonial > .author-quote h5 {
    font-size: 1.4em;
    line-height: 1.4;
  }
}

@media (min-width: 1024px) {
  .grid-testimonial {
    grid-gap: 0;
    -ms-grid-rows: 160px 0 minmax(0, max-content) 1fr;
    -ms-grid-columns: 1.25fr 0 1fr 0 1fr;
    grid-template:
      "primary image1 image2" 160px
      "primary quote quote" minmax(0, max-content)
      "primary citation citation" 1fr /
      1.25fr 1fr 1fr;
  }

  .grid-testimonial.primary-right {
    -ms-grid-rows: 160px 0 minmax(0, max-content) minmax(0, max-content);
    -ms-grid-columns: 1fr 0 1fr 0 1.25fr;
    grid-template:
      "image1 image2 primary" 160px
      "quote quote primary" minmax(0, max-content)
      "citation citation primary" minmax(0, max-content) /
      1fr 1fr 1.25fr;
  }

  .grid-testimonial > div {
    /* This is being used in place of "grid-gap" since we need a couple
    of the grid cells to _not_ have a gap, but still be able to manipulate
    how the cells will be ordered. */
    margin: .75em;
  }

  .grid-testimonial > .primary-image {
    display: block;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-row-span: 4;
    grid-area: primary;
    height: auto;
    margin: .75em;
  }

  .grid-testimonial.primary-right > .primary-image {
    -ms-grid-column: 5;
  }

  .grid-testimonial > .image-1 {
    display: block;
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: image1;
  }

  .grid-testimonial.primary-right > .image-1 {
    -ms-grid-column: 1;
  }

  .grid-testimonial > .image-2 {
    display: block;
    -ms-grid-row: 1;
    -ms-grid-column: 5;
    grid-area: image2;
  }

  .grid-testimonial.primary-right > .image-2 {
    -ms-grid-column: 3;
  }

  .grid-testimonial > .author-quote {
    display: block;
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    -ms-grid-column-span: 3;
    grid-area: quote;
    margin-bottom: 0;
  }

  .grid-testimonial.primary-right > .author-quote {
    -ms-grid-column: 1;
  }

  .grid-testimonial > .author-citation {
    display: block;
    -ms-grid-row: 4;
    -ms-grid-column: 3;
    -ms-grid-column-span: 3;
    grid-area: citation;
    margin-top: 0;
    padding: 0;
  }

  .grid-testimonial > .author-citation p {
    margin-bottom: 2em;
  }

  .grid-testimonial.primary-right > .author-citation {
    -ms-grid-column: 1;
  }
}