@mixin content-padding( $size ) {
  padding-top: $size;
  padding-bottom: $size;
}

@mixin side-padding( $size ) {
  padding-left: $size / 2;
  padding-right: $size / 2;

  @include media-breakpoint-up(sm) {
    padding-left: $size;
    padding-right: $size;
  }

}

@mixin build-content-padding( $size_value ){
  @include content-padding( $size_value * 0.5 );
  @include media-breakpoint-up(sm) {
    @include content-padding( $size_value * 0.66 );
  }

  @include media-breakpoint-up(md) {
    @include content-padding( $size_value * 0.75 );
  }

  @include media-breakpoint-up(lg) {
    @include content-padding( $size_value );
  }
}

$spacing-content-padding: 4rem;

$spacing_sizes: (
  lg: $spacing-content-padding * 1.5,
  xl: $spacing-content-padding * 2,
  xxl: $spacing-content-padding * 2.5,
);

.content-padding{
  @include build-content-padding( $spacing-content-padding );

  &-none{
    @include content-padding( 0 );
  }

  &-xs{
    @include content-padding( 2rem );
  }

  @each $size, $size_value in $spacing_sizes{
    &-#{$size}{
      @include build-content-padding( $size_value );
    }
  }
}


$spacing_sizes_side: (
  sm: $spacing-content-padding - 3,
  lg: $spacing-content-padding - 1,
  xl: $spacing-content-padding,
  xxl: $spacing-content-padding + 1,
  xxxl: $spacing-content-padding + 2
);


.content-padding{
  &-side:not(.vc_column_container),
  &-side.vc_column_container .vc_column-inner{
    @include side-padding(2rem);
  }
  @each $size, $size_value in $spacing_sizes_side{
    &-side-#{$size}:not(.vc_column_container),
    &-side-#{$size}.vc_column_container .vc_column-inner{
      @include side-padding($size_value);
    }
  }
}

.ct-content-without-vc .ct-content{
  @include content-padding( 2rem );

  @include media-breakpoint-up(sm) {
    @include content-padding( 4rem );
  }

  @include media-breakpoint-up(xl) {
    @include content-padding( 5rem );
  }

}