.block-bg {
  &--light-blue, &--light-gray {
    margin: 0;
    padding-top: 80px;
    padding-bottom: 80px;

    @include sm {
      margin: 0;
      padding-top: 50px;
      padding-bottom: 50px;
    }
  }

  &--light-blue {
    background-color: $gray-bluish;
  }

  &--light-gray {
    background-color: $gray-bluish-light;
  }
}

.block-margin-top {
  &--no-margin {
    margin-top: 0;
  }

  &--small {
    margin-top: 24px;
  }

  &--medium {
    margin-top: 48px;
  }

  &--large {
    margin-top: 80px;
  }

  &--extra-large {
    margin-top: 120px;
  }
}

.block-margin-bottom {
  &--no-margin {
    margin-bottom: 0;
  }

  &--small {
    margin-bottom: 24px;
  }

  &--medium {
    margin-bottom: 48px;
  }

  &--large {
    margin-bottom: 80px;
  }

  &--extra-large {
    margin-bottom: 120px;
  }
}

.block-padding-top {
  &--no-margin {
    padding-top: 0;
  }

  &--small {
    padding-top: 24px;
  }

  &--medium {
    padding-top: 48px;
  }

  &--large {
    padding-top: 80px;
  }

  &--extra-large {
    padding-top: 120px;
  }
}

.block-padding-bottom {
  &--no-margin {
    padding-bottom: 0;
  }

  &--small {
    padding-bottom: 24px;
  }

  &--medium {
    padding-bottom: 48px;
  }

  &--large {
    padding-bottom: 80px;
  }

  &--extra-large {
    padding-bottom: 120px;
  }
}