@media (max-width: 1288px) {
    .login-headline {
        padding-top: 60px;
    }

    .centered-position {
        padding-top: 24px;
        padding-bottom: 20px;
    }

    .form-position {
        min-height: calc(100vh - 196.2px - 79.2px);
    }

    .registration-form-position {
        min-height: calc(100vh - 182px - 79.2px);
    }
}

@media (max-width: 816px) {
    .login-headline {
        height: 115.03px;
        padding: 37px 38px 0 38px;
    }

    .join-logo {
        width: 64px;
        height: 78.03px;
    }

    .form-position {
        min-height: calc(100vh - 115px - 71.2px);
    }

    .form {
        width: 396px;
        padding: 32px 0;
    }

    .registration-form {
        justify-content: center;
    }

    .h1-underline {
        width: 88px;
        padding-bottom: 16px;
    }

    .return-btn {
        display: none;
    }

    .return-btn-registry {
        display: block;
        margin-top: 6px;
        transform: translateX(-40px);
    }

    .return-btn-reset {
        display: block;
        transform: translateX(-80px);
    }

    .return-headline {
        display: flex;
        flex-direction: row;
        align-items: center;
        transform: translateX(-22.5px);
    }

    .form-input-fields {
        width: 364px;
    }

    .registration-input {
        padding: 13px 21px;
        height: 50px;
    }

    .policy-checkbox {
        transform: translate(-27px, -2px);
    }

    .policy-checkbox-img {
        left: 52px;
        top: -2px;
    }

    .centered-position {
        gap: 21px;
        padding: 20px 38px 16px 38px;
    }

    .registry-link {
        display: none;
    }

    .registry-link-mobile {
        display: flex;
        justify-content: center;
        padding-top: 48px;
        padding-bottom: 0;
        transform: none;
    }
}

@media (max-width: 544px) {
    .registry-link-mobile {
        padding-top: 8px;
    }
}

@media (max-width: 488px) {
    .login-buttons {
        gap: 21px;
        flex-direction: column;
    }

    .btn-variant {
        width: 180px;
        height: 51px;
        padding: 4px 0;
    }
}

@media (max-width: 416px) {
    .form {
        width: 288px;
        padding: 24px 0;
    }

    .main-form {
        gap: 24px;
    }

    .h1-underline {
        padding-bottom: 8px;
    }

    .form-input-fields {
        width: 272px;
        gap: 16px;
    }

    .return-btn-registry {
        display: block;
        margin-top: 6px;
        transform: translateX(-8px);
    }

    .return-btn-reset {
        transform: translateX(-32px);
    }

    .input-field {
        padding: 6px 8px;
        line-height: 24px;
    }

    .input-field input {
        font-size: 16px;
    }

    .input-field img {
        right: 8px;
    }

    .conditional-elements {
        flex-direction: column;
        gap: 8px;
        padding: 12px 0 20px 0;
    }

    .login-buttons {
        gap: 12px;
    }

    .check-item-registry {
        transform: translateX(12px);
    }

    .policy-checkbox {
        transform: translate(-72px, -3px);
    }

    .policy-checkbox-img {
        left: 8px;
    }

    .btn-success {
        padding: 20px 10px;
        line-height: 22.4px;
        border-radius: 12px;
    }
}

@media (max-width: 376px) {
    .join-logo {
        width: 48px;
        height: auto;
    }

    .login-headline {
        padding: 16px 32px 0 32px;
        height: 75px;
    }

    .main-form {
        gap: 16px;
    }

    .form-position {
        min-height: calc(100vh - 75px - 43.2px);
    }

    .form {
        padding-top: 16px;
    }

    .form-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }

    .btn-variant {
        height: 48px;
    }

    .user-question {
        font-size: 18px;
        line-height: 20px;
    }

    .btn-sign-up {
        padding: 8px 16px;
    }

    .footer-links {
        padding: 0;
        font-size: 14px;
    }

    .registry-link-mobile {
        padding-top: 0;
    }

    .centered-position {
        padding: 8px 32px 16px 32px;
    }
}