@property --state-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.px-logo-scroll-grid {
  --state-progress: 0;
  --cell-size-max: 150px;
  --cell-gap-max: 25px;
  --cell-radius: 20px;
  --cell-border: #f2f2f2;
  --cell-shadow: 0 6px 25px rgba(0, 0, 0, 0.05);
  --cell-glass: rgba(255, 255, 255, 0.4);
  --cell-empty: rgba(255, 255, 255, 0.02);
  --swap-start: 0.12;
  --swap-range: 0.55;
  position: relative;
}
.px-logo-scroll-grid-pin-spacer {
  position: relative;
  width: 100% !important;
  max-width: unset !important;
}
.px-logo-scroll-grid-pin-spacer > .px-frame-layout.is-scroll-pinned {
  position: sticky;
  top: var(--pin-sticky-top, 50vh);
  z-index: 1;
}
.px-logo-scroll-grid.is-scroll-pinned:not(.px-frame-layout) {
  position: sticky;
  top: var(--pin-sticky-top, 50vh);
  z-index: 1;
}
.px-logo-scroll-grid-inner {
  display: flex;
  justify-content: center;
  container-type: inline-size;
}
.px-logo-scroll-grid-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cell-gap);
  width: calc(var(--cell-size) * 4 + var(--cell-gap) * 3);
  max-width: 100%;
  margin: 0 auto;
  --cell-gap: clamp(10px, 2.2cqi, var(--cell-gap-max));
  --cell-size: min(var(--cell-size-max), calc((100cqi - (var(--cell-gap) * 3)) / 4));
  --cell-radius: clamp(14px, 3.5cqi, 20px);
}
.px-logo-scroll-grid-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  transition: opacity 0.28s ease;
}
.px-logo-scroll-grid-connections.is-fading {
  opacity: 0;
}
.px-logo-scroll-grid-connection {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.px-logo-scroll-grid-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cell-gap);
  width: 100%;
}
.px-logo-scroll-grid-row--3 {
  justify-content: flex-end;
}
.px-logo-scroll-grid-cell {
  position: relative;
  z-index: 1;
  width: var(--cell-size);
  height: var(--cell-size);
  flex-shrink: 0;
}
.px-logo-scroll-grid-cell-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--cell-radius);
  border: 2px solid transparent;
  background: var(--cell-empty);
  box-shadow: none;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.px-logo-scroll-grid-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition: opacity 0.35s ease;
}
.px-logo-scroll-grid-logo--state-1 {
  opacity: calc(1 - clamp(0, (var(--state-progress) - var(--swap-start)) / var(--swap-range), 1));
}
.px-logo-scroll-grid-logo--state-2 {
  opacity: clamp(0, (var(--state-progress) - var(--swap-start)) / var(--swap-range), 1);
}
.px-logo-scroll-grid__logo-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.px-logo-scroll-grid-cell.is-empty .px-logo-scroll-grid-cell-inner {
  background: var(--cell-empty);
  border-color: var(--cell-border);
  box-shadow: none;
}
.px-logo-scroll-grid-cell.has-state-1:not(.has-state-2) .px-logo-scroll-grid-cell-inner {
  --state-1-visibility: calc(1 - clamp(0, (var(--state-progress) - var(--swap-start)) / var(--swap-range), 1));
  background: color-mix(in srgb, var(--cell-glass) calc(var(--state-1-visibility) * 100%), var(--cell-empty));
  border-color: color-mix(in srgb, transparent calc(var(--state-1-visibility) * 100%), var(--cell-border));
  box-shadow: 0 calc(6px * var(--state-1-visibility)) calc(25px * var(--state-1-visibility)) rgba(0, 0, 0, calc(0.05 * var(--state-1-visibility)));
}
.px-logo-scroll-grid-cell.has-state-2:not(.has-state-1) .px-logo-scroll-grid-cell-inner {
  --state-2-visibility: calc(clamp(0, (var(--state-progress) - var(--swap-start)) / var(--swap-range), 1));
  background: color-mix(in srgb, var(--cell-empty) calc((1 - var(--state-2-visibility)) * 100%), var(--cell-glass));
  border-color: color-mix(in srgb, var(--cell-border) calc((1 - var(--state-2-visibility)) * 100%), transparent);
  box-shadow: 0 calc(6px * var(--state-2-visibility)) calc(25px * var(--state-2-visibility)) rgba(0, 0, 0, calc(0.05 * var(--state-2-visibility)));
}
.px-logo-scroll-grid-cell.has-state-1.has-state-2 .px-logo-scroll-grid-cell-inner {
  --box-fill: calc(1 - clamp(0, (var(--state-progress) - var(--swap-start)) / var(--swap-range), 1));
  --box-shadow: calc(clamp(0, (var(--state-progress) - var(--swap-start)) / var(--swap-range), 1));
  --box-border: calc(
      clamp(0, (var(--state-progress) - calc(var(--swap-start) - 0.04)) / var(--swap-range), 1) *
      (1 - clamp(0, (var(--state-progress) - calc(var(--swap-start) + var(--swap-range) + 0.04)) / var(--swap-range), 1))
  );
  background: color-mix(in srgb, var(--cell-glass) calc(var(--box-fill) * 100%), var(--cell-empty));
  border-color: color-mix(in srgb, transparent calc((1 - var(--box-border)) * 100%), var(--cell-border));
  box-shadow: 0 calc(6px * var(--box-shadow)) calc(25px * var(--box-shadow)) rgba(0, 0, 0, calc(0.05 * var(--box-shadow)));
}
@supports not (background: color-mix(in srgb, white 50%, black)) {
  .px-logo-scroll-grid-cell.has-state-1.has-state-2 .px-logo-scroll-grid-cell-inner {
    --box-fill: calc(1 - var(--state-progress));
    --box-border: var(--state-progress);
    --box-shadow: var(--state-progress);
  }
}
.px-logo-scroll-grid.is-state-2 {
  --state-progress: 1;
}
@media only screen and (max-width: 1200px) {
  .px-logo-scroll-grid {
    --cell-size-max: 130px;
    --cell-gap-max: 20px;
  }
}
@media only screen and (max-width: 1024px) {
  .px-logo-scroll-grid {
    --cell-size-max: 120px;
    --cell-gap-max: 18px;
  }
}
@media only screen and (max-width: 960px) {
  .px-logo-scroll-grid {
    --cell-size-max: 108px;
    --cell-gap-max: 16px;
  }
}
@media only screen and (max-width: 768px) {
  .px-logo-scroll-grid {
    --cell-size-max: 96px;
    --cell-gap-max: 14px;
  }
  .px-logo-scroll-grid-inner {
    padding: 40px 20px;
  }
}
@media only screen and (max-width: 640px) {
  .px-logo-scroll-grid {
    --cell-size-max: 88px;
    --cell-gap-max: 12px;
  }
}
@media only screen and (max-width: 450px) {
  .px-logo-scroll-grid {
    --cell-size-max: 72px;
    --cell-gap-max: 10px;
  }
  .px-logo-scroll-grid-inner {
    padding: 30px 16px;
  }
}
@supports not (width: 1cqi) {
  .px-logo-scroll-grid-grid {
    --cell-size: var(--cell-size-max);
    --cell-gap: var(--cell-gap-max);
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-logo-scroll-grid-logo {
    transition: none;
  }
  .px-logo-scroll-grid-cell-inner {
    transition: none;
  }
  .px-logo-scroll-grid-connection {
    opacity: 0.25;
  }
}