.height-100vh {
  min-height: calc( 100vh - var(--sectionWhiteSpace)*2);
}

.height-50vh {
  min-height: calc( 50vh - var(--sectionWhiteSpace)*2);
}

.height-33vh {
  min-height: calc( 33vh - var(--sectionWhiteSpace)*2);
}

.height-67vh {
  min-height: calc( 67vh - var(--sectionWhiteSpace)*2);
}

.height-25vh {
  min-height: calc( 25vh - var(--sectionWhiteSpace)*2);
}

.height-75vh {
  min-height: calc( 75vh - var(--sectionWhiteSpace)*2);
}

.width-100 {
  width: 100%;
  box-sizing: border-box;
}

.width-50 {
  width: 50%;
  box-sizing: border-box;
}

.width-33 {
  width: 33%;
  box-sizing: border-box;
}

.width-67 {
  width: 67%;
  box-sizing: border-box;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.pull-up {
  margin-top: 0;
}

.push-down {
  margin-bottom: 2em;
}

.push-up {
  margin-top: 2em;
}

.flexbox {
  display: flex;
  justify-content: space-between;
}

.flexbox.flexbox-fill > * {
  flex-grow: 1;
}

.section {
  position: relative;
  padding: var(--sectionWhiteSpace) 0;
  border-radius: 0;
  background-color: var(--background-color);
  color: var(--text-color);
}

.section .section-image {
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: var(--imageOpacityBackground);
}

.section .section-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section .section-content {
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: calc( var(--contentMaxWidth) + var(--whiteSpace)*2);
  padding: 0 var(--sectionWhiteSpace);
  background-color: transparent;
  color: var(--text-color);
}

.section .section-content.standard, .section .section-content.primary, .section .section-content.standard-secondary, .section .section-content.secondary, .section .section-content.muted, .section .section-content.muted-secondary, .section .section-content.gradient, .section .section-content.inverse, .section .section-content.inverse-secondary {
  background-color: var(--background-color);
  padding: var(--sectionWhiteSpace) var(--sectionWhiteSpace);
}

.section.hero .section-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: calc( var(--contentMaxWidth) /2 + var(--whiteSpace));
  transform: translate(-50%, -50%);
  padding: var(--sectionWhiteSpace) var(--sectionWhiteSpace);
  z-index: 1;
}

.section.hero .section-content.position-top-left {
  top: 0;
  left: auto;
  right: 50%;
  transform: translate(0, 0);
}

.section.hero .section-content.position-top-center {
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.section.hero .section-content.position-top-right {
  top: 0;
  left: 50%;
  right: auto;
  transform: translate(0, 0);
}

.section.hero .section-content.position-middle-left {
  top: 50%;
  left: auto;
  right: 50%;
  transform: translate(0, -50%);
}

.section.hero .section-content.position-middle-right {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(0, -50%);
}

.section.hero .section-content.position-bottom-left {
  top: auto;
  bottom: 0;
  left: auto;
  right: 50%;
  transform: translate(0, 0);
}

.section.hero .section-content.position-bottom-center {
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.section.hero .section-content.position-bottom-right {
  top: auto;
  bottom: 0;
  left: 50%;
  right: auto;
  transform: translate(0, 0);
}

.section.hero .section-image {
  opacity: var(--imageOpacity);
}

.section.hero:not([class*='height-']) {
  min-height: 67vh;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc( (var(--contentMaxWidth) - var(--whiteSpace)*3 - var(--sectionWhiteSpace)*2) / 4), 1fr));
  grid-gap: var(--whiteSpace);
}

.grid > .standard, .grid > .primary, .grid > .standard-secondary, .grid > .secondary, .grid > .muted, .grid > .muted-secondary, .grid > .gradient, .grid > .inverse, .grid > .inverse-secondary {
  background-color: var(--background-color);
  color: var(--text-color);
  padding: var(--whiteSpace);
  border-radius: var(--borderRadius);
}

.grid > .standard.no-padding, .grid > .primary.no-padding, .grid > .standard-secondary.no-padding, .grid > .secondary.no-padding, .grid > .muted.no-padding, .grid > .muted-secondary.no-padding, .grid > .gradient.no-padding, .grid > .inverse.no-padding, .grid > .inverse-secondary.no-padding {
  padding: 0;
}

.grid > .standard.half-padding, .grid > .primary.half-padding, .grid > .standard-secondary.half-padding, .grid > .secondary.half-padding, .grid > .muted.half-padding, .grid > .muted-secondary.half-padding, .grid > .gradient.half-padding, .grid > .inverse.half-padding, .grid > .inverse-secondary.half-padding {
  padding: calc( var(--whiteSpace) / 2);
}

.grid.two-columns {
  grid-template-columns: repeat(2, 1fr);
}

.grid.three-columns {
  grid-template-columns: repeat(3, 1fr);
}

.grid.four-columns {
  grid-template-columns: repeat(4, 1fr);
}

.grid.six-columns {
  grid-template-columns: repeat(6, 1fr);
}

.grid.eight-columns {
  grid-template-columns: repeat(8, 1fr);
}

.grid > .double-columns {
  grid-column: auto / span 2;
}

.grid > .triple-columns {
  grid-column: auto / span 3;
}

.grid > .four-columns {
  grid-column: auto / span 4;
}

.grid > .double-rows {
  grid-row: auto / span 2;
}

.grid > .triple-rows {
  grid-row: auto / span 3;
}