.contact-form {
    width: 100%;
    border: 1px solid var(--color-primary-dark);
    border-radius: var(--border-radius);
    padding: 24rem;
    -webkit-transition: border-color var(--transition-duration);
    transition: border-color var(--transition-duration);
    scroll-margin-top: calc(var(--header-height) + 32rem);
}

.contact-form br {
    display: none;
}

.contact-form__main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24rem;
}

.contact-form__main:not(:first-child) {
    margin-top: 24rem;
}

.contact-form__fields {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24rem;
    width: 100%;
}

.contact-form__fields-row {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 24rem;
    width: 100%;
}

.contact-form__field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 6rem;
    width: 100%;
}

.contact-form__field .label {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
}

.contact-form__field:has([aria-required='true']) .label {
    position: relative;
}

.contact-form__field:has([aria-required='true']) .label:after {
    content: '';
    width: 10rem;
    height: 10rem;
    position: absolute;
    top: -2rem;
    left: calc(100% + 2rem);
    background: url('../../img/icons/asterisk-primary.svg') center/contain no-repeat;
}

@media screen and (min-width: 768px) {
    .contact-form__fields-row {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-form__button {
        width: 100%;
    }
}

@media (hover: hover) {
    .contact-form:hover {
        border-color: var(--color-primary);
    }
}