/**/
/* Contact Page Styling */
/**/

#contact-form .flow {
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

.contact__info,
.contact__form {
    display: flex;
    flex-direction: column;
    flex: 1 1 30%;
    padding: var(--min-padding);
    gap: 1rem;
}

.contact__info {
    flex-basis: 33%;
}

.contact__info .image-desc .card {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1rem;
}

.contact__info .button,
.contact__info .mock-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: .5em;
}

.mock-button {
    border: .15em transparent solid;
}

.contact__info .image-desc .card .image {
    margin-right: 0;
}

.contact__form {
    flex-basis: 66%;
}

.contact__form form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

form .hbox {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

form .hbox > * {
    flex: 1 1 33%;
}

form .field {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

input, select, textarea {
    all: unset;
    padding: .5rem;
    font-family: var(--ff-sans-serif);
    border: .15rem solid var(--clr-card-border);
    border-radius: .5rem;
    background-color: var(--clr-background);
}

.contact__buttons {
    display: flex;
    gap: 1rem;
}

.contact__buttons > * {
    flex: 1;
}

.contact__buttons {
    display: flex;
    flex-direction: column;
}

.contact__notice {
    display: flex;
    align-items: center;
    justify-content: center;
}

.required-tag {
    color: red;
    margin-left: .25em;
}