/* One card geometry and type scale for both rows, including organisations without art. */
#partners {
  --brand-card-width: clamp(142px, 24vw, 152px);
  --brand-mark-height: clamp(32px, 3vw, 38px);
  --brand-name-size: clamp(11px, 1vw, 12px);
  --brand-gap: clamp(8px, 1vw, 12px);
}
.brand-directory-group { min-width: 0; }
.brand-directory-group + .brand-directory-group {
  margin-block-start: clamp(12px, 2vw, 20px);
  padding-block-start: clamp(12px, 2vw, 20px);
  border-top: 1px solid #dce1df;
}
.brand-directory-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--brand-card-width);
  gap: var(--brand-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #bcc9c4 transparent;
  list-style: none;
  margin: 0;
  padding: 0;
}
.brand-directory-list:focus-visible { outline: 2px solid #176486; outline-offset: 2px; }
.brand-directory-card {
  box-sizing: border-box;
  min-width: 0;
  display: grid;
  justify-items: center;
  grid-template-rows: var(--brand-mark-height) auto;
  align-content: start;
  gap: 5px;
  padding: 8px 9px;
  scroll-snap-align: start;
  border: 1px solid #dce1df;
  border-radius: 9px;
  background: #fff;
  color: #10243a;
  text-align: center;
  font-size: var(--brand-name-size);
}
.brand-directory-art {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 112px;
  height: var(--brand-mark-height);
}
.brand-directory-art > :is(img, svg) {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
.brand-directory-name {
  max-width: 100%;
  min-block-size: 2.4em;
  font-weight: 550;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.brand-directory-name-only { align-content: center; grid-template-rows: auto; }
.brand-directory-name-only .brand-directory-name {
  min-block-size: 0;
  font-size: 1.17em;
  font-weight: 650;
}
@media (max-width: 600px) {
  #partners { --brand-card-width: clamp(142px, 29vw, 146px); }
}