.component {
  &.component--spacing--none {
    padding-top: 0;
    padding-bottom: 0;
  }

  &.component--spacing--small {
    padding-top: calc(15/10 * 1rem);
    padding-bottom: calc(15/10 * 1rem);
  }

  &.component--spacing--normal {
    padding-top: calc(30/10 * 1rem);
    padding-bottom: calc(30/10 * 1rem);
  }

  &.component--spacing--large {
    padding-top: calc(45/10 * 1rem);
    padding-bottom: calc(45/10 * 1rem);
  }

  &.component--spacing--xlarge {
    padding-top: calc(60/10 * 1rem);
    padding-bottom: calc(60/10 * 1rem);
  }
}