.form__inner {
  max-width: 725px;
  width: 100%;
}

.form__inner form {
  display: grid;
  grid-template-columns: 1fr;
}

.form__title {
  font-size: 20px;
  line-height: 28px;

  font-weight: var(--font-weight-semibold);

  color: var(--color-typo);

  margin-bottom: 12px;
}

.form__label {
  display: block;

  font-size: 16px;
  line-height: 24px;

  font-weight: var(--font-weight-semibold);

  color: var(--color-typo);

  margin-bottom: 4px;
}

.form__field, .form__textarea {
  display: block;

  width: 100%;

  font-size: 16px;
  line-height: 24px;

  color: var(--color-typo);

  padding: 12px 16px;

  border: 1px solid #DDE1E3;

  border-radius: var(--border-radius-sm);

  margin-bottom: 12px;
}

.form__field::placeholder, .form__textarea::placeholder {
  font-size: 16px;
  line-height: 24px;

  color: var(--color-placeholder);
}

.form__field:focus {
  border-color: var(--color-accent-foreground);
}

.form__field.error, .form__textarea.error {
  border-color: var(--color-red);
}

.form__field.error::placeholder, .form__textarea.error::placeholder {
  color: var(--color-red);
}

.form__textarea {
  margin-bottom: 16px;

  resize: none;
}

.form__info p {
  display: flex;
  align-items: center;
}

.form__info i {
  font-size: 16px;
  line-height: 20px;

  margin-right: 5px;
}

.form__info .success i {
  color: var(--color-accent-background);
}

.form__info .error {
  color: var(--color-red);
}

.form__submit button {
  width: 100%;
}

/* Form decoration styles */
.form__wrapper {
  position: relative;

  max-width: 100%;
  width: 100%;

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  margin: 0 auto;
  margin-bottom: 550px;
}

.form__wrapper--with-image {
  min-height: 150px;
}

.form__background {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.form__overlay {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.form__inner--align-left {
  text-align: left;
}

.form__inner--align-center {
  text-align: center;
}

.form__inner--align-right {
  text-align: right;
}

.form__inner--spacing-sm {
  padding: 20px var(--horizontal-padding);
}

.form__inner--spacing-md {
  padding: 24px var(--horizontal-padding);
}

.form__inner--spacing-lg {
  padding: 28px var(--horizontal-padding);
}

.form__inner {
  max-width: calc(var(--max-width) + var(--horizontal-padding) * 2);
  width: 100%;

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  overflow: hidden;

  margin: 0 auto;
}

.form__inner--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.form__title {
  margin: 6px 0;

  position: relative;

  z-index: 1;
}

.form__title--size-sm {
  font-size: 24px;
  line-height: 32px;

  font-weight: var(--font-weight-semibold);
}

.form__title--size-md {
  font-size: 32px;
  line-height: 40px;

  font-weight: var(--font-weight-semibold);
}

.form__title--size-lg {
  font-size: 40px;
  line-height: 48px;

  font-weight: var(--font-weight-bold);
}

.form__text {
  margin: 12px 0;

  line-height: 28px;

  position: relative;

  z-index: 1;
}

.form__text--size-sm {
  font-size: 18px;
}

.form__text--size-md {
  font-size: 20px;
}

.form__text--size-lg {
  font-size: 22px;
}

.form__button-container {
  display: flex;
  align-items: center;
}

.form__button-container--align-left {
  justify-content: flex-start;
}

.form__button-container--align-center {
  justify-content: center;
}

.form__button-container--align-right {
  justify-content: flex-end;
}

.form .bq-button {
  margin: 12px 0;

  position: relative;

  z-index: 1;
}

.form__content {
  display: flex;
  flex-flow: column nowrap;

  padding: 16px 0;
}

.form__content--justify-left {
  text-align: left;
  align-items: flex-start;
}

.form__content--justify-center {
  text-align: center;
  align-items: center;
}

.form__content--justify-right {
  text-align: right;
  align-items: flex-end;
}

.form__content--align-top {
  justify-content: flex-start;
}

.form__content--align-center {
  justify-content: center;
}

.form__content--align-bottom {
  justify-content: flex-end;
}

.form__form {
  position: absolute;

  width: calc(100% - 32px);

  top: 100%;
  transform: translateY(-25px);

  background-color: var(--color-white);

  border: 1px solid #DDE1E3;
  border-radius: var(--border-radius-sm);

  box-shadow: 0 1px 2px rgba(33, 59, 71, 0.12),
    0 4px 12px rgba(33, 59, 71, 0.12);

  padding: 16px;

  z-index: 1;
}

.form__inner .form__form {
  grid-row: 2 / 3;
}

.form__form .form__inner form {
  grid-template-columns: 1fr;
}

.form__form .form__inner .form__message,
.form__form .form__inner .form__submit,
.form__form .form__inner .form__info {
  grid-column: initial;
}

@media (min-width: 576px) {
  .form__form {
    transform: translateY(-50px);
  }

  .form__inner--spacing-sm {
    padding: 30px var(--horizontal-padding);
  }

  .form__inner--spacing-md {
    padding: 45px var(--horizontal-padding);
  }

  .form__inner--spacing-lg {
    padding: 60px var(--horizontal-padding);
  }
}

@media (min-width: 810px) {
  /* Core form styles */
  .form__inner {
    margin-bottom: 0;
  }

  .form__inner form {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
  }

  .form__message, .form__submit, .form__info {
    grid-column: span 2;
  }

  .form__submit button {
    width: auto;
  }

  /* Form decoration styles */
  .form__wrapper {
    margin-bottom: 0;
  }

  .form__inner--grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form__inner--spacing-sm {
    padding: 55px var(--horizontal-padding);
  }

  .form__inner--spacing-md {
    padding: 110px var(--horizontal-padding);
  }

  .form__inner--spacing-lg {
    padding: 220px var(--horizontal-padding);
  }

  .form__inner .form__form {
    position: relative;

    top: initial;
    transform: none;

    grid-row: initial;

    max-width: 725px;
    width: 100%;

    margin: 0 auto;
  }

  .form__inner--grid .form__form {
    max-width: none;
  }
}

@media (min-width: 1100px) {
  .form__form .form__inner form {
    grid-template-columns: repeat(2, 1fr);
  }

  .form__form .form__inner .form__message,
  .form__form .form__inner .form__submit,
  .form__form .form__inner .form__info {
    grid-column: span 2;
  }
}