body {
  --ui-font-family: system-ui, sans-serif;
  --ui-font-family-headings: "Bricolage Grotesque", sans-serif;
  --ui-header-height: 100px;
}

.ui-dropdown {
  & > [popover] {
    position-area: bottom center;
  }
  .--trigger.--nobg {
    background-image: none;
  }
}
.whitespace-nowrap {
  white-space: nowrap;
}
html, body {
  height: 100%;
}
.ui-header {
  height: var(--ui-header-height);
}
.ui-vcontainer {
  height: calc(100vh - var(--ui-header-height));
  display: flex;
  flex-direction: column;
  &.--center {
    justify-content: center;
    align-items: center;
  }
}