body {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1.5rem;
}
main {
  background-color: var(--container-bg);
  border-radius: var(--global-border);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  padding: 1.5rem;

  & > svg {
    width: 100%;
    max-width: 275px;
  }

  .login-form {
    width: 100%;
    max-width: 440px;
    display: grid;
    gap: 2rem;
    place-items: center;
    background-color: var(--grey-1);
    border-radius: var(--global-border);

    padding-block: 2.5rem;
    padding-inline: 2rem;
    h2 {
      font-size: var(--font-size-5);
      font-weight: 600;
    }
    form {
      width: 100%;
      display: grid;
      gap: 1.5rem;
      .input-wrapper {
        display: grid;
        gap: 0.75rem;
        justify-items: center;
        input {
          width: 100%;
        }
      }
      button {
        justify-self: center;
      }
    }
  }

  @media screen and (width >= 768px) {
    .login-form {
      padding-block: 2.5rem;
      padding-inline: 2rem;
    }
  }
}