//spacing variables
$cbp-spacing-micro: 8px;
$cbp-spacing-xsmall: 12px;
$cbp-spacing-small: 16px;
$cbp-spacing-regular: 20px;
$cbp-spacing-large: 40px;
$cbp-spacing-xlarge: 80px;

//spacing squish classes//

//applies 8px of padding to the top and bottom padding and 12px to the left and right padding
.cbp-spacing-squish-micro {
  padding: $cbp-spacing-micro $cbp-spacing-xsmall;
}

// applies 12px of padding to the top and bottom padding and 16px to the left and right padding.
.cbp-spacing-squish-xsmall {
  padding: $cbp-spacing-xsmall $cbp-spacing-small;
}

// applies 16px of padding to the top and bottom padding and 20px to the left and right padding.
.cbp-spacing-squish-small {
  padding: $cbp-spacing-small $cbp-spacing-regular;
}

// applies 20px of padding to the top and bottom padding and 40px to the left and right padding.
.cbp-spacing-squish-regular {
  padding: $cbp-spacing-regular $cbp-spacing-large;
}

 // applies 40px of padding to the top and bottom padding and 80px to the left and right padding
.cbp-spacing-squish-large {
  padding: $cbp-spacing-large $cbp-spacing-xlarge;
}

//used for demonstration purposes only
body {
  width: 400px;
  margin: auto;
}
div {
  color: #1460aa;
  background-color: #1460aa;
  background-clip: padding-box;
  margin-bottom: 10px;
}

p {
  background-color: #edf3f9;
}