/* Clean original client marks: monochrome at rest, natural colour on hover, focus or press.
   Columns, padding, dividers and the viewport height belong to the homepage layout. */
.pl-clients { display: grid; }
.pl-client {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  border: 0;
  border-right: 1px solid var(--site-line);
  border-bottom: 1px solid var(--site-line);
  border-radius: 0;
  background: var(--site-paper);
  color: var(--site-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pl-client:focus-visible { z-index: 1; outline: 2px solid var(--site-ink); outline-offset: -5px; }
.pl-client__viewport { position: relative; display: block; overflow: hidden; }
.pl-client__layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1);
  transition: filter 320ms ease;
}
/* Contain within the fixed-height viewport so wide two-column cells never crop a mark. */
.pl-client__layer img { display: block; width: 100%; height: 100%; max-width: 400px; object-fit: contain; }
.pl-client:is(:focus-visible,[aria-pressed="true"]) .pl-client__layer--mark { filter: grayscale(0); }
@media (hover: hover) and (pointer: fine) {
  .pl-client:hover .pl-client__layer--mark { filter: grayscale(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pl-client__layer { transition: none; }
}