:root {
  --logo-wall-logo-max-height: 40px;
  --logo-wall-logo-min-height: 40px;
  --logo-wall-logo-max-width: 190px;
  --logo-wall-logo-min-width: 130px;
}

.logo-wall {
  display: flex;
  gap: var(--rh-space-2xl, 32px);
  justify-content: center;
}

.logo-wall > * {
  display: flex;
  flex-basis: 100%;
  justify-content: center;
  align-items: center;
  min-width: var(--logo-wall-logo-min-width);
  max-width: var(--logo-wall-logo-max-width);
}

.logo-wall--bordered > * {
  border: 1px solid var(--rh-color-gray-30, #c7c7c7);
  border-radius: var(--rh-border-radius-default, 3px);
  padding: var(--rh-space-lg, 16px);
}

.logo-wall--borderless > * {
  padding: var(--rh-space-lg, 16px) var(--rh-space-md, 8px);
}

.logo-wall--bordered > *:hover {
  background-color: var(--rh-color-gray-10, #f2f2f2);
  cursor: pointer;
}

.logo-wall--bordered > *:is(:focus, :active) {
  outline: 2px solid var(--rh-color-accent-base-on-light, #0066cc);
  outline-offset: 0;
}

.logo-wall > * a:after {
  z-index: 3;
  content: '';
  position: absolute;
  inset: 0;
  display: block;
}

.logo-wall img {
  max-width: 100%;
  max-height: var(--logo-wall-logo-max-height);
  min-height: var(--logo-wall-logo-min-height);
}

[color-palette^='dark'] .logo-wall--bordered > :hover {
  background-color: var(--rh-color-gray-60, #4d4d4d);
}

[color-palette^='dark'] .logo-wall--bordered > :is(:focus, :active) {
  background-color: var(--rh-color-gray-60, #4d4d4d);
}

[color-palette^='dark'] .logo-wall--light {
  display: none;
}

[color-palette^='light'] .logo-wall--dark {
  display: none;
}

.logo-wall--borderless > :hover {
  box-shadow: 0 3px var(--rh-color-accent-brand-on-light, #ee0000);
}

.logo-wall--borderless > :is(:focus, :active) {
  box-shadow: 0 3px var(--rh-color-accent-brand-on-light, #ee0000);
  outline: 2px solid var(--rh-color-accent-base-on-light, #0066cc);
  outline-offset: 0;
}

.logo-wall--two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.logo-wall--three-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 1199px) {
  .logo-wall {
    flex-wrap: wrap;
  }
}

@container host (max-width: 992px) {
  .logo-wall {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .logo-wall--three-columns {
    grid-template-columns:
      repeat(auto-fill,
        minmax(var(--logo-wall-logo-min-width), 1fr)) !important;
  }
}

@container host (max-width: 768px) {
  .logo-wall--three-columns {
    grid-template-columns:
      repeat(auto-fill,
        minmax(var(--logo-wall-logo-min-width), 1fr)) !important;
  }
}