| .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; |
| } |
| } |
| } |