/* -----------------EXTRA SMALL SCREEN --------------   */
@media (width < 350px) {

    body {
        font-size: 0.8rem;
    }

    .form__primary {
        flex-direction: column;
        gap: 1rem;
    }

    .hero__container {
        flex-direction: column;
        gap: 1rem;
    }

    .hero__output {
        font-size: 2rem;
    }

    .hero__description {
        font-size: 1.5rem;
    }
}

/* -----------------LARGE AND EXTRA LARGE SCREEN --------------   */

@media (width > 950px) {


    .form label {
        font-size: 1rem;
    }

    .form input {
        width: 100%;
        font-size: 3rem;
    }



    .form__primary {
        width: 85%;
        gap: 1.5rem;
    }

    .form input::placeholder {
        font-size: 2rem;
    }

    .container__error {
        font-size: 1rem;
    }

    .btn {
        padding: 1.75em;
    }

    .img {
        max-width: 50px;
    }

    .card {
        padding: 3.5em;
        max-width: 840px;
        min-height: auto;
        height: auto;
        margin-top: 9.5em;
        margin-bottom: 2em;
        margin-left: 5.2em;

    }


    .form {
        gap: 0rem;
    }

    .form label {
        font-family: 1.1rem;
    }

    .form input {
        font-size: 1.2rem;
    }

    .form__secondary {
        align-self: flex-end;
    }

    .hero {
        margin-top: 0;
    }

    .hero__output {
        font-size: 6rem;
    }

    .hero__description {
        font-size: 6.5rem;
    }

}