.contact-page {
    padding-block: 2.5rem 4rem;
}

.contact-page .contact-shell {
    width: min(100%, 48rem);
    margin-inline: auto;
    padding: 2rem;
    border: 1px solid var(--gray-light);
}

.contact-page .contact-header {
    margin-bottom: 1.5rem;
}

.contact-page .contact-kicker {
    margin-bottom: 0.5rem;
    color: var(--primary);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
}

.contact-page .contact-introduction {
    color: var(--dark-light);
}

.contact-page .contact-status {
    margin-bottom: 1rem;
    padding: 1rem;
    color: var(--dark);
    background: color-mix(in srgb, var(--success) 12%, var(--light));
    border: 1px solid var(--success);
    border-radius: var(--radius-card);
}

.contact-page .contact-form textarea.form-control {
    min-height: 12rem;
}

.contact-page .contact-form .field-validation-error {
    display: block;
    margin-top: 0.5rem;
}

.contact-page .contact-submit {
    min-width: 10rem;
}

@media (max-width: 48rem) {
    .contact-page {
        padding-block: 1.5rem 3rem;
    }

    .contact-page .contact-shell {
        padding: 1.5rem;
    }

    .contact-page .contact-submit {
        width: 100%;
    }
}