.align-left,
.align-right,
.align-center {
  margin: 0 auto var(--si-space-28);
}

figure.align-center, figure.align-left, figure.align-right {
  display: table;
}
figure.align-center {
  margin: var(--si-space-28) auto;
}
figure.align-left, figure.align-right {
  float: none;
}
@media (min-width: 768px) {
  figure .align-left {
    float: left;
    margin: 0 var(--si-space-28) var(--si-space-28) 0;
  }
  figure .align-right {
    float: right;
    margin: 0 0 var(--si-space-28) var(--si-space-28);
  }
}

.l-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--si-space-28);
}

.l-flex__alignment--start {
  justify-content: flex-start;
}

.l-flex__alignment--center {
  justify-content: center;
}

.l-flex__alignment--end {
  justify-content: flex-end;
}

.l-flex__alignment--end {
  justify-content: flex-end;
}

.l-flex__alignment--between {
  justify-content: space-between;
}

.l-flex__alignment--around {
  justify-content: space-around;
}

.l-flex__no-gap {
  gap: 0;
}

.l-flex__no-wrap {
  flex-wrap: nowrap;
}

.l-flex-fill {
  flex: 1 1 auto;
}

[class*=l-constrained] {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--si-width-xlarge);
  width: 100%;
}

[class*=l-constrained] [class*=l-constrained] {
  margin-left: 0;
  margin-right: 0;
}

.l-constrained {
  max-width: var(--si-width-xlarge);
}

.l-constrained__width--narrow {
  max-width: var(--si-width-medium);
}

.l-constrained__width--wide {
  max-width: var(--si-width-xxlarge);
}

.l-constrained__width--full {
  width: 100%;
}

.bp-tablet, .bp-desk {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  visibility: hidden;
}

@media (min-width: 768px) {
  .bp-mobile {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    visibility: hidden;
  }
  .lp-builder .bp-mobile {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: medium none currentcolor;
    border: initial;
    visibility: visible;
  }
  .bp-tablet {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: medium none currentcolor;
    border: initial;
    visibility: visible;
  }
}
@media (min-width: 992px) {
  .bp-tablet {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    visibility: hidden;
  }
  .lp-builder .bp-tablet {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: medium none currentcolor;
    border: initial;
    visibility: visible;
  }
  .bp-desk {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: medium none currentcolor;
    border: initial;
    visibility: visible;
  }
}