.contact-form__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.contact-form__header .overline {
  margin-bottom: var(--space-sm);
}

.contact-form__heading {
  color: var(--navy-dark);
  margin-bottom: var(--space-md);
}

.contact-form__subheading {
  font-size: var(--text-base);
  color: var(--slate);
  max-width: 600px;
  margin-inline: auto;
}

.contact-form__fields {
  max-width: 700px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .contact-form__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-form__fields .btn {
  align-self: flex-start;
}

.contact-form__success {
  background-color: rgba(46, 125, 50, 0.1);
  border: 1px solid var(--success);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--success);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-lg);
  max-width: 700px;
  margin-inline: auto;
}

.contact-form__error {
  background-color: rgba(200, 16, 46, 0.1);
  border: 1px solid var(--scarlet);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--scarlet);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-lg);
  max-width: 700px;
  margin-inline: auto;
}