.contact-form {
    flex-grow: 1;
    display: grid;
    grid-template-areas: 
        'name email'
        'textarea textarea'
        'submit submit';
    gap: 3rem;
    grid-template-rows: 1fr 3fr 1fr;
}

.input-field {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.input-field > input:focus, .input-field > textarea:focus {
    border: 2px solid var(--button-color);
}

.input-field:nth-child(3) {
    grid-area: textarea;
}

.input-field:nth-child(4) {
    grid-area: submit;
}

input[type="submit"] {
    cursor: pointer;
    transition: 0.5s;
}
input[type="submit"]:hover {
    background-color: var(--button-color);
    color: white;
    border: 2px solid var(--button-color);
}

input, textarea {
    outline-style: none;
    padding: 1rem;
    border-radius: 5px;
    border: none;
    border: 2px solid rgb(104, 104, 104)
}

textarea {
    height: 100%;
    resize: none;
}

/* =========== RESPONSIVITY ============== */

@media (max-width: 756px) {
    .contact-form {
        display: flex;
        flex-direction: column;
    }
    textarea {
        height: 200px;
    }
}