@media (min-width: 2280px) {
  .logo-small {
    left: calc((100vw - 1140px) / 2);
  }

  .change-access {
    position: absolute;
    left: 1222px;
  }
}

@media (min-width: 1441px) {
  .logo-small {
    left: calc((100vw - 1286px) / 2);
  }

  .change-access {
    right: calc((100vw - 1196px) / 2);
  }
}

@media (max-width: 1440px) {
  .img-logo {
    width: clamp(100px, 19vw, 274px);
    height: clamp(122px, 24vw, 335px);
  }

  .logo-small {
    width: clamp(64px, 9vw, 100px);
    height: clamp(78px, 11vw, 122px);
    top: clamp(37px, 5vw, 80px);
    left: clamp(38px, 5vw, 77px);
    transform: none;
  }

  .access-window {    
    padding-block: clamp(28px, 5vw, 48px);
    padding-inline: clamp(16px, 8vw, 115px);
    border-radius: 30px;
    box-shadow: 0px 0px 14px 3px rgba(0, 0, 0, 0.04);
  }

  .window-login{
    width: clamp(285px, 90vw, 652px);
  }

  .window-signup{
    width: clamp(285px, 90vw, 598px);
    margin-left: clamp(0px, 18vw, 60px);
  }

}

@media (max-width: 888px) {
  .change-access {
    right: clamp(0px, 9vw, 122px);
  }
}

@media (max-width: 777px) {
  input{
    padding-right: 48px;
  }

  .logo-container {
    background-color: rgb(42, 54, 71);
  }

  .logo-small {
    width: clamp(48px, 9vw, 64px);
    height: clamp(59px, 11vw, 78px);
    top: clamp(8px, 5vw, 37px);
    left: clamp(8px, 5vw, 38px);
  }

  .window-signup{
    width: clamp(285px, 90vw, 598px);
    margin-left: 0px;
    margin-top: clamp(0px, 9vw, 80px);
  }

  .change-access {
    width: clamp(243px, 64vw, 350px);
    height: clamp(40px, 5vw, 48px);
    font-size: clamp(16px, 3vw, 20px);
    top: unset;
    bottom: 64px;
    right: calc(100vw / 4);
  }

  .change-access button{
    font-size: clamp(16px, 3vw, 20px);
  }

  .legal {
    bottom: 24px;
  }

  .access-window {
    gap: clamp(24px, 8vw, 32px);
  }

  .access-headline{
    gap: clamp(10px, 3vw, 16px);
  }

  .content-area{
    gap: clamp(12px, 3vw, 16px);
  }

  .top12-right21{
    top: 10px;
    right: 16px;
  }

  .input-space-login{
    gap: clamp(16px, 5vw, 32px);
  }

  .input-space-login input{
    height: clamp(40px, 7vw, 48px);
    font-size: clamp(16px, 5vw, 20px);
  }

  .input-space-signup{
    gap: clamp(16px, 5vw, 24px);
  }

  .input-space-signup input{
    height: clamp(40px, 7vw, 48px);
    font-size: clamp(16px, 5vw, 20px);
  }

  .login-buttons {
    width: auto;
    height: auto;
    flex-direction: column;
    justify-content: center;
    gap: clamp(8px, 3vw, 21px);
  }

  .access-button {
    width: clamp(140px, 25vw, 180px);
    height: clamp(40px, 7vw, 51px);
  }

  .access-button button {
    width: 100%;
    font-size: clamp(16px, 3vw, 20px);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .arrow {
    top: clamp(12px, 7vw, 54px);
    left: clamp(16px, 6vw, 48px);
  }

  .signup-btn{
    height: clamp(40px, 7vw, 48px);
    font-size: clamp(16px, 3vw, 20px);
  }
}


@media (max-width: 660px) {
    .change-access {
        right: calc(100vw / 5);
    }
}

@media (max-width: 560px) {
    .change-access {
        right: calc(100vw / 6);
    }
}


@media (max-width: 428px) {
  h1 {
    font-size: clamp(32px, 11vw, 47px);
  }

  .blue-line {
    width: clamp(110px, 35vw, 150px);
  }
}

@media (max-width: 360px) {
    .change-access {
        right: calc(100vw / 8);
    }
}

@media (max-width: 320px) and (max-height: 610px) {
    .change-access {
        padding-left: 132px;
        height: 36px;
        font-size: 16px;
        top: 6px;
        right: 0;
        .font-c-black {
            display: none;
        }
    }
}

@media (max-width: 320px) and (max-height: 570px) {
    .signUpHeader {
        .litte-button {
            top: 60px;
        }
    }
}