main.devise {
  align-items: center;
  background-color: unset;
  display: flex;
  flex-direction: row;
  height: 100%;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;

  .devise-wrapper {
    max-width: var(--container-l);
    gap: 0;
    display: initial;
  }

  .form-container {
    background-color: var(--pure-white);
    border-radius: var(--border-radius);
    display: flex;
    flex-wrap: nowrap;
    max-width: var(--container-l);
    height: fit-content;
    width: 100%;

    .logo-wrapper {
      position: relative;
      background-image: var(--ryalto-login-image);
      background-position-x: center;
      background-position-y: center;
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: var(--border-radius) 0 0 0;
      height: auto;
      max-width: 50%;
      width: 100%;
    }

    .devise-overlay-text {
      color: var(--pure-white);
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;           /* optional to control max width */
      text-align: left;
      padding: 10px;
    }

    .devise-overlay-text.top {
      top: 10px;
      text-transform: uppercase;
      justify-content: left;
      font-family: 'ATAero Super', sans-serif;
      font-size: 3rem;
    }

    .devise-overlay-text.bottom {
      bottom: 10px;
    }

    .form-wrapper {
      gap: 1rem;
      margin: 1rem auto;
      max-width: var(--container-ms);
      padding: 1rem;
      width: 60%;

      form {
        height: 100%;
        justify-content: flex-end;
      }
    }
  }

  .login-banner-wrapper {
    width: 100%;
    background-color: var(--pure-white);
    padding: 1rem;

    img {
     width: 40%
    }
  }

  .devise-inner-wrapper {
    justify-content: space-between;
    height: 100%;

    .form-actions {
      width: 100%;
    }
  }

  .welcome {
    .page-header {
      background-color: var(--pure-white);
      border-bottom: none;
      margin-bottom: 1.5rem;

      p {
        font-size: 1.25rem;
        line-height: 1.5rem;
      }
    }
  }

  @media screen and (max-width: 768px) { /* var(--screen-md) */
    background-color: var(--pure-white);
    flex-direction: column;
    justify-content: center;
    
    .devise-wrapper {
      width: 100%;
    }

    .form-container {
      border-radius: unset;
      flex-direction: column;
      min-height: 100vh;
      width: 100%;

      .logo-wrapper {
        background-image: var(--ryalto-logo);
        background-position-x: center;
        background-size: contain;
        border-radius: 0;
        margin: 4rem auto 1rem;
        min-height: 80px;
        max-height: 80px;
        width: 40%;
      }

      .devise-overlay-text {
        display: none;
      }

      .form-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin: 0 auto 2rem;
        padding: 0;
        width: 100%;
      }
    }

    .login-banner-wrapper {
        display: none;
    }
  }
}