.form-validation-error,
.form-general-error {
  width: 100%;
  margin-top: 5px;
  color: #d4586a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}

.form-control.is-invalid {
  border-color: #d4586a;
}

.form-checkbox {
  grid-template-columns: 14px minmax(0, 1fr);
}

.form-checkbox .form-validation-error {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.form-checkbox-input.is-invalid ~ .form-checkbox-icon {
  border-color: #d4586a;
  opacity: 1;
}

.cards-item.cards-item--orange .cards-item-badge { color: var(--orange); background-color: var(--light-orange); }
.cards-item.cards-item--orange .cards-item-btn { background-color: var(--orange); }
.cards-item.cards-item--orange .cards-item-btn:hover { background-color: var(--orange-dark); color: var(--white-100); }
.cards-item.cards-item--green .cards-item-badge { color: var(--green); background-color: var(--light-green); }
.cards-item.cards-item--green .cards-item-btn { background-color: var(--green); }
.cards-item.cards-item--green .cards-item-btn:hover { background-color: var(--green-dark); color: var(--white-100); }
.cards-item.cards-item--pink .cards-item-badge { color: var(--pink); background-color: var(--light-pink); }
.cards-item.cards-item--pink .cards-item-btn { background-color: var(--pink); }
.cards-item.cards-item--pink .cards-item-btn:hover { background-color: var(--pink-dark); color: var(--white-100); }

/* Form renders inside .ajax-form, which is the direct grid child on contacts. */
.contacts-wrap > .ajax-form {
  grid-column: span 5;
  display: flex;
  min-width: 0;
}

.contacts-wrap > .ajax-form .contacts-form {
  width: 100%;
}

@media (max-width: 1199.98px) {
  .contacts-wrap > .ajax-form {
    grid-column: span 1;
  }
}