@layer base {
  :root {
    --layout-max-width: 80rem;

    --layout-padding-inline: clamp(1rem, 4.5vw, 5rem);
    --layout-padding-inline-negative: calc(var(--layout-padding-inline) * -1);
    --layout-padding-inline-desktop-inner: 2rem;

    --layout-text-width: 42.5rem;
    --layout-component-block-space: clamp(2.5rem, 4vw, 3.75rem);
    background: var(--color-base-purple);

    height: 100%;
  }

  .container {
    padding-inline: var(--layout-padding-inline);

    & > * {
      max-inline-size: var(--layout-max-width);
      margin-inline: auto;
    }
  }

  .layout-content__inner {
    padding-block-start: var(--layout-component-block-space);
    transition: var(--transition);
    padding-block-end: 60px;
    padding-block-start: 60px;
  }

  .full-width {
    margin-inline: calc(50% - 50vw);
  }
  
  @media screen and (min-width: 48rem) {
    :root {
      --layout-padding-inline-negative: calc((var(--layout-padding-inline) * -1) - var(--layout-padding-inline-desktop-inner));
    }

    .layout-content__inner,
    .full-width .container > * {
      padding-inline: var(--layout-padding-inline-desktop-inner);
    }
  }
}