/* Logos component. */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3.75rem;
  min-height: 3.125rem;
  --media_img_p-b: 0px;
  --media_img_p-i: 0px;
}

.logos > .field,
.logos > .field > .field__items,
.logos .field--name-field-media-image {
  display: contents;
}

.logos img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 2.25rem;
  -o-object-fit: contain;
  object-fit: contain;
}

@media (max-width: 47.9375rem) {
  .logos {
    justify-content: center;
  }
}

.logos img[alt="MERLIN"],
.logos img[alt="SpongeBoost"] {
  filter: grayscale(1) opacity(0.7);
}

/**
 * Per-logo boxes matching the Figma comp, where the logos are deliberately not
 * the same height. Each box compensates for the residual padding left in its
 * SVG viewBox, and keeps that file's aspect ratio — an <img> letterboxes an SVG
 * rather than stretching it, so changing one dimension means changing both.
 *
 * Desktop only: below 768px the row falls back to the intrinsic sizes capped by
 * max-height above, so the fixed boxes cannot overflow a narrow screen.
 */
@media (min-width: 48rem) {
  .logos img {
    flex: none;
    max-height: none;
  }

  .logos img[alt="NWRM"] {
    width: 6.84375rem;
    height: 2.4875rem;
  }

  .logos img[alt="SpongeWorks"] {
    width: 12.59375rem;
    height: 2.35625rem;
  }

  .logos img[alt="SpongeScapes"] {
    width: 6.21875rem;
    height: 2.4875rem;
  }

  .logos img[alt="SpongeBoost"] {
    width: 7.2rem;
    height: 2.28125rem;
  }

  .logos img[alt="MERLIN"] {
    width: 9.3125rem;
    height: 1.875rem;
  }
}