.lw-logo-wall {
  width: 100%;
  margin: 0 auto;
  padding: 24px 12px;
}

.lw-logo-wall .lw-logo-grid {
  max-width: var(--lw-container, 1100px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--lw-gap, 48px);
}

.lw-logo-item {
  flex: 0 1 calc((100% - (var(--lw-gap, 48px) * (var(--lw-columns, 5) - 1))) / var(--lw-columns, 5));
  max-width: calc((100% - (var(--lw-gap, 48px) * (var(--lw-columns, 5) - 1))) / var(--lw-columns, 5));
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(var(--lw-max-h, 52px) + 8px);
  text-align: center;
  box-sizing: border-box;
}

.lw-logo-link {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}

.lw-logo-item img {
  max-height: var(--lw-max-h, 52px);
  max-width: min(100%, var(--lw-max-w, 180px));
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: grayscale(100%);
  opacity: 0.68;
  transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.lw-logo-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-1px);
}

@media (max-width: 980px) {
  .lw-logo-item {
    flex-basis: calc((100% - (var(--lw-gap, 48px) * 2)) / 3);
    max-width: calc((100% - (var(--lw-gap, 48px) * 2)) / 3);
  }
}

@media (max-width: 640px) {
  .lw-logo-item {
    flex-basis: calc((100% - var(--lw-gap, 48px)) / 2);
    max-width: calc((100% - var(--lw-gap, 48px)) / 2);
  }
}

@media (max-width: 420px) {
  .lw-logo-item {
    flex-basis: 100%;
    max-width: 100%;
  }
}