@layer components {
  .login-wrapper {
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    transform: translateY(-4rem);

    .login-heading {
      width: 100%;
      text-align: center;
      font-size: var(--text-2xl);
      margin-block-end: var(--block-space);
    }
  }
}