@layer components {
  .linklab {
    --linklab-width: 36rem;

    --linklab-spacing: 14px;
    --linklab-spacing-double: calc(var(--linklab-spacing) * 2);

    --linklab-gutter: var(--linklab-spacing-double);
    --linklab-padding-top: 4rem;
    --linklab-padding-bottom: 1rem;

    --linklab-background: color-mix(in oklab, transparent, var(--surface) 50%);

    min-height: 100vh;

    display: grid;

    grid-template-columns: 1fr min(100%, var(--linklab-width)) 1fr;
    grid-template-rows: 2.5rem minmax(calc(100vh - 10.5rem), max-content) min-content;
    grid-template-areas:
      "margin margin margin"
      "margin-left body margin-right"
      "margin-left footer margin-right";
  }

  .linklab__body {
    grid-area: body;
    border-radius: var(--radius) var(--radius) 0 0;
    display: flex;
    flex-direction: column;
    padding-inline: var(--linklab-gutter);
    padding-block: var(--linklab-padding-top) var(--linklab-padding-bottom);
    gap: var(--linklab-spacing);
    text-align: center;

    background: var(--linklab-background);
  }

  .linklab__footer {
    grid-area: footer;
    background: var(--linklab-background);
  }
}