.u-container {
    width: min(100% - 2rem, var(--content-max-width));
    margin-inline: auto;
}

.u-container--wide {
    width: min(100% - 2rem, var(--content-wide-max-width));
    margin-inline: auto;
}

.u-section {
    padding-block: clamp(var(--space-12), 8vw, var(--space-24));
}

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

.u-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-space, var(--space-3));
}

.u-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--grid-space, var(--space-6));
}

.u-flow > * + * {
    margin-block-start: var(--flow-space, var(--space-4));
}

.u-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.u-surface {
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.u-text-center {
    text-align: center;
}

.u-text-muted {
    color: var(--color-text-muted);
}

.u-text-success {
    color: var(--color-success-strong);
}

.u-text-warning {
    color: var(--color-warning-strong);
}

.u-text-danger {
    color: var(--color-danger-strong);
}

.u-text-measure {
    max-width: var(--text-max-width);
}

.u-font-semibold {
    font-weight: var(--font-weight-semibold);
}

.u-no-wrap {
    white-space: nowrap;
}

.u-full-width {
    width: 100%;
}

.u-min-width-0 {
    min-width: 0;
}

.u-overflow-x-auto {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.u-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.u-hide-mobile {
    display: none !important;
}

@media (min-width: 48rem) {
    .u-container,
    .u-container--wide {
        width: min(100% - 3rem, var(--content-max-width));
    }

    .u-container--wide {
        max-width: var(--content-wide-max-width);
    }

    .u-hide-mobile {
        display: initial !important;
    }

    .u-hide-tablet-up {
        display: none !important;
    }
}

@media (min-width: 90rem) {
    .u-container,
    .u-container--wide {
        width: min(100% - 5rem, var(--content-max-width));
    }

    .u-container--wide {
        max-width: var(--content-wide-max-width);
    }
}