#trust-logos {
  padding: 48px 0 64px;
}

.trust-logos-eyebrow {
  margin-bottom: 20px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.trust-logos-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.trust-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 72px;
  border-radius: var(--radius-md);
  transition: background var(--transition-base);
}

.trust-logo-item img {
  max-width: 88px;
  max-height: 34px;
  width: auto;
  height: auto;
  filter: grayscale(1);
  opacity: 0.55;
  transform: scale(1);
  transition: filter var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.trust-logo-item:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.1);
}

/* dark theme: most logos are drawn in dark ink meant for light paper,
   so give each one a light chip to sit on instead of trying to invert
   every brand's colors individually */
:root[data-theme="dark"] .trust-logo-item {
  background: #f4f5f4;
}

:root[data-theme="dark"] .trust-logo-item img {
  opacity: 0.85;
}

:root[data-theme="dark"] .trust-logo-item:hover img {
  opacity: 1;
}

@media (max-width: 640px) {
  .trust-logo-item {
    width: 104px;
    height: 60px;
  }

  .trust-logo-item img {
    max-width: 72px;
    max-height: 28px;
  }
}