@define-mixin responsive-wrapper $vspacing: 0, $hspacing: var(--spacing-cozy),
  $fontSize: var(--typo-size-responsive) {
  @mixin mx auto;

  max-width: clamp(60ch, 90vw, 90ch);
  padding: $vspacing $hspacing;
  font-family: var(--font-body);
  font-size: $fontSize;
}

@define-mixin layout-wrapper {
  @mixin mx auto;
  @mixin px var(--spacing-comfortable);

  width: 100%;
  max-width: var(--ui-layout-width);

  @media screen and (--max-layout) {
    @mixin px var(--spacing-comfortable);
  }
}

@define-mixin position $position: absolute, $inset-values {
  position: $position;
  inset: $inset-values;
}