//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 square classes//

.cbp-spacing-square-micro {
  padding: $cbp-spacing-micro;
}

// applies even 12px of padding around the element on all 4 sides
.cbp-spacing-square-xsmall {
  padding: $cbp-spacing-xsmall;
}

// applies even 16px of padding around the element on all 4 sides
.cbp-spacing-square-small {
  padding: $cbp-spacing-small; 
}

// applies even 20px of padding around the element on all 4 sides
.cbp-spacing-square-regular {
  padding: $cbp-spacing-regular; 
}

 // applies even 40px of padding around the element on all 4 sides
.cbp-spacing-square-large {
  padding: $cbp-spacing-large;
}

// applies even 80px of padding around the element on all 4 sides
.cbp-spacing-square-xlarge {
  padding: $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;
}