// Margins - For centering elements with margins IF NOT INSIDE A DEV ESP WITH BG STYLING
// Vertically center elements via margins
.vcenter-margin {
   display: block;
   margin-top: auto;
   margin-bottom: auto;
}


// Horizontally center elements via margins
// NOTE: if using Foundation Sites, use "float-center".  This is should be used for @mixin only
.hcenter-margin {
   display: block;
   margin-left: auto;
   margin-right: auto;
}



// Padding - For centering elements with paddings IF INSIDE A DIV
// Vertically center elements with paddings IF INSIDE A DIV
$value: 1em;    // example value
.vcenter-padding {
   height: $value;
   padding-top: calc($value/2);
   padding-bottom: calc($value/2);

   // .clearfix hack to keep elements inside div or else they will float
   content: "";
   clear: both;
   display: table;
}


// Horizontally coming soon

// Horizontally center group of elements
$gap-value: 1.5em;
.hcenter-group {
  display: flex;
  justify-content: center;
  gap: $gap-value;
}