// this will need name-spacing so we don't over-write any partner / VLE CSS, suggestion, `kp--padding-around-sm`.

//////////
// Some Helper Classes
/////////

// around
  // this goes around the whole thing
  .padding-around-sm {
    padding: 5px;
  }
  .padding-around-md {
    padding: 10px;
  }
  .padding-around-lg {
    padding: 15px;
  }
  .margin-around-sm {
    margin: 5px;
  }
  .margin-around-md {
    margin: 10px;
  }
  .margin-around-lg {
    margin: 15px;
  }
// left and right
  .padding-sides-sm {
    padding: inherit 5px inherit 5px;
  }
  .padding-sides-md {
    padding: inherit 10px inherit 10px;
  }
  .padding-sides-lg {
    padding: inherit 15px inherit 15px;
  }
  .margin-sides-sm {
    margin: inherit 5px inherit 5px;
  }
  .margin-sides-md {
    margin: inherit 10px inherit 10px;
  }
  .margin-sides-lg {
    margin: inherit 15px inherit 15px;
  }
// quick fix
  // sometimes the display property isn't block, and non-WD's would struggle knowing if they need padding or margin. This is meant to apply at least one or both of them.
  .space-top-sm {
    padding-top: 5px;
    margin-top: 5px;
  }
  .space-top-md {
    padding-top: 10px;
    margin-top: 10px;
  }
  .space-top-lg {
    padding-top: 15px;
    margin-top: 15px;
  }

//////////
// Atomised Base Classes
/////////

// Margin
  .margin-above-sm {
    margin-top: 5px;
  }
  .margin-above-md {
    margin-top: 10px;
  }
  .margin-above-lg {
    margin-top: 15px;
  }

  .margin-below-sm {
    margin-bottom: 5px;
  }
  .margin-below-md {
    margin-bottom: 10px;
  }
  .margin-below-lg {
    margin-bottom: 15px;
  }

  .margin-left-sm {
    margin-left: 5px;
  }
  .margin-left-md {
    margin-left: 10px;
  }
  .margin-left-lg {
    margin-left: 15px;
  }

  .margin-right-sm {
    margin-right: 5px;
  }
  .margin-right-md {
    margin-right: 10px;
  }
  .margin-right-lg {
    margin-right: 15px;
  }

// Padding
  .padding-above-sm {
    padding-top: 5px;
  }
  .padding-above-md {
    padding-top: 10px;
  }
  .padding-above-lg {
    padding-top: 15px;
  }

  .padding-below-sm {
    padding-bottom: 5px;
  }
  .padding-below-md {
    padding-bottom: 10px;
  }
  .padding-below-lg {
    padding-bottom: 15px;
  }

  .padding-left-sm {
    padding-left: 5px;
  }
  .padding-left-md {
    padding-left: 10px;
  }
  .padding-left-lg {
    padding-left: 15px;
  }
  .padding-right-sm {
    padding-right: 5px;
  }
  .padding-right-md {
    padding-right: 10px;
  }
  .padding-right-lg {
    padding-right: 15px;
  }