.form {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 20px;
  padding: 20px;
}

@media (max-width: 767px) {
  .form {
    grid-template-columns: 1fr;
    display: flex;
    flex-wrap: wrap;
  }
}

.form__newTask {
  border: 2px solid #ddd;
  padding: 10px;
  width: 100%;
}

.form__button {
  padding: 10px;
  background: teal;
  color: white;
  border: none;
  cursor: pointer;
  transition: 1s;
}

.form__button:hover {
  background: hsl(180, 100%, 35%);
  transform: scale(1.2);
  ;
}

@media (max-width: 767px) {
  .form__button {
    width: 100%;
  }
}