.embla-login-page {
  display: flex;
  width: 100%;

  .login-image {
    height: 100vh;
    width: 55%;
    overflow: hidden;

    background-image: url($login-image-url);
    background-size: cover;
  }

  .login-form-container {
    height: 100vh;
    width: 45%;

    display: flex;
    flex-direction: column;

    .login-header {
      height: $login-form-header-height;
      border-bottom: 1px solid $color-gray-85;
      padding-left: $login-form-margin-left;
      display: flex;
      align-items: center;

      .brand {
        height: 32px;
        max-width: 300px;

        img {
          height: 100%;
          max-width: 100%;
        }
      }

      .brand-text {
        margin-left: $login-form-base-margin;
        font-size: 16px;
        letter-spacing: 1px;
      }
    }

    .login-footer {
      height: $login-form-header-height;
      border-top: 1px solid $color-gray-85;
      margin-top: auto;
      padding-left: $login-form-margin-left;
      padding-right: $login-form-base-margin;
      display: flex;
      align-items: center;

      p {
        margin-bottom: 0;
      }


      .footer-right {
        margin-left: auto;

        > *:not(:first-child) {
          margin-left: 8px;
        }
      }
    }

    .login-form {
      max-width: 300px;
      margin: auto $login-form-base-margin auto $login-form-margin-left;
    }
  }
}

@media only screen and (max-width: 900px) {
  .embla-login-page {

    flex-direction: column;
    height: 100vh;

    .login-image {
      height: 20%;
      width: 100%;
    }

    .login-form-container {
      height: 80%;
      width: 100%;

      .login-form {
        width: 300px;
        margin: $login-form-margin-top auto $login-form-base-margin auto;
      }

      .login-header {
        display: none;
      }

      .login-footer {
        padding-left: $login-form-base-margin;
      }
    }
  }
}

@media only screen and (max-width: 350px) {
  .embla-login-page {

    .login-form-container {

      .login-form {
        width: auto;
        margin: $login-form-margin-base-narrow;
      }
    }
  }
}