Region

.region adds consistent vertical padding to an element to create regions of content with sufficient spacing.

By default, .region uses --space-l-xl from the space scale, however the amount of space can also be configured by setting --region-space inline or within any new class you decide to create and use alongside .region.

/*
REGION 
Add consistent vertical padding to create regions of content 
Can either be configured by setting --region-space or use a default from the space scale
@link: https://codepen.io/harrycresswell/pen/bGQmBNL
*/
.region {
 padding-top: var(--region-space, var(--space-l-xl));
 padding-bottom: var(--region-space, var(--space-l-xl));
}