.devos-contact {
    background: var(--devos-groen-diep);
    color: var(--devos-beige);
    padding: 8rem 0;
}

@media (min-width: 768px) {
    .devos-contact {
        padding: 11rem 0;
    }
}

.devos-contact__grid {
    display: grid;
    gap: 4rem;
}

@media (min-width: 768px) {
    .devos-contact__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 5rem;
    }

    .devos-contact__info { grid-column: 1 / span 5; }
    .devos-contact__form { grid-column: 8 / span 6; }
}

.devos-contact .devos-eyebrow {
    color: var(--devos-oranje);
}

.devos-contact .devos-section-title {
    margin-top: 1.75rem;
    color: var(--devos-beige);
}

.devos-contact__intro {
    margin-top: 2rem;
    max-width: 28rem;
    color: color-mix(in oklab, var(--devos-beige) 80%, transparent);
}

.devos-contact__details {
    margin: 3rem 0 0;
}

.devos-contact__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid color-mix(in oklab, var(--devos-beige) 15%, transparent);
}

.devos-contact__row .devos-eyebrow {
    color: color-mix(in oklab, var(--devos-beige) 50%, transparent);
    margin: 0;
}

.devos-contact__row dd {
    margin: 0;
    color: color-mix(in oklab, var(--devos-beige) 90%, transparent);
    text-align: right;
}

.devos-contact__link {
    color: var(--devos-beige);
}

.devos-contact__form {
    border: none;
    padding: 0;
}

.devos-contact .hubspot-form {
    width: 100%;
}

.devos-contact .devos-form {
    margin-top: 0;
}

.devos-contact .devos-form__field {
    color: color-mix(in oklab, var(--devos-beige) 60%, transparent);
}

.devos-contact .devos-form__field input,
.devos-contact .devos-form__field textarea {
    border-bottom-color: color-mix(in oklab, var(--devos-beige) 30%, transparent);
    color: var(--devos-beige);
}