.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" "select select select select select select" "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,
.registration .form__field select {
  font: 300 1.3rem/1.4 var(--default-font-family);
  background: var(--black-10);
  padding: 1.1rem 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__field._select {
  grid-area: select;
}

.registration .form__btn {
  grid-area: btn;
  width: 100%;
}
@media (max-width: 1920px) {
.registration .form__field input,
.registration .form__field textarea,
.registration .form__field select {
  font: 300 1.6rem/1.4 var(--default-font-family);
  padding: 1.3rem 1.2rem;
}
}

@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" "select" "btn";
  }

  .registration .form__btn:after {
    display: none;
  }
}