@layer components {
  .page {
    margin: auto;
    max-width: calc(64 * var(--block-space));
    padding: var(--block-space-double);

    @media (max-width: 640px) {
      padding: var(--block-space);
    }
  }

  .page__header {
    align-items: center;
    display: flex;
    gap: var(--block-space);
    justify-content: space-between;
    margin-bottom: var(--block-space-double);
  }

  .page__header-actions {
    align-items: center;
    display: flex;
    gap: var(--block-space);
  }

  .page__title {
    font-size: var(--text-large);
    font-weight: 700;
    line-height: var(--line-height-large);
    text-transform: uppercase;
  }

  .page__content {

  }

  .page__back {
    align-items: center;
    color: var(--color-steel);
    display: inline-flex;
    font-size: var(--text-smaller);
    gap: var(--inline-space);
    line-height: var(--line-height-smaller);
    margin-bottom: var(--block-space);
    text-decoration: none;
    width: fit-content;

    &:hover {
      color: var(--color-accent);
    }

    &:focus {
      outline: var(--focus-ring-size) solid var(--color-accent);
      outline-offset: 2px;
    }

    kbd {
      font-size: var(--text-smallest);
    }
  }
}