.contact-hero .container {
    padding-top: 120px;
    padding-bottom: 96px;
}

.contact-hero p {
    max-width: 620px;
}

.contact-form-layout {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
    gap: 56px;
}

.contact-inquiry-types ul {
    margin: 0;
}

.contact-inquiry-types li {
    margin: 0;
    border-bottom: 1px solid var(--secondary-border-color);
}

.contact-inquiry-types a {
    display: block;
    padding: 18px 16px;
    color: var(--primary-text-color);
    letter-spacing: 1px;
    text-transform: none;
}

.contact-inquiry-types li.current {
    background: var(--button-background-color);
}

.contact-inquiry-types li.current a {
    color: var(--heading-text-color);
}

.contact-form,
.contact-form-stack {
    min-width: 0;
}

.contact-form-error {
    margin-top: 0;
    color: var(--error-color, #b42318);
}

.contact-form[hidden] {
    display: none;
}

.contact-form__type {
    display: inline-block;
    padding: 4px 10px;
    color: var(--heading-text-color);
    background: var(--button-background-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.contact-form p {
    margin-bottom: 32px;
}

.contact-form label {
    color: var(--primary-text-color);
    font-size: 1rem;
    letter-spacing: normal;
}

.contact-form-field > span {
    display: block;
    margin-bottom: 10px;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    color: var(--primary-text-color);
    font-size: 1rem;
    letter-spacing: normal;
    border-color: var(--box-border-color);
    border-radius: 0;
}

.contact-form textarea {
    min-height: 160px;
}

.contact-form button {
    cursor: pointer;
    margin-top: 16px;
    color: var(--heading-text-color);
    background: var(--link-color);
    border: 1px solid var(--link-color);
}

.contact-form hr {
    margin-top: 24px;
    margin-bottom: 20px;
}

.contact-form small {
    color: var(--secondary-text-color);
}

@media screen and (max-width: 899px) {
    .contact-form-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media screen and (max-width: 599px) {
    .contact-hero .container {
        padding-top: 80px;
    }
}
