.form {
  display: flex;
  flex-direction: column;
  max-width: 49ch;
  width: 100%
}

.form__container {
  display: flex;
  flex-direction: column;
  gap: calc(var(--line-height));
  margin-bottom: 3.7em;
  margin-top: 0.5em
}

.form__errors {
  background: hsla(var(--hsl-red), 0.1);
  border: 2px solid var(--color-red);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: .6em;
  padding: 1.5em
}

.form__errors h2 {
  color: var(--color-red);
  font-size: var(--font-size-large);
  font-weight: 700;
  line-height: 1.2
}

.form__errors ul {
  display: flex;
  flex-direction: column;
  gap: .4em;
  list-style: none;
  padding: 0
}

.form__errors ul li {
  color: var(--color-red);
  font-size: var(--font-size-small);
  font-weight: 500;
  padding-left: 1.4em;
  position: relative
}

.form__errors ul li:before {
  content: "→";
  display: inline-block;
  font-weight: 700;
  left: 0;
  position: absolute;
  width: 1.4em
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: .6em;
  position: relative
}

.form__field label {
  color: var(--color-white);
  display: block;
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: normal
}

.form__field input[type="text"],
.form__field input[type="email"],
.form__field input[type="password"] {
  background: var(--color-grey-3);
  border: 2px solid var(--color-grey-3);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  outline: none;
  padding: 1em;
  transition: border-color var(--transition), background var(--transition);
  width: 100%
}

.form__field input[type="text"]:focus,
.form__field input[type="email"]:focus,
.form__field input[type="password"]:focus {
  background: var(--color-black);
  border-color: var(--color-white)
}

.form__field input[type="text"]::placeholder,
.form__field input[type="email"]::placeholder,
.form__field input[type="password"]::placeholder {
  color: var(--color-grey-2);
  font-weight: 400
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1em;
  margin-top: calc(var(--line-height) * 0.5)
}

.form__submit {
  background: var(--color-white);
  border: 2px solid var(--color-white);
  border-radius: 0;
  color: var(--color-black);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: -0.01em;
  outline: none;
  padding: 1em 2em;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition)
}

.form__submit:hover,
.form__submit:focus {
  background: var(--color-black);
  color: var(--color-white)
}

.form__submit:active {
  transform: translateY(1px)
}

.form__link {
  color: var(--color-white);
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color var(--transition);
}

.form__link:hover,
.form__link:focus {
  color: var(--color-grey-1)
}

.form__link:active {
  transform: translateY(1px)
}

@media(min-width: 64em) and (hover: hover) and (pointer: fine) {
  .form {
    max-width: 39ch
  }
}