.user-auth-register {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  visibility: visible;
  z-index: 9999;
  transition: opacity 0.25s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: none;

  .user-form-content {
    margin: 3em auto;
    max-width: 350px;
    width: 100%;
    height: fit-content;
    position: relative;
    display: flex;
    display: -webkit-flex;
    outline: 1px solid #b59b4b;

    .btn-close {
      position: absolute;
      top: 1em;
      right: 1em;
    }

    .user-section {
      display: flex;
      flex-direction: column;
    }

    .user-right {
      padding: 1rem;
    }

    .user-left {
      display: none;
      position: relative;

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(80%);
        object-position: center;
      }

      .auth-text {
        display: none;
      }
    }
  }

  @media screen and (min-width: 769px) {
    .user-form-content {
      max-width: 650px;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
        rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
        rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

      .user-left {
        position: relative;
        display: block;
        width: 45%;

        .auth-text {
          display: block;
          z-index: 999;
          color: white;
          top: 1em;
          left: 1em;
          letter-spacing: 3px;
        }
      }

      .user-right {
        display: flex;
        flex-direction: column;
        width: 55%;
        justify-content: center;

        .user-section {
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
}