@ersbeth/picokit 0.0.1

package/dist/components.css

@@ -0,0 +1,1867 @@
+@layer mixins {
+    .align-mixin {
+        /* VARIABLES */
+
+        --align-items: var(--align-items-default, inherit);
+
+        /* PROPERTIES */
+
+        align-items: var(--align-items);
+    }
+}
+@layer utils {
+    .align-start {
+        --align-items: start;
+    }
+    .align-center {
+        --align-items: center;
+    }
+    .align-end {
+        --align-items: end;
+    }
+    .align-stretch {
+        --align-items: stretch;
+    }
+}
+
+@layer mixins {
+    .gap-mixin {
+        /* VARIABLES */
+
+        --gap: var(--gap-default, inherit);
+
+        /* PROPERTIES */
+
+        gap: var(--gap);
+    }
+}
+
+@layer utils {
+    .gap-none {
+        --gap: 0;
+    }
+    .gap-3xsmall {
+        --gap: var(--space-3xs);
+    }
+    .gap-2xsmall {
+        --gap: var(--space-2xs);
+    }
+    .gap-xsmall {
+        --gap: var(--space-xs);
+    }
+    .gap-small {
+        --gap: var(--space-s);
+    }
+    .gap-medium {
+        --gap: var(--space-m);
+    }
+    .gap-large {
+        --gap: var(--space-l);
+    }
+    .gap-xlarge {
+        --gap: var(--space-xl);
+    }
+    .gap-2xlarge {
+        --gap: var(--space-2xl);
+    }
+    .gap-3xlarge {
+        --gap: var(--space-3xl);
+    }
+    .gap-4xlarge {
+        --gap: var(--space-4xl);
+    }
+}
+
+@layer mixins {
+    .height-mixin {
+        /* VARIABLES */
+
+        --height: var(--height-default, inherit);
+        --min-height: var(--min-height-default, inherit);
+
+        /* PROPERTIES */
+
+        height: var(--height);
+        min-height: var(--min-height);
+    }
+}
+
+@layer utils {
+    /* HEIGHT */
+
+    .height-small {
+        --height: var(--height-s);
+    }
+    .height-medium {
+        --height: var(--height-m);
+    }
+    .height-large {
+        --height: var(--height-l);
+    }
+    .height-full {
+        --height: var(--height-full);
+    }
+
+    /* MIN HEIGHT */
+
+    .min-height-small {
+        --min-height: var(--height-s);
+    }
+    .min-height-medium {
+        --min-height: var(--height-m);
+    }
+    .min-height-large {
+        --min-height: var(--height-l);
+    }
+    .min-height-full {
+        --min-height: var(--height-full);
+    }
+}
+
+@layer components {
+    /* PADDING */
+
+    .padding-3xsmall {
+        padding: var(--space-dynamic-3xs);
+    }
+
+    .padding-2xsmall {
+        padding: var(--space-dynamic-2xs);
+    }
+
+    .padding-xsmall {
+        padding: var(--space-dynamic-xs);
+    }
+
+    .padding-small {
+        padding: var(--space-dynamic-s);
+    }
+
+    .padding-medium {
+        padding: var(--space-dynamic-m);
+    }
+
+    .padding-large {
+        padding: var(--space-dynamic-l);
+    }
+
+    .padding-xlarge {
+        padding: var(--space-dynamic-xl);
+    }
+
+    .padding-2xlarge {
+        padding: var(--space-dynamic-2xl);
+    }
+
+    .padding-3xlarge {
+        padding: var(--space-dynamic-3xl);
+    }
+
+    .padding-4xlarge {
+        padding: var(--space-dynamic-4xl);
+    }
+
+    /* PADDING BLOCK */
+
+    .padding-block-3xsmall {
+        padding-block: var(--space-dynamic-3xs);
+    }
+
+    .padding-block-2xsmall {
+        padding-block: var(--space-dynamic-2xs);
+    }
+
+    .padding-block-xsmall {
+        padding-block: var(--space-dynamic-xs);
+    }
+
+    .padding-block-small {
+        padding-block: var(--space-dynamic-s);
+    }
+
+    .padding-block-medium {
+        padding-block: var(--space-dynamic-m);
+    }
+
+    .padding-block-large {
+        padding-block: var(--space-dynamic-l);
+    }
+
+    .padding-block-xlarge {
+        padding-block: var(--space-dynamic-xl);
+    }
+
+    .padding-block-2xlarge {
+        padding-block: var(--space-dynamic-2xl);
+    }
+
+    .padding-block-3xlarge {
+        padding-block: var(--space-dynamic-3xl);
+    }
+
+    .padding-block-4xlarge {
+        padding-block: var(--space-dynamic-4xl);
+    }
+
+    /* PADDING INLINE */
+
+    .padding-inline-3xsmall {
+        padding-inline: var(--space-dynamic-3xs);
+    }
+
+    .padding-inline-2xsmall {
+        padding-inline: var(--space-dynamic-2xs);
+    }
+
+    .padding-inline-xsmall {
+        padding-inline: var(--space-dynamic-xs);
+    }
+
+    .padding-inline-small {
+        padding-inline: var(--space-dynamic-s);
+    }
+
+    .padding-inline-medium {
+        padding-inline: var(--space-dynamic-m);
+    }
+
+    .padding-inline-large {
+        padding-inline: var(--space-dynamic-l);
+    }
+
+    .padding-inline-xlarge {
+        padding-inline: var(--space-dynamic-xl);
+    }
+
+    .padding-inline-2xlarge {
+        padding-inline: var(--space-dynamic-2xl);
+    }
+
+    .padding-inline-3xlarge {
+        padding-inline: var(--space-dynamic-3xl);
+    }
+
+    .padding-inline-4xlarge {
+        padding-inline: var(--space-dynamic-4xl);
+    }
+
+    /* PADDING TOP */
+
+    .padding-top-3xsmall {
+        padding-top: var(--space-dynamic-3xs);
+    }
+
+    .padding-top-2xsmall {
+        padding-top: var(--space-dynamic-2xs);
+    }
+
+    .padding-top-xsmall {
+        padding-top: var(--space-dynamic-xs);
+    }
+
+    .padding-top-small {
+        padding-top: var(--space-dynamic-s);
+    }
+
+    .padding-top-medium {
+        padding-top: var(--space-dynamic-m);
+    }
+
+    .padding-top-large {
+        padding-top: var(--space-dynamic-l);
+    }
+
+    .padding-top-xlarge {
+        padding-top: var(--space-dynamic-xl);
+    }
+
+    .padding-top-2xlarge {
+        padding-top: var(--space-dynamic-2xl);
+    }
+
+    .padding-top-3xlarge {
+        padding-top: var(--space-dynamic-3xl);
+    }
+
+    .padding-top-4xlarge {
+        padding-top: var(--space-dynamic-4xl);
+    }
+
+    /* PADDING BOTTOM */
+
+    .padding-bottom-3xsmall {
+        padding-bottom: var(--space-dynamic-3xs);
+    }
+
+    .padding-bottom-2xsmall {
+        padding-bottom: var(--space-dynamic-2xs);
+    }
+
+    .padding-bottom-xsmall {
+        padding-bottom: var(--space-dynamic-xs);
+    }
+
+    .padding-bottom-small {
+        padding-bottom: var(--space-dynamic-s);
+    }
+
+    .padding-bottom-medium {
+        padding-bottom: var(--space-dynamic-m);
+    }
+
+    .padding-bottom-large {
+        padding-bottom: var(--space-dynamic-l);
+    }
+
+    .padding-bottom-xlarge {
+        padding-bottom: var(--space-dynamic-xl);
+    }
+
+    .padding-bottom-2xlarge {
+        padding-bottom: var(--space-dynamic-2xl);
+    }
+
+    .padding-bottom-3xlarge {
+        padding-bottom: var(--space-dynamic-3xl);
+    }
+
+    .padding-bottom-4xlarge {
+        padding-bottom: var(--space-dynamic-4xl);
+    }
+
+    /* PADDING LEFT */
+
+    .padding-left-3xsmall {
+        padding-left: var(--space-dynamic-3xs);
+    }
+
+    .padding-left-2xsmall {
+        padding-left: var(--space-dynamic-2xs);
+    }
+
+    .padding-left-xsmall {
+        padding-left: var(--space-dynamic-xs);
+    }
+
+    .padding-left-small {
+        padding-left: var(--space-dynamic-s);
+    }
+
+    .padding-left-medium {
+        padding-left: var(--space-dynamic-m);
+    }
+
+    .padding-left-large {
+        padding-left: var(--space-dynamic-l);
+    }
+
+    .padding-left-xlarge {
+        padding-left: var(--space-dynamic-xl);
+    }
+
+    .padding-left-2xlarge {
+        padding-left: var(--space-dynamic-2xl);
+    }
+
+    .padding-left-3xlarge {
+        padding-left: var(--space-dynamic-3xl);
+    }
+
+    .padding-left-4xlarge {
+        padding-left: var(--space-dynamic-4xl);
+    }
+
+    /* PADDING RIGHT */
+
+    .padding-right-3xsmall {
+        padding-right: var(--space-dynamic-3xs);
+    }
+
+    .padding-right-2xsmall {
+        padding-right: var(--space-dynamic-2xs);
+    }
+
+    .padding-right-xsmall {
+        padding-right: var(--space-dynamic-xs);
+    }
+
+    .padding-right-small {
+        padding-right: var(--space-dynamic-s);
+    }
+
+    .padding-right-medium {
+        padding-right: var(--space-dynamic-m);
+    }
+
+    .padding-right-large {
+        padding-right: var(--space-dynamic-l);
+    }
+
+    .padding-right-xlarge {
+        padding-right: var(--space-dynamic-xl);
+    }
+
+    .padding-right-2xlarge {
+        padding-right: var(--space-dynamic-2xl);
+    }
+
+    .padding-right-3xlarge {
+        padding-right: var(--space-dynamic-3xl);
+    }
+
+    .padding-right-4xlarge {
+        padding-right: var(--space-dynamic-4xl);
+    }
+}
+
+/* PANEL MIXIN */
+
+@layer components {
+    /* VARIABLES */
+
+    .panel {
+        --panel-border-style: var(--border-style);
+        --panel-border-width: var(--border-width);
+        --panel-border-radius: var(--border-radius);
+
+        --panel-color-clear: var(--color-surface-clear);
+        --panel-color-transparent: "transparent";
+    }
+
+    /* CLASSES */
+
+    /* ---- Colors */
+
+    .panel-color-neutral {
+        --panel-color-subtle: var(--color-neutral-surface-subtle);
+        --panel-color-soft: var(--color-neutral-surface-soft);
+        --panel-color-muted: var(--color-neutral-surface-muted);
+        --panel-color-base: var(--color-neutral-surface-base);
+        --panel-color-strong: var(--color-neutral-surface-strong);
+        --panel-color-deep: var(--color-neutral-surface-deep);
+        --panel-color-deeper: var(--color-neutral-text-soft);
+        --panel-color-deepest: var(--color-neutral-text-muted);
+    }
+
+    .panel-color-brand {
+        --panel-color-subtle: var(--color-brand-surface-subtle);
+        --panel-color-soft: var(--color-brand-surface-soft);
+        --panel-color-muted: var(--color-brand-surface-muted);
+        --panel-color-base: var(--color-brand-surface-base);
+        --panel-color-strong: var(--color-brand-surface-strong);
+        --panel-color-deep: var(--color-brand-surface-deep);
+        --panel-color-deeper: var(--color-brand-text-soft);
+        --panel-color-deepest: var(--color-brand-text-muted);
+    }
+
+    .panel-color-accent {
+        --panel-color-subtle: var(--color-accent-surface-subtle);
+        --panel-color-soft: var(--color-accent-surface-soft);
+        --panel-color-muted: var(--color-accent-surface-muted);
+        --panel-color-base: var(--color-accent-surface-base);
+        --panel-color-strong: var(--color-accent-surface-strong);
+        --panel-color-deep: var(--color-accent-surface-deep);
+        --panel-color-deeper: var(--color-accent-text-soft);
+        --panel-color-deepest: var(--color-accent-text-muted);
+    }
+
+    .panel-color-danger {
+        --panel-color-subtle: var(--color-danger-surface-subtle);
+        --panel-color-soft: var(--color-danger-surface-soft);
+        --panel-color-muted: var(--color-danger-surface-muted);
+        --panel-color-base: var(--color-danger-surface-base);
+        --panel-color-strong: var(--color-danger-surface-strong);
+        --panel-color-deep: var(--color-danger-surface-deep);
+        --panel-color-deeper: var(--color-danger-text-soft);
+        --panel-color-deepest: var(--color-danger-text-muted);
+    }
+
+    /* ---- Intensities */
+
+    .panel-intensity-transparent {
+        background-color: transparent;
+        border-color: var(--panel-color-muted);
+    }
+
+    .panel-intensity-clear {
+        background-color: var(--panel-color-clear);
+        border-color: var(--panel-color-muted);
+    }
+
+    .panel-intensity-subtle {
+        background-color: var(--panel-color-subtle);
+        border-color: var(--panel-color-muted);
+    }
+
+    .panel-intensity-soft {
+        background-color: var(--panel-color-soft);
+        border-color: var(--panel-color-base);
+    }
+
+    .panel-intensity-muted {
+        background-color: var(--panel-color-muted);
+        border-color: var(--panel-color-strong);
+    }
+
+    .panel-intensity-base {
+        background-color: var(--panel-color-base);
+        border-color: var(--panel-color-deep);
+    }
+
+    .panel-intensity-strong {
+        background-color: var(--panel-color-strong);
+        border-color: var(--panel-color-deeper);
+    }
+
+    .panel-intensity-deep {
+        background-color: var(--panel-color-deep);
+        border-color: var(--panel-color-deepest);
+    }
+
+    /* ---- Borders */
+
+    .panel-border-all {
+        border-style: var(--panel-border-style);
+        border-width: var(--panel-border-width);
+    }
+
+    .panel-border-block {
+        border-block-style: var(--panel-border-style);
+        border-block-width: var(--panel-border-width);
+    }
+
+    .panel-border-inline {
+        border-inline-style: var(--panel-border-style);
+        border-inline-width: var(--panel-border-width);
+    }
+
+    .panel-border-top {
+        border-top-style: var(--panel-border-style);
+        border-top-width: var(--panel-border-width);
+    }
+
+    .panel-border-bottom {
+        border-bottom-style: var(--panel-border-style);
+        border-bottom-width: var(--panel-border-width);
+    }
+
+    .panel-border-left {
+        border-left-style: var(--panel-border-style);
+        border-left-width: var(--panel-border-width);
+    }
+
+    .panel-border-right {
+        border-right-style: var(--panel-border-style);
+        border-right-width: var(--panel-border-width);
+    }
+
+    /* ---- Radius */
+
+    .panel-radius-all {
+        border-radius: var(--panel-border-radius);
+    }
+
+    .panel-radius-top {
+        border-top-left-radius: var(--panel-border-radius);
+        border-top-right-radius: var(--panel-border-radius);
+    }
+
+    .panel-radius-bottom {
+        border-bottom-left-radius: var(--panel-border-radius);
+        border-bottom-right-radius: var(--panel-border-radius);
+    }
+
+    .panel-radius-left {
+        border-top-left-radius: var(--panel-border-radius);
+        border-bottom-left-radius: var(--panel-border-radius);
+    }
+
+    .panel-radius-right {
+        border-top-right-radius: var(--panel-border-radius);
+        border-bottom-right-radius: var(--panel-border-radius);
+    }
+
+    .panel-radius-top-left {
+        border-top-left-radius: var(--panel-border-radius);
+    }
+
+    .panel-radius-top-right {
+        border-top-right-radius: var(--panel-border-radius);
+    }
+
+    .panel-radius-bottom-left {
+        border-bottom-left-radius: var(--panel-border-radius);
+    }
+
+    .panel-radius-bottom-right {
+        border-bottom-right-radius: var(--panel-border-radius);
+    }
+}
+
+@layer mixins {
+    .text-mixin {
+        /* VARIABLES */
+
+        --text-color: var(--text-color-default, inherit);
+        --text-font-size: var(--text-font-size-default, inherit);
+        --text-font-weight: var(--text-font-weight-default, inherit);
+        --text-font-family: var(--text-font-family-default, inherit);
+        --text-line-height: var(--text-line-height-default, inherit);
+        --text-align: var(--text-align-default, inherit);
+
+        /* PROPERTIES */
+
+        color: var(--text-color);
+        font-size: var(--text-font-size);
+        font-weight: var(--text-font-weight);
+        font-family: var(--text-font-family);
+        line-height: var(--text-line-height);
+        text-align: var(--text-align);
+    }
+}
+
+@layer utils {
+    /* TEXT PALETTE */
+
+    .text-color-neutral {
+        --text-color-subtle: var(--color-neutral-text-subtle);
+        --text-color-soft: var(--color-neutral-text-soft);
+        --text-color-muted: var(--color-neutral-text-muted);
+        --text-color-base: var(--color-neutral-text-base);
+        --text-color-strong: var(--color-neutral-text-strong);
+        --text-color-deep: var(--color-neutral-text-deep);
+        --text-color-inverted: var(--color-text-inverted);
+    }
+
+    .text-color-brand {
+        --text-color-subtle: var(--color-brand-text-subtle);
+        --text-color-soft: var(--color-brand-text-soft);
+        --text-color-muted: var(--color-brand-text-muted);
+        --text-color-base: var(--color-brand-text-base);
+        --text-color-strong: var(--color-brand-text-strong);
+        --text-color-deep: var(--color-brand-text-deep);
+        --text-color-inverted: var(--color-text-inverted);
+    }
+
+    .text-color-accent {
+        --text-color-subtle: var(--color-accent-text-subtle);
+        --text-color-soft: var(--color-accent-text-soft);
+        --text-color-muted: var(--color-accent-text-muted);
+        --text-color-base: var(--color-accent-text-base);
+        --text-color-strong: var(--color-accent-text-strong);
+        --text-color-deep: var(--color-accent-text-deep);
+        --text-color-inverted: var(--color-text-inverted);
+    }
+
+    .text-color-danger {
+        --text-color-subtle: var(--color-danger-text-subtle);
+        --text-color-soft: var(--color-danger-text-soft);
+        --text-color-muted: var(--color-danger-text-muted);
+        --text-color-base: var(--color-danger-text-base);
+        --text-color-strong: var(--color-danger-text-strong);
+        --text-color-deep: var(--color-danger-text-deep);
+        --text-color-inverted: var(--color-text-inverted);
+    }
+
+    /* TEXT INTENSITY */
+
+    .text-intensity-subtle {
+        --text-color: var(--text-color-subtle);
+    }
+
+    .text-intensity-soft {
+        --text-color: var(--text-color-soft);
+    }
+
+    .text-intensity-muted {
+        --text-color: var(--text-color-muted);
+    }
+
+    .text-intensity-base {
+        --text-color: var(--text-color-base);
+    }
+
+    .text-intensity-strong {
+        --text-color: var(--text-color-strong);
+    }
+
+    .text-intensity-deep {
+        --text-color: var(--text-color-deep);
+    }
+
+    .text-intensity-inverted {
+        --text-color: var(--text-color-inverted);
+    }
+
+    /* TEXT ALIGN */
+
+    .text-align-left {
+        --text-align: start;
+    }
+
+    .text-align-center {
+        --text-align: center;
+    }
+
+    .text-align-right {
+        --text-align: end;
+    }
+
+    .text-align-stretch {
+        --text-align: justify;
+    }
+
+    /* TEXT FAMILY */
+
+    .text-family-body {
+        --text-font-family: var(--font-family-body);
+    }
+
+    .text-family-heading {
+        --text-font-family: var(--font-family-heading);
+    }
+
+    .text-family-code {
+        --text-font-family: var(--font-family-code);
+    }
+
+    .text-family-longform {
+        --text-font-family: var(--font-family-longform);
+    }
+
+    .text-family-tagline {
+        --text-font-family: var(--font-family-tagline);
+    }
+
+    .text-family-action {
+        --text-font-family: var(--font-family-action);
+    }
+
+    /* TEXT WEIGHT */
+
+    .text-weight-light {
+        --text-font-weight: var(--font-weight-light);
+    }
+
+    .text-weight-normal {
+        --text-font-weight: var(--font-weight-normal);
+    }
+
+    .text-weight-semibold {
+        --text-font-weight: var(--font-weight-semibold);
+    }
+
+    .text-weight-bold {
+        --text-font-weight: var(--font-weight-bold);
+    }
+
+    /* TEXT SIZE */
+
+    .text-size-2xsmall {
+        --text-font-size: var(--font-size-dynamic-2xs);
+    }
+
+    .text-size-xsmall {
+        --text-font-size: var(--font-size-dynamic-xs);
+    }
+
+    .text-size-small {
+        --text-font-size: var(--font-size-dynamic-s);
+    }
+
+    .text-size-medium {
+        --text-font-size: var(--font-size-dynamic-m);
+    }
+
+    .text-size-large {
+        --text-font-size: var(--font-size-dynamic-l);
+    }
+
+    .text-size-xlarge {
+        --text-font-size: var(--font-size-dynamic-xl);
+    }
+
+    .text-size-2xlarge {
+        --text-font-size: var(--font-size-dynamic-2xl);
+    }
+
+    .text-size-3xlarge {
+        --text-font-size: var(--font-size-dynamic-3xl);
+    }
+
+    .text-size-4xlarge {
+        --text-font-size: var(--font-size-dynamic-4xl);
+    }
+
+    /* TEXT LINE */
+
+    .text-line-condensed {
+        --text-line-height: var(--line-height-condensed);
+    }
+
+    .text-line-normal {
+        --text-line-height: var(--line-height-normal);
+    }
+
+    .text-line-expanded {
+        --text-line-height: var(--line-height-expanded);
+    }
+}
+
+@layer mixins {
+    .width-mixin {
+        /* VARIABLES */
+
+        --width: var(--width-default, inherit);
+        --max-width: var(--max-width-default, inherit);
+
+        /* PROPERTIES */
+
+        width: var(--width);
+        max-width: var(--max-width);
+    }
+}
+
+@layer utils {
+    /* WIDTH */
+
+    .width-xsmall {
+        --width: var(--width-xs);
+    }
+    .width-small {
+        --width: var(--width-s);
+    }
+    .width-medium {
+        --width: var(--width-m);
+    }
+    .width-large {
+        --width: var(--width-l);
+    }
+    .width-xlarge {
+        --width: var(--width-xl);
+    }
+    .width-2xlarge {
+        --width: var(--width-2xl);
+    }
+
+    /* MAX WIDTH */
+
+    .max-width-xsmall {
+        --max-width: var(--width-xs);
+    }
+    .max-width-small {
+        --max-width: var(--width-s);
+    }
+    .max-width-medium {
+        --max-width: var(--width-m);
+    }
+    .max-width-large {
+        --max-width: var(--width-l);
+    }
+    .max-width-xlarge {
+        --max-width: var(--width-xl);
+    }
+    .max-width-2xlarge {
+        --max-width: var(--width-2xl);
+    }
+}
+
+@layer components {
+    /* CLUSTER */
+
+    .cluster {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        /* ALIGN MIXIN */
+        --align-items-default: stretch;
+
+        /* GAP MIXIN */
+        --gap-default: var(--space-m);
+
+        /* MIN HEIGHT MIXIN */
+        --min-height-default: none;
+
+        /* WIDTH MIXIN */
+        --width-default: none;
+        --max-width-default: none;
+
+        /* TEXT MIXIN */
+        --text-align-default: left;
+    }
+}
+
+@layer components {
+    /* CLASSES */
+
+    .container {
+        display: grid;
+        place-items: center;
+
+        /* MIN HEIGHT MIXIN */
+        --min-height-default: none;
+
+        /* WIDTH MIXIN */
+        --width-default: none;
+        --max-width-default: none;
+
+        /* TEXT MIXIN */
+        --text-align-default: left;
+    }
+}
+
+/* MEDIA OS */
+
+/* MEDIA ORIENTATION */
+
+/* MEDIA WIDTH */
+
+@layer components {
+    /* VARS */
+
+    .dual {
+        --dual-split-left: 45%;
+        --dual-split-middle: 50%;
+        --dual-split-right: 55%;
+    }
+
+    /* CLASSES */
+
+    .dual {
+        display: grid;
+        grid-template-columns: 1fr;
+        place-items: stretch;
+    }
+
+        @media (width >= 768px) {
+
+    .dual {
+            grid-template-columns: 1fr 1fr;
+    }
+        }
+
+        @media (width >= 1024px) {
+            .dual.dual-split-left {
+                grid-template-columns: var(--dual-split-left) 1fr;
+            }
+            .dual.dual-split-middle {
+                grid-template-columns: var(--dual-split-middle) 1fr;
+            }
+            .dual.dual-split-right {
+                grid-template-columns: var(--dual-split-right) 1fr;
+            }
+        }
+}
+
+/* MEDIA OS */
+
+/* MEDIA ORIENTATION */
+
+/* MEDIA WIDTH */
+
+@layer components {
+    /* CLASSES */
+
+    .stack {
+        display: flex;
+        flex-direction: column;
+
+        /* GAP MIXIN */
+        --gap-default: var(--space-m);
+
+        /* ALIGN MIXIN */
+        --align-items-default: left;
+
+        /* TEXT MIXIN */
+        --text-align-default: left;
+
+        /* MIN HEIGHT MIXIN */
+        --min-height-default: none;
+
+        /* WIDTH MIXIN */
+        --width-default: none;
+        --max-width-default: none;
+    }
+}
+
+@layer components {
+    /* VARIABLES */
+    .footer {
+        --footer-contact-max-width: 400px;
+        --footer-map-max-width: 400px;
+        --footer-title-font-family: var(--font-family-transitional);
+    }
+
+    /* CLASSES */
+        .footer .footer-blocks {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: var(--space-4xl);
+        }
+
+            @media (max-width: 768px) {
+        .footer .footer-blocks {
+                justify-content: start;
+        }
+            }
+
+            :is(.footer .footer-blocks) .footer-title {
+                font-family: var(--footer-title-font-family);
+                font-weight: var(--font-weight-bold);
+                font-size: var(--font-size-l);
+                margin-bottom: var(--space-l);
+                color: var(--color-neutral-text-strong);
+            }
+
+            :is(.footer .footer-blocks) .footer-description {
+                font-weight: var(--font-weight-normal);
+                color: var(--color-neutral-text-muted);
+                margin-bottom: var(--space-m);
+                line-height: var(--line-height-condensed);
+            }
+
+            :is(.footer .footer-blocks) .footer-items {
+                display: flex;
+                flex-direction: column;
+                gap: var(--space-xs);
+            }
+
+            :is(.footer .footer-blocks) .footer-contact {
+                max-width: var(--footer-contact-max-width);
+            }
+                :is(:is(.footer .footer-blocks) .footer-contact) div {
+                    display: grid;
+                    grid-template-columns: auto 1fr;
+                    align-items: center;
+                    gap: var(--space-s);
+                }
+
+                    :is(:is(:is(.footer .footer-blocks) .footer-contact) div) svg {
+                        color: var(--color-brand-text-soft);
+                    }
+
+            :is(.footer .footer-blocks) .footer-map {
+                max-width: var(--footer-map-max-width);
+            }
+
+            :is(.footer .footer-blocks) iframe {
+                border-radius: var(--border-radius);
+            }
+
+        .footer .footer-copyright {
+            color: var(--color-neutral-text-soft);
+            font-size: var(--font-size-s);
+        }
+}
+
+/* NAVIGATION */
+
+/* MEDIA OS */
+
+/* MEDIA ORIENTATION */
+
+/* MEDIA WIDTH */
+
+.navigation {
+    display: contents;
+}
+
+.navigation .navigation-bar {
+        position: relative;
+        padding-inline: var(--space-xl);
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        backdrop-filter: blur(var(--space-xs));
+        background-color: rgb(from var(--color-neutral-surface-subtle) r g b / 0.8);
+        color: var(--color-neutral-text-base);
+    }
+
+@media (width < 768px) {
+
+.navigation .navigation-bar {
+            padding-inline: var(--space-m);
+    }
+        }
+
+:is(.navigation .navigation-bar) .navigation-bar-brand {
+            font-size: var(--font-size-l);
+            text-decoration: none;
+            color: var(--color-neutral-text-base);
+        }
+
+:is(:is(.navigation .navigation-bar) .navigation-bar-brand):visited {
+                color: inherit;
+            }
+
+:is(.navigation .navigation-bar) .navigation-bar-menu {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            height: 100%;
+
+            display: flex;
+            align-items: center;
+            gap: var(--space-xs);
+        }
+
+@media (width < 768px) {
+
+:is(.navigation .navigation-bar) .navigation-bar-menu {
+                display: none;
+        }
+            }
+
+:is(:is(.navigation .navigation-bar) .navigation-bar-menu) .navigation-bar-menu-link {
+                color: var(--color-neutral-text-soft);
+                padding-inline: var(--space-s);
+                padding-block: var(--space-xs);
+                border-radius: var(--border-radius);
+            }
+
+:is(:is(:is(.navigation .navigation-bar) .navigation-bar-menu) .navigation-bar-menu-link):visited {
+                    color: var(--color-neutral-text-soft);
+                }
+
+:is(:is(:is(.navigation .navigation-bar) .navigation-bar-menu) .navigation-bar-menu-link):hover {
+                    color: var(--color-neutral-text-muted);
+                    background-color: var(--color-neutral-surface-soft);
+                }
+
+.current:is(:is(:is(.navigation .navigation-bar) .navigation-bar-menu) .navigation-bar-menu-link) {
+                    color: var(--color-brand-text-muted);
+                    background-color: var(--color-brand-surface-soft);
+                }
+
+:is(.navigation .navigation-bar) .navigation-bar-cta {
+            display: flex;
+            align-items: center;
+            gap: var(--space-m);
+        }
+
+@media (width < 768px) {
+
+:is(.navigation .navigation-bar) .navigation-bar-cta {
+                display: none;
+        }
+            }
+
+:is(:is(.navigation .navigation-bar) .navigation-bar-cta) .navigation-bar-cta-link {
+                display: contents;
+            }
+
+:is(.navigation .navigation-bar) .navigation-sheet-trigger {
+            display: none;
+        }
+
+@media (width < 768px) {
+
+:is(.navigation .navigation-bar) .navigation-sheet-trigger {
+                color: var(--color-neutral-text-base);
+                cursor: pointer;
+                padding: var(--space-xs);
+                border-radius: var(--border-radius);
+                display: grid;
+                place-items: center;
+
+                /* biome-ignore lint/style/noDescendingSpecificity: false positive */
+        }
+                :is(:is(.navigation .navigation-bar) .navigation-sheet-trigger):hover {
+                    background-color: var(--color-neutral-surface-muted);
+                }
+            }
+
+.navigation-sheet-portal {
+    position: fixed;
+    inset: 0;
+    z-index: var(--layer-5);
+}
+
+.navigation-sheet-portal .navigation-sheet-overlay {
+        position: absolute;
+        inset: 0;
+        background-color: rgb(0 0 0 / 0.2);
+        animation: overlayHide 250ms ease 100ms forwards;
+    }
+
+[data-expanded]:is(.navigation-sheet-portal .navigation-sheet-overlay) {
+            animation: overlayShow 250ms ease;
+        }
+
+.navigation-sheet-portal .navigation-sheet-content {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        right: 0;
+        bottom: 0;
+        background-color: var(--color-neutral-surface-subtle);
+        box-shadow:
+            0 10px 15px -3px rgb(0 0 0 / 0.1),
+            0 4px 6px -4px rgb(0 0 0 / 0.1);
+        animation: contentHide 300ms ease-in forwards;
+
+        padding: var(--space-xl);
+        overflow: scroll;
+    }
+
+@media (width < 480px) {
+
+.navigation-sheet-portal .navigation-sheet-content {
+            left: 0;
+    }
+        }
+
+[data-expanded]:is(.navigation-sheet-portal .navigation-sheet-content) {
+            animation: contentShow 300ms ease-out;
+        }
+
+:is(.navigation-sheet-portal .navigation-sheet-content) .navigation-sheet-header {
+            display: grid;
+            grid-template-columns: 1fr auto;
+            place-items: center start;
+            margin-bottom: var(--space-l);
+        }
+
+:is(:is(.navigation-sheet-portal .navigation-sheet-content) .navigation-sheet-header) .navigation-sheet-close {
+                color: var(--color-neutral-text-base);
+                cursor: pointer;
+                padding: var(--space-2xs);
+                border-radius: var(--border-radius);
+                display: grid;
+                place-items: center;
+            }
+
+:is(:is(:is(.navigation-sheet-portal .navigation-sheet-content) .navigation-sheet-header) .navigation-sheet-close):hover {
+                    background-color: var(--color-neutral-surface-muted);
+                }
+
+:is(.navigation-sheet-portal .navigation-sheet-content) .navigation-sheet-menu {
+            display: flex;
+            flex-direction: column;
+            margin-bottom: var(--space-l);
+            background: var(--color-surface);
+            border: var(--border-width-s) solid var(--color-neutral-surface-muted);
+            border-radius: var(--border-radius);
+            overflow: hidden;
+            box-shadow: var(--shadow-m);
+        }
+
+:is(:is(.navigation-sheet-portal .navigation-sheet-content) .navigation-sheet-menu) .navigation-sheet-menu-link {
+                color: var(--color-neutral-text-soft);
+                padding-inline: var(--space-m);
+                padding-block: var(--space-s);
+                box-sizing: border-box;
+            }
+
+:is(:is(:is(.navigation-sheet-portal .navigation-sheet-content) .navigation-sheet-menu) .navigation-sheet-menu-link):visited {
+                    color: var(--color-neutral-text-soft);
+                }
+
+:is(:is(:is(.navigation-sheet-portal .navigation-sheet-content) .navigation-sheet-menu) .navigation-sheet-menu-link):hover {
+                    color: var(--color-neutral-text-muted);
+                    background-color: var(--color-neutral-surface-soft);
+                }
+
+.current:is(:is(:is(.navigation-sheet-portal .navigation-sheet-content) .navigation-sheet-menu) .navigation-sheet-menu-link) {
+                    color: var(--color-brand-text-muted);
+                    background-color: var(--color-brand-surface-soft);
+                }
+
+:is(.navigation-sheet-portal .navigation-sheet-content) .navigation-sheet-cta {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            gap: var(--space-s);
+            margin-bottom: var(--space-l);
+        }
+
+@keyframes overlayShow {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes overlayHide {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes contentShow {
+    from {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes contentHide {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+}
+
+@layer components {
+    /* VARS */
+
+    .button {
+        --button-border-style: var(--border-style);
+        --button-border-width: var(--border-width);
+        --button-border-radius: var(--border-radius);
+        --button-font-family: var(--font-family-body);
+        --button-font-weight: var(--font-weight-semibold);
+
+        --button-font-size: var(--font-size-s);
+        --button-padding-inline: var(--space-m);
+        --button-padding-block: var(--space-xs);
+        --button-gap: var(--space-xs);
+    }
+
+        .button.button-size-small {
+            --button-font-size: var(--font-size-s);
+            --button-padding-inline: var(--space-m);
+            --button-padding-block: var(--space-xs);
+            --button-gap: var(--space-xs);
+        }
+
+        .button.button-size-medium {
+            --button-font-size: var(--font-size-m);
+            --button-padding-inline: var(--space-l);
+            --button-padding-block: var(--space-s);
+            --button-gap: var(--space-s);
+        }
+
+        .button.button-size-large {
+            --button-font-size: var(--font-size-l);
+            --button-padding-inline: var(--space-xl);
+            --button-padding-block: var(--space-m);
+            --button-gap: var(--space-m);
+        }
+
+    /* CLASSES */
+
+    .button {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        white-space: nowrap;
+        cursor: pointer;
+        user-select: none;
+        transition: all 200ms;
+
+        font-family: var(--button-font-family);
+        padding-inline: var(--button-padding-inline);
+        padding-block: var(--button-padding-block);
+        gap: var(--button-gap);
+        border-radius: var(--button-border-radius);
+        font-size: var(--button-font-size);
+        font-weight: var(--button-font-weight);
+    }
+
+        .button svg {
+            pointer-events: none;
+            width: 1em;
+            height: 1em;
+            flex-shrink: 0;
+        }
+
+        .button.button-variant-solid {
+            color: var(--button-solid-text);
+            background-color: var(--button-solid-background);
+        }
+
+            .button.button-variant-solid:hover {
+                background-color: var(--button-solid-background-hover);
+            }
+
+            .button.button-variant-solid:active {
+                background-color: var(--button-solid-background-active);
+            }
+
+            .button.button-variant-solid.button-color-neutral {
+                --button-solid-text: var(--color-text-inverted);
+                --button-solid-background: var(--color-neutral-surface-deep);
+                --button-solid-background-hover: var(--color-neutral-text-soft);
+                --button-solid-background-active: var(--color-neutral-text-muted);
+            }
+
+            .button.button-variant-solid.button-color-brand {
+                --button-solid-text: var(--color-text-inverted);
+                --button-solid-background: var(--color-brand-surface-deep);
+                --button-solid-background-hover: var(--color-brand-text-soft);
+                --button-solid-background-active: var(--color-brand-text-muted);
+            }
+
+            .button.button-variant-solid.button-color-accent {
+                --button-solid-text: var(--color-text-inverted);
+                --button-solid-background: var(--color-accent-surface-deep);
+                --button-solid-background-hover: var(--color-accent-text-soft);
+                --button-solid-background-active: var(--color-accent-text-muted);
+            }
+
+            .button.button-variant-solid.button-color-danger {
+                --button-solid-text: var(--color-text-inverted);
+                --button-solid-background: var(--color-danger-surface-deep);
+                --button-solid-background-hover: var(--color-danger-text-soft);
+                --button-solid-background-active: var(--color-danger-text-muted);
+            }
+
+        .button.button-variant-default {
+            color: var(--button-default-text);
+            background-color: var(--button-default-background);
+            border: var(--button-border-style) var(--button-border-width) var(--button-default-border);
+        }
+
+            .button.button-variant-default:hover {
+                background-color: var(--button-default-background-hover);
+            }
+
+            .button.button-variant-default:active {
+                background-color: var(--button-default-background-active);
+            }
+
+            .button.button-variant-default.button-color-neutral {
+                --button-default-text: var(--color-neutral-text-base);
+                --button-default-background: var(--color-neutral-surface-soft);
+                --button-default-background-hover: var(--color-neutral-surface-muted);
+                --button-default-background-active: var(--color-neutral-surface-base);
+                --button-default-border: var(--color-neutral-surface-strong);
+            }
+
+            .button.button-variant-default.button-color-brand {
+                --button-default-text: var(--color-brand-text-base);
+                --button-default-background: var(--color-brand-surface-soft);
+                --button-default-background-hover: var(--color-brand-surface-muted);
+                --button-default-background-active: var(--color-brand-surface-base);
+                --button-default-border: var(--color-brand-surface-strong);
+            }
+
+            .button.button-variant-default.button-color-accent {
+                --button-default-text: var(--color-accent-text-base);
+                --button-default-background: var(--color-accent-surface-soft);
+                --button-default-background-hover: var(--color-accent-surface-muted);
+                --button-default-background-active: var(--color-accent-surface-base);
+                --button-default-border: var(--color-accent-surface-strong);
+            }
+
+            .button.button-variant-default.button-color-danger {
+                --button-default-text: var(--color-danger-text-base);
+                --button-default-background: var(--color-danger-surface-soft);
+                --button-default-background-hover: var(--color-danger-surface-muted);
+                --button-default-background-active: var(--color-danger-surface-base);
+                --button-default-border: var(--color-danger-surface-strong);
+            }
+
+        .button.button-variant-outline {
+            color: var(--button-outline-text);
+            border: var(--button-border-style) var(--button-border-width) var(--button-outline-border);
+        }
+
+            .button.button-variant-outline:hover {
+                background-color: var(--button-outline-background-hover);
+            }
+
+            .button.button-variant-outline:active {
+                background-color: var(--button-outline-background-active);
+            }
+
+            .button.button-variant-outline.button-color-neutral {
+                --button-outline-text: var(--color-neutral-text-base);
+                --button-outline-background-hover: var(--color-neutral-surface-soft);
+                --button-outline-background-active: var(--color-neutral-surface-muted);
+                --button-outline-border: var(--color-neutral-surface-strong);
+            }
+
+            .button.button-variant-outline.button-color-brand {
+                --button-outline-text: var(--color-brand-text-base);
+                --button-outline-background-hover: var(--color-brand-surface-soft);
+                --button-outline-background-active: var(--color-brand-surface-muted);
+                --button-outline-border: var(--color-brand-surface-strong);
+            }
+
+            .button.button-variant-outline.button-color-accent {
+                --button-outline-text: var(--color-accent-text-base);
+                --button-outline-background-hover: var(--color-accent-surface-soft);
+                --button-outline-background-active: var(--color-accent-surface-muted);
+                --button-outline-border: var(--color-accent-surface-strong);
+            }
+
+            .button.button-variant-outline.button-color-danger {
+                --button-outline-text: var(--color-danger-text-base);
+                --button-outline-background-hover: var(--color-danger-surface-soft);
+                --button-outline-background-active: var(--color-danger-surface-muted);
+                --button-outline-border: var(--color-danger-surface-strong);
+            }
+
+        .button.button-variant-ghost {
+            color: var(--button-ghost-text);
+        }
+
+            .button.button-variant-ghost:hover {
+                background-color: var(--button-ghost-background-hover);
+            }
+
+            .button.button-variant-ghost:active {
+                background-color: var(--button-ghost-background-active);
+            }
+
+            .button.button-variant-ghost.button-color-neutral {
+                --button-ghost-text: var(--color-neutral-text-base);
+                --button-ghost-background-hover: var(--color-neutral-surface-soft);
+                --button-ghost-background-active: var(--color-neutral-surface-muted);
+            }
+
+            .button.button-variant-ghost.button-color-brand {
+                --button-ghost-text: var(--color-brand-text-base);
+                --button-ghost-background-hover: var(--color-brand-surface-soft);
+                --button-ghost-background-active: var(--color-brand-surface-muted);
+            }
+
+            .button.button-variant-ghost.button-color-accent {
+                --button-ghost-text: var(--color-accent-text-base);
+                --button-ghost-background-hover: var(--color-accent-surface-soft);
+                --button-ghost-background-active: var(--color-accent-surface-muted);
+            }
+
+            .button.button-variant-ghost.button-color-danger {
+                --button-ghost-text: var(--color-danger-text-base);
+                --button-ghost-background-hover: var(--color-danger-surface-soft);
+                --button-ghost-background-active: var(--color-danger-surface-muted);
+            }
+}
+
+@layer components {
+    /* VARS */
+
+    .page {
+        --page-header-height: var(--space-3xl);
+    }
+
+    /* CLASSES */
+
+    .page {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+    }
+
+        .page .page-header {
+            position: fixed;
+            top: 0;
+            height: var(--page-header-height);
+            width: 100%;
+            z-index: var(--layer-4);
+            display: grid;
+            place-items: stretch;
+        }
+
+        .page .page-main {
+            flex-grow: 1;
+        }
+
+        .page .page-main > *:first-child {
+            margin-top: var(--page-header-height);
+        }
+}
+
+@layer components {
+    /* CLASSES */
+
+    .section {
+        display: grid;
+        place-items: stretch;
+    }
+
+        .section .section-description {
+            --text-color-default: var(--color-neutral-text-soft);
+            --text-font-size-default: var(--font-size-dynamic-l);
+            --text-font-weight-default: var(--font-weight-normal);
+            --text-font-family-default: var(--font-family-body);
+            --text-line-height-default: var(--line-height-condensed);
+        }
+
+            .hero:is(.section .section-description) {
+                --text-font-size-default: var(--font-size-dynamic-xl);
+            }
+
+        .section .section-tagline {
+            --text-color-default: var(--color-neutral-text-subtle);
+            --text-font-size-default: var(--font-size-dynamic-s);
+            --text-font-weight-default: var(--font-weight-bold);
+            --text-font-family-default: var(--font-family-tagline);
+            --text-line-height-default: var(--line-height-condensed);
+        }
+
+            .hero:is(.section .section-tagline) {
+                --text-font-size-default: var(--font-size-dynamic-m);
+            }
+}
+
+@layer components {
+    /* CLASSES */
+
+    p {
+        --text-color-default: var(--color-neutral-text-base);
+        --text-font-size-default: var(--font-size-dynamic-m);
+        --text-font-weight-default: var(--font-weight-normal);
+        --text-font-family-default: var(--font-family-body);
+        --text-line-height-default: var(--line-height-normal);
+        --text-align-default: start;
+    }
+
+    h1 {
+        --text-color-default: var(--color-neutral-text-muted);
+        --text-font-size-default: var(--font-size-dynamic-4xl);
+        --text-font-weight-default: var(--font-weight-bold);
+        --text-font-family-default: var(--font-family-heading);
+        --text-line-height-default: var(--line-height-condensed);
+        --text-align-default: start;
+    }
+
+    h2 {
+        --text-color-default: var(--color-neutral-text-muted);
+        --text-font-size-default: var(--font-size-dynamic-2xl);
+        --text-font-weight-default: var(--font-weight-bold);
+        --text-font-family-default: var(--font-family-heading);
+        --text-line-height-default: var(--line-height-condensed);
+        --text-align-default: start;
+    }
+
+    h3 {
+        --text-color-default: var(--color-neutral-text-muted);
+        --text-font-size-default: var(--font-size-dynamic-xl);
+        --text-font-weight-default: var(--font-weight-bold);
+        --text-font-family-default: var(--font-family-heading);
+        --text-line-height-default: var(--line-height-condensed);
+        --text-align-default: start;
+    }
+
+    h4 {
+        --text-color-default: var(--color-neutral-text-muted);
+        --text-font-size-default: var(--font-size-dynamic-l);
+        --text-font-weight-default: var(--font-weight-bold);
+        --text-font-family-default: var(--font-family-heading);
+        --text-line-height-default: var(--line-height-condensed);
+        --text-align-default: start;
+    }
+
+    h5 {
+        --text-color-default: var(--color-neutral-text-muted);
+        --text-font-size-default: var(--font-size-dynamic-m);
+        --text-font-weight-default: var(--font-weight-bold);
+        --text-font-family-default: var(--font-family-heading);
+        --text-line-height-default: var(--line-height-condensed);
+        --text-align-default: start;
+    }
+
+    h6 {
+        --text-color-default: var(--color-neutral-text-muted);
+        --text-font-size-default: var(--font-size-dynamic-s);
+        --text-font-weight-default: var(--font-weight-bold);
+        --text-font-family-default: var(--font-family-heading);
+        --text-line-height-default: var(--line-height-condensed);
+        --text-align-default: start;
+    }
+}
+
+@layer components {
+    /* VARIABLES */
+
+    .card {
+        --card-border-style: var(--panel-border-style);
+        --card-border-width: var(--panel-border-width);
+        --card-border-radius: var(--panel-border-radius);
+    }
+
+        .card.panel-intensity-transparent {
+            --card-border-color: var(--panel-color-muted);
+        }
+
+        .card.panel-intensity-clear {
+            --card-border-color: var(--panel-color-muted);
+        }
+
+        .card.panel-intensity-subtle {
+            --card-border-color: var(--panel-color-muted);
+        }
+
+        .card.panel-intensity-soft {
+            --card-border-color: var(--panel-color-base);
+        }
+
+        .card.panel-intensity-muted {
+            --card-border-color: var(--panel-color-strong);
+        }
+
+        .card.panel-intensity-base {
+            --card-border-color: var(--panel-color-deep);
+        }
+
+        .card.panel-intensity-strong {
+            --card-border-color: var(--panel-color-deeper);
+        }
+
+        .card.panel-intensity-deep {
+            --card-border-color: var(--panel-color-deepest);
+        }
+
+    /* CLASSES */
+        .card .card-header {
+            border-bottom: var(--card-border-width) var(--card-border-style) var(--card-border-color);
+        }
+
+        .card .card-footer {
+            border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
+        }
+}
+
+@layer components {
+    /* VARS */
+    .carousel {
+        --carousel-border-style: var(--border-style);
+        --carousel-border-width: var(--border-width);
+        --carousel-border-radius: var(--border-radius);
+        --carousel-border-color: var(--color-neutral-surface-soft);
+        --carousel-aspect-ratio: 3 / 2;
+        --carousel-min-width: 200px;
+    }
+
+    /* CLASSES */
+    .carousel {
+        display: grid;
+        place-items: stretch;
+        grid-template-columns: 1fr auto 1fr;
+        gap: var(--space-m);
+    }
+
+        .carousel .carousel-base {
+            display: grid;
+            place-items: stretch;
+            overflow: hidden;
+            min-width: var(--carousel-min-width);
+            aspect-ratio: var(--carousel-aspect-ratio);
+        }
+
+            :is(.carousel .carousel-base) .carousel-container {
+                display: grid;
+                grid-auto-flow: column;
+                grid-auto-columns: 100%;
+            }
+
+            :is(.carousel .carousel-base) .carousel-slide {
+                display: grid;
+                place-items: stretch;
+
+                border-style: var(--carousel-border-style);
+                border-width: var(--carousel-border-width);
+                border-radius: var(--carousel-border-radius);
+                border-color: var(--carousel-border-color);
+                overflow: hidden;
+            }
+
+                :is(:is(.carousel .carousel-base) .carousel-slide) img {
+                    min-height: 0;
+                    min-width: 0;
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+
+        .carousel .button {
+            place-self: center;
+            border-radius: var(--border-radius-circle);
+            width: 2rem;
+            height: 2rem;
+            display: grid;
+            place-items: center;
+            padding: 0;
+            font-size: 1rem;
+            visibility: hidden;
+        }
+
+            .visible:is(.carousel .button) {
+                visibility: visible;
+            }
+}
+
+@layer components {
+    .avatar {
+        position: relative;
+        height: 10rem;
+        width: 10rem;
+        overflow: hidden;
+        border-radius: var(--border-radius-circle);
+    }
+
+        .avatar .avatar-image {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+}
+@layer components {
+    .image {
+        position: relative;
+        aspect-ratio: var(--image-aspect-ratio);
+        overflow: hidden;
+    }
+
+        .image .image-img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: var(--image-object-fit);
+        }
+}
+
+@layer utils {
+    .image-square {
+        --image-aspect-ratio: var(--ratio-square);
+    }
+    .image-landscape {
+        --image-aspect-ratio: var(--ratio-landscape);
+    }
+    .image-portrait {
+        --image-aspect-ratio: var(--ratio-portrait);
+    }
+    .image-wide {
+        --image-aspect-ratio: var(--ratio-wide);
+    }
+    .image-ultrawide {
+        --image-aspect-ratio: var(--ratio-ultrawide);
+    }
+    .image-golden {
+        --image-aspect-ratio: var(--ratio-golden);
+    }
+
+    .image-contain {
+        --image-object-fit: contain;
+    }
+    .image-cover {
+        --image-object-fit: cover;
+    }
+}