/* Please use the class that wraps the function to write all of your selectors so styles aren't applied outside of the function */


/* Contact Form */

.new-contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem 15px;
}

.new-contact-form>section {
    display: grid;
    grid-template-columns: 15ch 1fr;
    gap: inherit;
}

.new-contact-form label {
    text-align: right;
    /* align-self: flex-end; */
    margin: 0;
}

.new-contact-form .form-control,
.new-contact-form .form-control::placeholder {
    font-size: inherit;
    color: inherit;
}

.new-contact-form .instructions {
    grid-column: 1/-1;
}

.new-contact-form label {
    text-align: right;
}

.new-contact-form .contact-submit-row [type="submit"] {
    width: fit-content;
    grid-column-start: 2;
}

@media (max-width: 767px) {
    .new-contact-form>section {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .new-contact-form label {
        text-align: unset;
    }
}