/* ==========================================================================
   The brokerage behind me

   "By the numbers" from venturegrowthcapital.com, resolved to this site's
   tokens: a header with the title on the left and one supporting line on the
   right, a hairline, then a row of figure tiles on a continuous loop that
   travels right to left, fading out at both edges and pausing under the
   pointer.

     header       3fr / 2fr above 1024, stacked below, 40px to the hairline
     tile         300px, 24px apart, 32px / 24px padding, 8px radius
     figure       the display serif, tabular numerals
     loop         8s of travel per tile, linear, -50% of a doubled track

   No literal colour: everything comes off tokens.css.
   ========================================================================== */

.yp-brok {
  background: rgb(var(--yp-shell-rgb));
  padding: clamp(64px, 7vw, 112px) 0;
  --yp-brok-card-w: 300px;
  --yp-brok-gap: 24px;
}

.yp-brok-wrap {
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 30px;
}

/* ---- header -------------------------------------------------------------- */

.yp-brok-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgb(var(--yp-ink-rgb) / 0.14);
}

@media (min-width: 1024px) {
  .yp-brok-head {
    grid-template-columns: 3fr 2fr;
    gap: 48px;
    align-items: end;
  }
  .yp-brok-deck { justify-self: end; }
}

/* Type comes from the shared .yp-shead-label; only the box is local. */
.yp-brok-title { padding: 0 !important; }