/* Rotating grid. Values from the live site's .tt-logo-grid-items: 6 columns,
   3rem / 1.5rem gaps, 4 columns at 767px and 3 at 479px. Each cell centers
   its item; RotatingGrid.tsx places items in cells with CSS order. */
.DHiKPUQrXU9kzAVlWbVm {
  --_cols: 6;

  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  column-gap: 3rem;
  row-gap: 1.5rem;
  width: 100%;
}

/* Webflow wraps slot content in one element; display: contents lets each
   logo become a grid cell. */
.DHiKPUQrXU9kzAVlWbVm ::slotted(*) {
  display: contents;
}

.DHiKPUQrXU9kzAVlWbVm[data-desktop="2"] { --_cols: 2; }
.DHiKPUQrXU9kzAVlWbVm[data-desktop="3"] { --_cols: 3; }
.DHiKPUQrXU9kzAVlWbVm[data-desktop="4"] { --_cols: 4; }
.DHiKPUQrXU9kzAVlWbVm[data-desktop="5"] { --_cols: 5; }
.DHiKPUQrXU9kzAVlWbVm[data-desktop="6"] { --_cols: 6; }

@media (max-width: 991px) {
  .DHiKPUQrXU9kzAVlWbVm[data-tablet="2"] { --_cols: 2; }
  .DHiKPUQrXU9kzAVlWbVm[data-tablet="3"] { --_cols: 3; }
  .DHiKPUQrXU9kzAVlWbVm[data-tablet="4"] { --_cols: 4; }
  .DHiKPUQrXU9kzAVlWbVm[data-tablet="5"] { --_cols: 5; }
  .DHiKPUQrXU9kzAVlWbVm[data-tablet="6"] { --_cols: 6; }
}

@media (max-width: 767px) {
  .DHiKPUQrXU9kzAVlWbVm { column-gap: 1.5rem; }
  .DHiKPUQrXU9kzAVlWbVm[data-mobile="2"] { --_cols: 2; }
  .DHiKPUQrXU9kzAVlWbVm[data-mobile="3"] { --_cols: 3; }
  .DHiKPUQrXU9kzAVlWbVm[data-mobile="4"] { --_cols: 4; }
  .DHiKPUQrXU9kzAVlWbVm[data-mobile="5"] { --_cols: 5; }
  .DHiKPUQrXU9kzAVlWbVm[data-mobile="6"] { --_cols: 6; }
}

@media (max-width: 479px) {
  .DHiKPUQrXU9kzAVlWbVm { column-gap: 2rem; }
  .DHiKPUQrXU9kzAVlWbVm[data-small-mobile="2"] { --_cols: 2; }
  .DHiKPUQrXU9kzAVlWbVm[data-small-mobile="3"] { --_cols: 3; }
  .DHiKPUQrXU9kzAVlWbVm[data-small-mobile="4"] { --_cols: 4; }
  .DHiKPUQrXU9kzAVlWbVm[data-small-mobile="5"] { --_cols: 5; }
  .DHiKPUQrXU9kzAVlWbVm[data-small-mobile="6"] { --_cols: 6; }
}

/* Logo height for Logo components inside (Height: Auto). */
.DHiKPUQrXU9kzAVlWbVm { --tt-logo-height: 2.5rem; }
.DHiKPUQrXU9kzAVlWbVm[data-logo-height="small"] { --tt-logo-height: 1.6rem; }
.DHiKPUQrXU9kzAVlWbVm[data-logo-height="medium"] { --tt-logo-height: 3rem; }
.DHiKPUQrXU9kzAVlWbVm[data-logo-height="large"] { --tt-logo-height: 3.5rem; }
.DHiKPUQrXU9kzAVlWbVm[data-logo-sizing="same"] { --tt-logo-balance: 0; }

/* Every row is as tall as the tallest logo could be (Balanced sizing scales a
   logo up to 1.3 times the height, see Logo.module.css), so a swap never
   changes the row height and nothing below the grid jumps. Taller items
   (e.g. a Logo with its own Height) still grow the row. */
.DHiKPUQrXU9kzAVlWbVm {
  --_tallest: 1.3;

  grid-auto-rows: minmax(calc(var(--tt-logo-height) * var(--_tallest)), auto);
}

