.contact-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(48px, 7vw, 110px) 6vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 7vw, 100px)
}

.contact-intro h1 {
    font: 700 clamp(48px, 5vw, 82px)/1 var(--serif);
    margin: 12px 0 24px
}

.contact-intro a, .contact-errors {
    color: var(--pink)
}

.contact-page form {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.contact-page label {
    font-weight: 800
}

.contact-page input, .contact-page textarea {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    font: inherit;
    background: #fff;
    margin-bottom: 8px
}

.contact-page :is(input, textarea):focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px
}

.contact-page button {
    border: 0;
    cursor: pointer
}

.contact-success {
    grid-column: 1 / -1;
    padding: 20px;
    background: var(--pink-soft)
}

.contact-honeypot {
    position: absolute;
    left: -10000px
}

@media (max-width: 720px) {
    .contact-page {
        grid-template-columns: 1fr
    }
}