form {
  display: flex;
  flex-direction: column;
}

form > *:nth-child(n+3) {
  margin-bottom: 20px;
}

form h2 {
  font-size: var(--font-size-3xl);
  padding: 30px 0;
  font-weight: 500;
}

form h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  background-color: rgb(var(--color-indigo-600));
  margin-top: 25px;
}

form .row {
  display: flex;
  column-gap: 20px;
}

form .row > div {
  width: 100%;
}

.form-group .form-label {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  letter-spacing: 0.075rem;
  color: rgb(var(--color-typo-default));
  text-transform: uppercase;
  margin: 0 0 0.75rem;
  font-weight: 500;
}

.form-group input {
  padding: 0.75rem 1rem;
  border: 1px solid rgb(var(--color-gray-300));
  border-radius: var(--border-radius);
  width: 100%;
  background: rgb(var(--color-white));
  color: rgb(var(--color-typo-default));
  transition: border-color var(--transition-timing-default) var(--transition-easing-default);
}

.form-group input:hover {
  border-color: rgb(var(--color-gray-600));
}

.form-group input:focus {
  outline: 3px dashed rgb(var(--color-indigo-600));
  outline-offset: 2px;
  border-color: rgb(var(--color-indigo-600));
}

.form-group select {
  appearance: none;
  background: rgb(var(--color-white));
  padding: 0.75rem 1rem;
  border: 1px solid rgb(var(--color-gray-300));
  border-radius: var(--border-radius);
  width: 100%;
  color: rgb(var(--color-typo-default));
  transition: border-color var(--transition-timing-default) var(--transition-easing-default);

  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}

.form-group select:hover {
  border-color: rgb(var(--color-gray-600));
}

.form-group select:focus {
  outline: 3px dashed rgb(var(--color-indigo-600));
  outline-offset: 2px;
  border-color: rgb(var(--color-indigo-600));
}

.file-upload {
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-white));
  transition-property: background-color;
  transition-timing-function: var(--transition-easing-default);
  transition-duration: var(--transition-timing-default);
  background-color: rgb(var(--color-indigo-800));
  margin-bottom: 0.5rem;
  cursor: pointer;
  border-radius: var(--border-radius);
}

.file-upload:hover {
  background-color: rgb(var(--color-indigo-700));
}

.form-navigation .submit button {
  color: rgb(var(--color-black));
  background-color: rgb(var(--color-yellow-400));
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius-xl);
  border: none;
  transition: background-color var(--transition-timing-default) var(--transition-easing-default);
}

.form-navigation .submit button:hover {
  background-color: rgb(var(--color-yellow-300));
}