.form {
  &--decorated {
    margin: 0 auto;
    @include breakpoint(small only) {
      background-color: #f5f7f9;
    }
    @include breakpoint(medium) {
      padding: rem-calc(40);
    }
    background-color: $white;
  }
  &--decorated-normal {
    @extend .form--decorated;
    width: rem-calc(520);
    max-width: 100%;
  }
  &--decorated-full-page {
    @extend .form--decorated;
    width: 100%;
    max-width: 1024px;
    @include breakpoint(1024) {
      width: 1024px;
    }
  }
  &--decorated-with-featured-img {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
  }
}

.form-bottom-actions {
  margin: 30px 0 10px 0;
}

.form-section {
  @include breakpoint (small only) {
    width: 100%;
    background-color: #ffffff;
    padding-left: rem-calc(18);
    padding-right: rem-calc(18);
    padding-top: rem-calc(20);
    padding-bottom: rem-calc(20);
    &--no-lateral-padding {
      padding-left: 0;
      padding-right: 0;
    }
  }
}