@layer components {
  .profile-layout {
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space-double) var(--inline-space);
    padding-block-end: calc(var(--block-space-double) + var(--footer-height) + env(safe-area-inset-bottom));

    @media (min-width: 800px) {
      align-items: stretch;
      justify-content: center;
    }

    @media (max-width: 799px) {
      align-items: center;
      flex-direction: column;
    }
  }

  .user-edit-link {
    inset: 0 0 auto auto;
    position: absolute;
  }
}