main {
  display: flex;

  min-height: 100dvh;
  width: 100%;

  .image,
  section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;

    padding: 96px 64px;

    @media screen and (max-width: 1023px) {
      padding: 0 32px;
    }

    @media screen and (max-width: 425px) {
      padding: 32px 32px;
      align-items: flex-start;
    }
  }

  @media screen and (max-width: 1023px) {
    flex-direction: column;
  }
}

.image {
  background-color: #3636363d;
  background-image: url("../../../../../assets/images/app/auth/healthy.png");
  background-blend-mode: overlay;
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;

  @media screen and (max-width: 1024px) {
    display: none !important;
  }

  @media screen and (max-width: 425px) {
    display: block !important;
    flex: unset !important;

    width: 100%;
    aspect-ratio: 375/280 !important;
    background-color: transparent;
    background-image: url("../../../../../assets/images/app/auth/healthy_curve.png");
    background-size: 100% 100%;
    background-blend-mode: unset;
  }
}

section {
  .container {
    display: flex;
    flex-direction: column;
    gap: 32px;

    max-width: 420px;
    width: 100%;

    @media screen and (max-width: 1023px) {
      gap: 24px;
    }
  }

  h1 {
    color: var(--text-secondary);
    text-align: center;

    @media screen and (max-width: 1023px) {
      font-size: 24px;
      line-height: 36px;
    }
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 12px;

    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .login-buttons {
      display: flex;
      flex-direction: column;
      gap: 12px;

      margin-top: calc(32px - 12px);

      & > * {
        width: 100%;
      }
    }

    a {
      color: var(--green-100);
    }
  }
}
