/* RESPONSIVE STYLES */

@media (max-width: 870px) {
    .auth-container {
        min-height: 800px;
        height: 100vh;
    }
    
    .auth-container:before {
        width: 1500px;
        height: 1500px;
        left: 30%;
        bottom: 68%;
        transform: translateX(-50%);
        right: initial;
        top: initial;
        transition: 2s ease-in-out;
    }
    
    .login-signup {
        width: 100%;
        left: 50%;
        top: 95%;
        transform: translate(-50%, -100%);
        transition: 1s 0.8s ease-in-out;
    }
    
    .panels-container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr 1fr;
    }
    
    .panel {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 2.5rem 8%;
    }
    
    .panel .content {
        padding-right: 15%;
        transition: 0.9s 0.8s ease-in-out;
    }
    
    .panel h3 {
        font-size: 1.2rem;
    }
    
    .panel p {
        font-size: 0.7rem;
        padding: 0.5rem 0;
    }
    
    .btn.transparent {
        width: 110px;
        height: 35px;
        font-size: 0.7rem;
    }
    
    .image {
        width: 200px;
        transition: 0.9s 0.6s ease-in-out;
    }
    
    .left-panel {
        grid-row: 1 / 2;
    }
    
    .right-panel {
        grid-row: 3 / 4;
    }
    
    .right-panel .content, .right-panel .image {
        transform: translateY(300px);
    }
    
    .auth-container.sign-up-mode:before {
        transform: translate(-50%, 100%);
        bottom: 32%;
        right: initial;
    }
    
    .auth-container.sign-up-mode .left-panel .image,
    .auth-container.sign-up-mode .left-panel .content {
        transform: translateY(-300px);
    }
    
    .auth-container.sign-up-mode .login-signup {
        top: 5%;
        transform: translate(-50%, 0);
        left: 50%;
    }
}

@media (max-width: 570px) {
    form {
        padding: 0 1.5rem;
    }
    
    .image {
        display: none;
    }
    
    .panel .content {
        padding: 0.5rem 1rem;
    }
    
    .auth-container:before {
        bottom: 72%;
        left: 50%;
    }
    
    .auth-container.sign-up-mode:before {
        bottom: 28%;
        left: 50%;
    }
    
    .input-field {
        max-width: 280px;
    }
    
    .social-media {
        flex-wrap: wrap;
    }
    
    .social-icon {
        margin: 0.5rem;
    }
}

@media (max-width: 385px) {
    .title {
        font-size: 1.8rem;
    }
    
    .subtitle {
        font-size: 0.8rem;
    }
    
    .btn {
        width: 130px;
        height: 40px;
        font-size: 0.8rem;
    }
    
    .input-field {
        height: 50px;
        max-width: 250px;
    }
    
    .input-field input {
        font-size: 0.9rem;
    }
    
    .logo {
        width: 60px;
        height: 60px;
    }
}