.form-container {
    --contact-border: var(--color-neutral-200, #d5d8dc);
    --contact-focus: var(--color-primary-main, #2a6f97);
    --contact-bg: var(--color-neutral-white, #ffffff);
    --contact-text: var(--color-neutral-900, #1f2933);
    --contact-radius: var(--corners-m, 0.5rem);

    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--contact-border);
    border-radius: calc(var(--contact-radius) * 1.5);
    padding: clamp(1rem, 2.5vw, 2rem);
    margin-top: -2rem;
}

.form-element-gridrow {
  margin-top: 2rem;
}

.form-element > div,
.form-element div:nth-child(4) {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.25rem;

    & .form-check-wrapping-label {
        flex-direction: row;
        margin-bottom: 0;

        label {
            max-width: 40%;
        }
    }
}

.form-container .form-label {
    color: var(--contact-text);
    font-weight: 600;
    min-height: 1.6rem;
    margin-bottom: 0.45rem;
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
}

.form-container .form-element-text,
.form-container .form-element-textarea {
    display: flex;
    flex-direction: column;
}

.form-container .form-control {
    background-color: var(--contact-bg);
    border: 1px solid var(--contact-border);
    border-radius: var(--contact-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.form-container input.form-control {
    min-height: 2.75rem;
}

.form-container textarea.form-control {
    width: 500px;
    max-width: 100%;
    height: 50px;
    resize: vertical;
    padding: 0.5rem;
    padding-block-start: 0.8rem;
    min-height: 7rem;
}

.form-container .form-control:focus {
    border-color: var(--contact-focus);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--contact-focus) 25%, transparent);
}

.form-container .form-actions .btn,
.form-container .form-actions button,
.form-container .form-actions input[type="submit"] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    color: #fff;
    background-color: var(--link-color);
    border: none;
}

.form-container .form-actions .btn:hover,
.form-container .form-actions button:hover {
    background-color: var(--button-primary-color-hover);
}

nav.form-navigation {
  margin-block-start: 1.5rem;
}