.partner-list {
  max-width: $max-width-l;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.partner {  
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  max-width: 18em;
  padding: 1em;
  margin: 0 1em 2.75em;
  border-radius: 1em;
  transition: box-shadow 0.4s ease-out, background 0.4s ease-out;
  display: flex;
  align-items: center;

  &:hover,
  &:focus {
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    background: #fff;

    img {
      filter: none;
    }
  }

  &:focus {
    outline: 1px dashed $dark-purple;
    outline-offset: -0.625em;
  }

  img {
    width: 100%;
    max-width: 15em;
    filter: var(--filter);
    transition: filter 0.3s ease-out;
  }
}

.partner-quote {
  max-width: $max-width-m;
  margin: 0 auto;
  padding-top: 2em;

  background-image: url('data:image/svg+xml;utf8,
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135 20">/
    <path fill="%233D1067" fill-rule="nonzero" d="M79 0a31 31 0 00-1.4 4c-.3 1-.5 2.2-.5 3.1 0 1.1.2 2 .5 2.9l.8 2.3c.3.7.5 1.6.5 2.6 0 1.3-.5 2.4-1.5 3.3-1 1-2.3 1.4-4 1.4-1.6 0-3-.5-3.9-1.5-1-1-1.4-2.5-1.4-4.4 0-1.3.3-2.7.9-4.4A27.5 27.5 0 0174.9 0H79zM66 0a31 31 0 00-1.5 4C64.2 5 64 6.1 64 7c0 1.1.2 2 .5 2.9l.9 2.3c.3.7.4 1.6.4 2.6 0 1.3-.5 2.4-1.5 3.3-1 1-2.3 1.4-4 1.4-1.6 0-3-.5-3.9-1.5-1-1-1.4-2.5-1.4-4.4 0-1.3.3-2.7.9-4.4a27.5 27.5 0 016-9.3h4zM35 9.6v2H0v-2h35zm100 0v2h-35v-2h35z"/>/
  </svg>');
  background-size: 8.4375em 1.25em;
  background-repeat: no-repeat;
  background-position: center top;

  &__item {
    margin: 0 0 calc(2em + 1vw);
  }

  .quote {
    color: $blue;
  }

  footer {
    font-weight: 700;
    margin-top: 1em;
    font-size: 1.125em;
  }
}

// Slider

.tns-outer .tns-controls {
  display: inline-flex;
  margin: 1em auto;
  padding: 0.5em;
  width: 7em;
  justify-content: space-between;

  &:focus {
    outline: 1px dashed $dark-purple;
    outline: 1px dashed var(--text-color);
    outline-offset: 4px;
  }
  button {
    border: none;
    -webkit-appearance: none;
    color: $white;
    color: var(--background);
    width: 2.5em;
    height: 2.5em;
    padding: 0;
    display: block;
    background: $dark-purple;
    background: var(--text-color);
    font-size: 1em;

    svg {
      width: 2.5em;
      height: 2.5em;
      display: inline-block;
    }

    &[disabled] {
      opacity: 0.5;
      cursor: auto;
    }
  }
}