.logo-listing {
  --spacing-inline: var(--container-padding-inline);
  --logo-x-gap: var(--space-300);

  margin-block: var(--spacing-offset, var(--space-1200));
  margin-inline: auto;
  padding-inline: var(--spacing-inline);

  text-align: center;
}

.logo-listing.wrap {
  max-width: var(--content-wrapper-max-width, 100vw);
}

/* Scroll variant
   Keep this close to the old version so autoscroll does not break.
======================================================== */

.logo-listing.scroll {
  padding-inline: 0 !important;
  overflow: hidden;
}

.logo-listing.scroll .heading,
.logo-listing.scroll .link {
  max-width: var(--content-wrapper-max-width, 100vw);
  margin-inline: auto;
  padding-inline: var(--spacing-inline);
}

/* Heading
======================================================== */

.logo-listing .heading {
  font-size: var(--fs-title-lg-size);
  line-height: var(--fs-title-lg-line-height);
  font-weight: var(--fs-title-lg-weight);
  letter-spacing: var(--fs-title-lg-letter-spacing);
}

/* Button layout only
======================================================== */

.logo-listing .buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--buttons-gap);

  margin-top: var(--space-300);
}

@media (min-width: 992px) {
  .logo-listing .buttons {
    flex-direction: row;
    justify-content: center;
    margin-top: var(--space-400);
  }
}

/* Logos
======================================================== */

.logo-listing ul.logos {
  --logo-x-gap: var(--space-300);

  gap: var(--logo-x-gap);
  margin-block: var(--space-200);
}

@media (min-width: 768px) {
  .logo-listing ul.logos {
    --logo-x-gap: var(--space-800);

    column-gap: var(--logo-x-gap);
    row-gap: var(--space-1200);
  }
}

/* Wrapped logo layout
======================================================== */

.logo-listing ul.logos.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  justify-items: center;
}

@media (min-width: 768px) {
  .logo-listing ul.logos.wrap {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Scrolling logo layout
   This section intentionally stays close to the original CSS.
======================================================== */

.logo-listing ul.logos.scroll {
  position: relative;

  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: stretch;

  width: 100vw;
  max-width: 100%;
  margin-inline: auto;

  overflow-x: scroll;
  scrollbar-width: none;
}

@supports not (scrollbar-width: auto) {
  .logo-listing ul.logos.scroll::-webkit-scrollbar {
    display: none;
  }
}

.logo-listing ul.logos.scroll::after {
  content: "";
  padding-right: 0.02px;
}

.logo-listing ul.logos.scroll[data-drag="true"] {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.logo-listing ul.logos.scroll[data-drag="true"]:active > * {
  cursor: inherit;
}

.logo-listing ul.logos.scroll[data-scroll-snap="snap"] {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.logo-listing ul.logos.scroll[data-auto-scroll] {
  scroll-behavior: initial;
}

.logo-listing ul.logos.scroll > * {
  flex-shrink: 0;
  margin-inline: 0;
}

.logo-listing ul.logos.scroll > *:first-child {
  margin-left: max(var(--spacing-inline), env(safe-area-inset-right));
}

.logo-listing ul.logos.scroll > *:last-child:not(:first-child) {
  margin-left: 0;
  margin-right: max(var(--spacing-inline), env(safe-area-inset-right));
}

/* Logo images
======================================================== */

.logo-listing ul.logos li img {
  max-width: 13rem;
  max-height: 7rem;
  height: auto;

  object-fit: contain;
}

/* Linked logos
======================================================== */

.logo-listing ul.logos li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.logo-listing ul.logos li a::after {
  display: none;
}

/* Text link
======================================================== */

.logo-listing .link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  width: fit-content;
  padding-inline: var(--space-100);

  gap: var(--button-gap);
  border: var(--button-border-width) solid transparent;
  border-radius: var(--button-radius);

  color: var(--color-black-100);
  background-color: transparent;

  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
  font-weight: var(--button-font-weight);

  cursor: pointer;
  text-decoration: underline;

  transition:
    background-color var(--button-transition-duration) var(--button-transition-ease),
    color var(--button-transition-duration) var(--button-transition-ease),
    border-color var(--button-transition-duration) var(--button-transition-ease),
    box-shadow var(--button-transition-duration) var(--button-transition-ease);
}

.logo-listing .link:hover,
.logo-listing .link:focus {
  text-decoration: none;
}

.logo-listing .link:active {
  box-shadow: 0 0 0 var(--button-focus-ring-width) var(--color-blue-75);
  text-decoration: underline;
}