/* "Trusted by" logo strip (src/partials/logo-strip.html). Linked from the partial itself, so any
   page that includes the partial gets it. Transparent background: it sits on Cream or Stone.
   Every logo is drawn in one color, Taupe (#6B5D52), with a CSS filter: brightness(0) turns the
   logo's shapes black, and the rest of the chain tints black to Taupe (checked to within 1 of
   107, 93, 82 in each channel). Logo files need a transparent background for this to work.
   Each logo's height comes from its shape (--h, set in the partial), so wide wordmarks and
   square marks read at about the same weight. */
.logo-strip { padding-block: 72px; }
.logo-strip-inner { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.logo-strip-title {
  font-family: var(--font-label); font-weight: 500; font-size: 12px; line-height: 16px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--drd-taupe); text-align: center;
}
.logo-strip-list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 36px 56px; max-width: 880px;   /* two even rows of five on desktop */
}
.logo-strip-item { display: flex; align-items: center; justify-content: center; }
.logo-strip-item img {
  display: block; width: auto; height: var(--h, 40px); max-width: 180px; object-fit: contain;
  filter: brightness(0) saturate(100%) invert(37%) sepia(7%) saturate(958%) hue-rotate(344deg) brightness(97%) contrast(92%);
}

@media (max-width: 1023px) {
  .logo-strip { padding-block: 56px; }
  .logo-strip-list { gap: 32px 40px; }
}
@media (max-width: 767px) {
  .logo-strip { padding-block: 48px; }
  .logo-strip-inner { gap: 28px; }
  .logo-strip-list { gap: 28px 32px; }
  .logo-strip-item img { height: calc(var(--h, 40px) * .78); max-width: 132px; }
}