.auth {
  width: 100vw;
  height: 100vh;
  background: var(--b-color);

  .modal {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
    
  .login {
    display: grid;
    grid-template-columns: 20rem calc(100% - 20rem);
    width: 46rem;
    height: 34.5rem;
    background: var(--b-color);
    border: .2rem solid var(--br-color);
    border-radius: var(--radius-one);

    .banner {
      position: relative;
      background: rgba(6, 27, 17, .45); /* rgba(0, 0, 0, .45); */
      padding: 1rem 1.25rem;
      border-radius: .875rem 0 0 .875rem;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--b-color);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-radius: .875rem 0 0 .875rem;
        z-index: -1;
      }
  
      .logo {
        display: block;
        width: 8rem;
        margin: .5rem 0;
  
        img {
          max-width: 100%;
        }
      }
  
      .bottom {
        position: absolute;
        bottom: 1.75rem;
        padding: 0 .5rem;
    
        p {
          color: var(--f-color);
        }
    
        .copy {
          font-size: .85rem;
          font-weight: 500;
          margin: 0;
    
          .icon-copyright {
            font-size: .7rem;
          }
        }
      }
    }

    .form-container {
      display: grid;
      padding: 2rem 3.25rem;

      .form {
        height: fit-content;
        margin: auto 0;

        h3 {
          color: var(--f-color);
          font-size: 1.6rem;
          font-weight: 600;
          margin: .5rem 0 1rem 0;
        }
      
        .newbie,
        .reset,
        .policy {
          color: var(--f-color);
          font-size: 1rem;
          font-weight: 400;
          margin: .5rem 0;
          line-height: 1.25rem;
      
          a {
            color: var(--la-color);
            font-weight: 600;
            &:hover { text-decoration: underline }
          }
        }
    
        .policy {
          margin: .5rem 0 1.5rem 0;
        }
      
        form {
          margin: 1rem 0;
      
          button,
          .input input {
            width: 100%;
            color: var(--f-color);
            font-family: var(--p-font);
            box-shadow: none;
          }
      
          .input {
            label {
              display: block;
              font-size: 1rem;
              font-weight: 400;
            }
            
            input {
              margin: .5rem 0 1rem 0;
            }
          }
      
          button {
            font-size: 1rem;
            font-weight: 600;
            background: var(--b-color);
            padding: .65rem 1rem .7rem 1rem;
            margin: .5rem 0;
            border: .15rem solid var(--br-color);
            border-radius: var(--radius);
            box-shadow: none;
            text-align: center;
      
            &:hover {
              cursor: pointer;
              background: var(--brh-color);
            }
          }
        }
      }
    }
  }
}