@media (max-width: 767px) {
    body {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .first-section {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 30vh;
        background-color: var(--color-brand-1);
    }

    .first-section .first-section-div {
        display: flex;
        gap: .625rem;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .first-section .first-section-div h1 {
        color: var(--color-grey-7);
        font-size: var(--font-size-1);
        font-weight: var(--font-weight-1);
        line-height: var(--line-height-1);
    }

    .first-section .first-section-div p {
        text-align: center;
        width: 80%;
        color: var(--color-grey-7);
        font-size: var(--font-size-3);
        font-weight: var(--font-weight-3);
        line-height: var(--line-height-1);
    }

    .second-section {
        display: flex;
        justify-content: center;
        width: 100vw;
        height: 70vh;
        background-color: var(--color-grey-2);
    }

    .second-section .second-section-div {
        display: flex;
        flex-direction: column;
        gap: 1.8125rem;
        align-items: center;
        margin-top: 3.75rem;
    }

    .second-section .second-section-div h1 {
        font-size: var(--font-size-3);
        font-weight: var(--font-weight-1);
        line-height: var(--line-height-1);
        color: var(--color-grey-7);
    }

    .second-section .second-section-div .second-section-div-div {
        display: flex;
        flex-direction: column;
    }

    .second-section .second-section-div .second-section-div-div p {
        font-size: var(--font-size-5);
        font-weight: var(--font-weight-2);
        line-height: var(--line-height-1);
        color: var(--color-grey-7);
        margin-bottom: 0.5rem;
    }

    .second-section .second-section-div .second-section-div-div input {
        padding: .5rem 4.8125rem .5625rem .8125rem;
        background-color: var(--color-grey-1);
        border: .0625rem solid var(--color-grey-3);
        border-radius: var(--radius-1);
        font-size: var(--font-size-5);
        font-weight: var(--font-weight-2);
        line-height: var(--line-height-1);
        color: var(--color-grey-7);
        margin-bottom: 1rem;
        cursor: text;
    }

    .second-section .second-section-div .second-section-div-div input::placeholder {
        font-size: var(--font-size-5);
        font-weight: var(--font-weight-2);
        line-height: var(--line-height-1);
    }

    .second-section .second-section-div .second-section-div-div button {
        padding: .5313rem 5.8438rem;
        background-color: var(--color-brand-2);
        border-radius: var(--radius-1);
        font-size: var(--font-size-5);
        font-weight: var(--font-weight-1);
        line-height: var(--line-height-1);
        color: var(--color-grey-7);
    }

    .errorDiv {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 1.25rem);
        display: flex;
        width: fit-content;
        height: fit-content;
        justify-content: center;
        align-items: center;
        width: 70vw;
        bottom: 9.375rem;
        padding: 1rem;
        z-index: 3;
        background-color: var(--color-grey-1);
        color: var(--color-grey-7);
        border-radius: var(--radius-1);
        font-size: var(--font-size-5);
        font-weight: var(--font-weight-1);
        line-height: var(--line-height-1);
        animation: fadeIn 0.4s ease-out;
    }
}

@media (min-width: 767px) {
    body {
        display: flex;
        height: 100vh;
    }

    .first-section {
        width: 50vw;
        background-color: var(--color-brand-1);
    }

    .first-section .first-section-div {
        display: flex;
        flex-direction: column;
        padding-top: 32.23%;
        padding-right: 17.33%;
        padding-left: 21.45%;
        gap: 2.3125rem;
    }

    .first-section .first-section-div h1 {
        color: var(--color-grey-7);
        font-size: var(--font-size-1);
        font-weight: var(--font-weight-1);
        line-height: var(--line-height-1);
    }

    .first-section .first-section-div p {
        color: var(--color-grey-7);
        font-size: var(--font-size-2);
        font-weight: var(--font-weight-3);
        line-height: var(--line-height-1);
    }

    .second-section {
        width: 50vw;
        background-color: var(--color-grey-2);
    }

    .second-section .second-section-div {
        display: flex;
        flex-direction: column;
        gap: 2.8125rem;
        padding: 33.37% 22.30% 2.99% 22.30%;
    }

    .second-section .second-section-div h1 {
        font-size: var(--font-size-2);
        font-weight: var(--font-weight-2);
        line-height: var(--line-height-1);
        color: var(--color-grey-7);
    }

    .second-section .second-section-div .second-section-div-div {
        display: flex;
        flex-direction: column;
    }

    .second-section .second-section-div .second-section-div-div p {
        font-size: var(--font-size-5);
        font-weight: var(--font-weight-2);
        line-height: var(--line-height-1);
        color: var(--color-grey-7);
        margin-bottom: 1rem;
    }

    .second-section .second-section-div .second-section-div-div input {
        padding: .5rem 4.8125rem .5625rem .8125rem;
        background-color: var(--color-grey-1);
        border: .0625rem solid var(--color-grey-3);
        border-radius: var(--radius-1);
        font-size: var(--font-size-5);
        font-weight: var(--font-weight-2);
        line-height: var(--line-height-1);
        color: var(--color-grey-7);
        margin-bottom: 1.25rem;
        cursor: text;
    }

    .second-section .second-section-div .second-section-div-div input:focus {
        border: .0625rem solid var(--color-grey-6);
    }

    .second-section .second-section-div .second-section-div-div input::placeholder {
        font-size: var(--font-size-5);
        font-weight: var(--font-weight-2);
        line-height: var(--line-height-1);
    }

    .second-section .second-section-div .second-section-div-div button {
        padding: .5313rem 5.8438rem;
        background-color: var(--color-brand-2);
        border-radius: var(--radius-1);
        font-size: var(--font-size-5);
        font-weight: var(--font-weight-2);
        line-height: var(--line-height-1);
        color: var(--color-grey-7);
    }

    .second-section .second-section-div .second-section-div-div button:hover {
        background-color: var(--color-brand-1);
    }

    .errorDiv {
        position: absolute;
        display: flex;
        width: 30%;
        height: fit-content;
        justify-content: center;
        align-items: center;
        width: 27.8vw;
        right: 11.1%;
        bottom: 13.125rem;
        padding: 1rem;
        z-index: 3;
        background-color: var(--color-grey-1);
        color: var(--color-grey-7);
        border-radius: var(--radius-1);
        font-size: var(--font-size-5);
        font-weight: var(--font-weight-1);
        line-height: var(--line-height-1);
        animation: fadeIn 0.4s ease-out;
    }
}