.input {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.input__field {
  width: 100%;
  height: 3.611vw;
  padding: 0.97vw 1.11vw;
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  background: var(--color-white);
  color: var(--color-dark);
  font-family: var(--font-ui);
  font-size: 1.11vw;
  outline: none;
  transition: border-color var(--transition);
}

.input__field::placeholder {
  color: var(--color-gray);
}

.input__field:focus {
  border-color: color-mix(in srgb, var(--color-blue) 40%, transparent);
}

.input--error .input__field {
  border-color: var(--color-error);
}

.input__message {
  display: none;
  margin-top: 0.28vw;
  color: var(--color-error);
  font-size: 0.83vw;
}

.input--error .input__message {
  display: block;
}

@media (max-width: 1024px) {
  .input__field {
    height: 52px;
    padding: 14px 16px;
    font-size: 16px;
  }

  .input__message {
    margin-top: 4px;
    font-size: 14px;
  }
}