.brandkit-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bs-spacer-2, 0.75rem);
  width: 100%;
}

@media (min-width: 768px) {
  .brandkit-logo-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--bs-spacer-4, 1.5rem);
  }
}

.brandkit-logo-grid__item {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  background: var(--logo-bg);
  transition: background-color 180ms ease;
}

.brandkit-logo-grid__item--blue {
  --logo-bg: #2600e6;
  --logo-bg-hover: #2600e6;
}

.brandkit-logo-grid__item--green {
  --logo-bg: #00e400;
  --logo-bg-hover: #00e400;
}

.brandkit-logo-grid__item--orange {
  --logo-bg: #ff9200;
  --logo-bg-hover: #ff9200;
}

.brandkit-logo-grid__item--purple {
  --logo-bg: #d200ff;
  --logo-bg-hover: #d200ff;
}

.brandkit-logo-grid__item--red {
  --logo-bg: #ff0000;
  --logo-bg-hover: #ff0000;
}

.brandkit-logo-grid__item--white {
  --logo-bg: #ffffff;
  --logo-bg-hover: #000000;
}

.brandkit-logo-grid__item--pastel-blue {
  --logo-bg: #c6e5ff;
  --logo-bg-hover: #ffffff;
}

.brandkit-logo-grid__item--pastel-green {
  --logo-bg: #b4ffa9;
  --logo-bg-hover: #ffffff;
}

.brandkit-logo-grid__item--pastel-orange {
  --logo-bg: #ffd8b7;
  --logo-bg-hover: #ffffff;
}

.brandkit-logo-grid__item--pastel-purple {
  --logo-bg: #ffedff;
  --logo-bg-hover: #ffffff;
}

.brandkit-logo-grid__item--pastel-red {
  --logo-bg: #ffbfc1;
  --logo-bg-hover: #ffffff;
}

.brandkit-logo-grid__item--black {
  --logo-bg: #000000;
  --logo-bg-hover: #ffffff;
}

.brandkit-logo-grid__item:hover,
.brandkit-logo-grid__item:focus-within {
  background: var(--logo-bg-hover);
}

.brandkit-logo-grid__item:hover .brandkit-logo-grid__logo--default,
.brandkit-logo-grid__item:focus-within .brandkit-logo-grid__logo--default {
  opacity: 0;
}

.brandkit-logo-grid__item:hover .brandkit-logo-grid__logo--hover,
.brandkit-logo-grid__item:focus-within .brandkit-logo-grid__logo--hover {
  opacity: 1;
}

.brandkit-logo-grid__logo-wrap {
  position: relative;
  display: block;
  width: 54%;
  max-width: 13rem;
  aspect-ratio: 1;
}

.brandkit-logo-grid__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 180ms ease;
}

.brandkit-logo-grid__logo--hover {
  opacity: 0;
}