.ui-container {
  width: min(calc(100% - (2 * var(--ui-container-gutter, var(--ui-space-5)))), var(--ui-container-max, var(--ui-content-max)));
  margin-inline: auto;
}

.ui-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ui-layout-space, var(--ui-space-4));
}

.ui-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: var(--ui-cluster-align, center);
  justify-content: var(--ui-cluster-justify, flex-start);
  gap: var(--ui-layout-space, var(--ui-space-3));
}

.ui-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ui-grid-min, 15rem)), 1fr));
  gap: var(--ui-layout-space, var(--ui-space-5));
}

.ui-split {
  display: grid;
  grid-template-columns: minmax(0, var(--ui-split-first, 1fr)) minmax(0, var(--ui-split-second, 1fr));
  gap: var(--ui-layout-space, var(--ui-space-6));
  align-items: var(--ui-split-align, center);
}

.ui-inset {
  padding: var(--ui-inset, var(--ui-space-5));
}

.ui-frame {
  position: relative;
  overflow: clip;
  aspect-ratio: var(--ui-frame-ratio, 16 / 9);
  border-radius: var(--ui-frame-radius, var(--ui-radius-xl));
  corner-shape: squircle;
  background: var(--ui-surface-recessed);
}

.ui-frame > :is(img, video, iframe) {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.ui-frame--square {
  --ui-frame-ratio: 1;
}

.ui-frame--portrait {
  --ui-frame-ratio: 4 / 5;
}

.ui-frame--cinema {
  --ui-frame-ratio: 21 / 9;
}

.ui-region {
  padding-block: var(--ui-region-space, clamp(3rem, 8vw, 7rem));
}

:is(.ui-stack, .ui-cluster, .ui-grid, .ui-split)[data-space="1"] { --ui-layout-space: var(--ui-space-1); }
:is(.ui-stack, .ui-cluster, .ui-grid, .ui-split)[data-space="2"] { --ui-layout-space: var(--ui-space-2); }
:is(.ui-stack, .ui-cluster, .ui-grid, .ui-split)[data-space="3"] { --ui-layout-space: var(--ui-space-3); }
:is(.ui-stack, .ui-cluster, .ui-grid, .ui-split)[data-space="4"] { --ui-layout-space: var(--ui-space-4); }
:is(.ui-stack, .ui-cluster, .ui-grid, .ui-split)[data-space="5"] { --ui-layout-space: var(--ui-space-5); }
:is(.ui-stack, .ui-cluster, .ui-grid, .ui-split)[data-space="6"] { --ui-layout-space: var(--ui-space-6); }
:is(.ui-stack, .ui-cluster, .ui-grid, .ui-split)[data-space="7"] { --ui-layout-space: var(--ui-space-7); }

@media (max-width: 700px) {
  .ui-split {
    grid-template-columns: 1fr;
  }

  .ui-container {
    --ui-container-gutter: var(--ui-space-4);
  }
}