:root {
  --logo-wall-container-max-width: 1070px;
  --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-container {
  container: logo-wall-container / inline-size;
}

.logo-wall {
  display: flex;
  flex-wrap: wrap;
  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-container .logo-wall--light {
  display: none;
}

[color-palette^='light'] > .logo-wall-container .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,
.logo-wall--three-columns {
  display: grid;
}

@container logo-wall-container (min-width: 300px) {
  .logo-wall--two-columns,
  .logo-wall--three-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container logo-wall-container (min-width: 450px) {
  .logo-wall--three-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

@container logo-wall-container (min-width: 1200px) {
  .logo-wall {
    max-width: none;
  }
}