.DHiKPUQrXU9kzAVlWbVm[data-logo-sizing="same"] { --_tallest: 1; }

/* Until RotatingGrid.tsx has set up the cells (data-ready), the grid is
   invisible and exactly as tall as its Visible items will be. The page arrives
   rendered on the server with every item, and a Collection List's items stand
   on top of each other until the script turns its wrappers into display:
   contents; without this the page would grow and then jump back. */
.DHiKPUQrXU9kzAVlWbVm:not([data-ready]) {
  --_rows: round(up, calc(var(--_visible, 12) / var(--_cols)), 1);

  height: calc(var(--_rows) * var(--tt-logo-height) * var(--_tallest) + (var(--_rows) - 1) * 1.5rem);
  overflow: clip;
  opacity: 0;
}

.DHiKPUQrXU9kzAVlWbVm {
  transition: opacity 0.3s ease;
}

/* A logo at a fixed height (live site: .tt-logo-item, 2.5rem). Narrower than
   its logo, the box shrinks and the image scales down inside it with
   object-fit: contain, so it keeps its proportions. */
.Inn8SsZnlL4YGk8w3GCH {
  --_h: var(--tt-logo-height, 2.5rem);
  /* Balanced sizing (see Logo.tsx): 3:1 is the reference shape. */
  --_ratio: 3;
  --_balance: var(--tt-logo-balance, 1);

  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: var(--_h);
  /* Browsers without pow() keep the plain height above. */
  height: calc(var(--_h) * clamp(0.7, pow(calc(3 / var(--_ratio)), calc(0.4 * var(--_balance))), 1.3));
  color: inherit;
  text-decoration: none;
}

.Inn8SsZnlL4YGk8w3GCH[data-height="small"] { --_h: 1.6rem; }
.Inn8SsZnlL4YGk8w3GCH[data-height="regular"] { --_h: 2.5rem; }
.Inn8SsZnlL4YGk8w3GCH[data-height="medium"] { --_h: 3rem; }
.Inn8SsZnlL4YGk8w3GCH[data-height="large"] { --_h: 3.5rem; }

.t0W1rYskRxyjmi7RlKID {
  display: block;
}

.Inn8SsZnlL4YGk8w3GCH [data-part="image"] {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter var(--transition-base, 0.25s ease), opacity var(--transition-base, 0.25s ease);
}

.Inn8SsZnlL4YGk8w3GCH [data-part="placeholder"] {
  width: calc(var(--_h) * 3);
  height: 100%;
  border-radius: 0.3rem;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

/* Muted via filter, so the original colors return on hover. */
.Inn8SsZnlL4YGk8w3GCH[data-color="muted"] [data-part="image"] {
  filter: grayscale(1);
  opacity: 0.6;
}

.Inn8SsZnlL4YGk8w3GCH[data-color="muted"]:hover [data-part="image"] {
  filter: none;
  opacity: 1;
}

/* One color: the image stays for size and alt text but is see-through; a
   layer on top paints --_fill through the image's shape (--_mask, set
   inline). Same box and contain fit as the image, so they line up. */
.Inn8SsZnlL4YGk8w3GCH[data-filled] {
  --_fill: currentColor;

  position: relative;
}

.Inn8SsZnlL4YGk8w3GCH[data-filled] [data-part="image"] {
  opacity: 0;
}

.Inn8SsZnlL4YGk8w3GCH[data-filled]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--_fill);
  -webkit-mask: var(--_mask) center / contain no-repeat;
  mask: var(--_mask) center / contain no-repeat;
  pointer-events: none;
}

.Inn8SsZnlL4YGk8w3GCH[data-color="brand"] { --_fill: #4c39f9; }
.Inn8SsZnlL4YGk8w3GCH[data-color="purple"] { --_fill: var(--purple-600, #6f00ff); }
.Inn8SsZnlL4YGk8w3GCH[data-color="black"] { --_fill: var(--black-a-100, #0d0d0d); }
.Inn8SsZnlL4YGk8w3GCH[data-color="white"] { --_fill: var(--white-a-100, #fff); }