.registration {
  background: var(--secondary);
  padding-bottom: var(--sp);
  padding-top: 0.1rem;
  margin-top: -0.2rem;
}

.registration__inner {
  background: var(--white);
  padding: 6rem 4rem;
  display: flex;
  justify-content: space-between;
}

.registration__left {
  width: 55.2rem;
}

.registration__pretitle {
  margin-bottom: 1rem;
  font-size: 2rem;
  line-height: 1.4;
  font-weight: 300;
}

.registration__right {
  width: 52rem;
}

.registration .form {
  max-width: initial;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas: "name name name phone phone phone" "email email email email email email" "comment comment comment comment comment comment" "budget budget start start start start" "btn btn btn btn btn btn";
  gap: 2rem;
}

.registration .form__field {
  display: flex;
  flex-direction: column;
}

.registration .form__field span {
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 300;
  margin-bottom: 0.2rem;
}

.registration .form__field input,
.registration .form__field textarea {
  font: 300 1.6rem/1.4 var(--default-font-family);
  background: var(--black-10);
  padding: 1.3rem 1.2rem;
  border: none;
  border-radius: 0px;
  resize: vertical;
}

.registration .form__field._name {
  grid-area: name;
}

.registration .form__field._phone {
  grid-area: phone;
}

.registration .form__field._email {
  grid-area: email;
}

.registration .form__field._comment {
  grid-area: comment;
}

.registration .form__field._budget {
  grid-area: budget;
}

.registration .form__field._start {
  grid-area: start;
}

.registration .form__btn {
  grid-area: btn;
  width: 100%;
}

@media (max-width: 1260px) {
  .registration__inner {
    flex-direction: column;
    gap: 50px;
  }

  .registration__left {
    width: 100%;
  }

  .registration__right {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .registration {
    padding-top: var(--sp);
  }

  .registration__inner {
    padding: 20px;
  }

  .registration__left {
    text-align: center;
  }

  .registration__pretitle {
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 300;
  }

  .registration .form {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: "name" "phone" "email" "comment" "budget" "start" "btn";
  }

  .registration .form__btn:after {
    display: none;
  }
}