.u-margin-auto {
  margin: auto;
}

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

.u-fw-bold {
  @include font-weight(bold);
}

.u-bg-wrapper {
  position: relative;
  // Prevent collapsing margins
  display: inline-block;
  width: 100%;
}

.u-spacing-mv {
  @include vspacing(
      'margin-top' 1,
      'margin-bottom' 1
  )
}

.u-spacing-mv- {
  @include vspacing(
      'margin-top' 0.75,
      'margin-bottom' 0.75
  )
}

.u-spacing-pv {
  @include vspacing(
      'padding-top' 1,
      'padding-bottom' 1
  )
}

.u-spacing-pv-- {
  @include vspacing(
      'padding-top' 0.5,
      'padding-bottom' 0.5
  )
}

.u-bg-primary-gradient {
  background: linear-gradient(palette(primary, 500), palette(primary, 700));
}

.u-bg-triangle-primary {
  @include bg-triangle-shade(primary);

  &[data-origin="topleft"] {
    @include bg-triangle-shade(primary, topleft);
  }
}

.u-bg-triangle-neutral {
  @include bg-triangle-shade(neutral);

  &[data-origin="topleft"] {
    @include bg-triangle-shade(neutral, topleft);
  }
  &[data-origin="topright"] {
    @include bg-triangle-shade(neutral, topright);
  }
  &[data-origin="bottomleft"] {
    @include bg-triangle-shade(neutral, bottomleft);
  }
}

.u-ornament-triangle {
  position: relative;

  &::before {
    pointer-events: none;
    content: '';
    display: block;
    position: absolute;
    width: 11.41vw;
    height: 6.61vw;
    top: 0;
    right: 0;
    background-image: linear-gradient(30deg, transparent 50%, palette(secondary, 500) 50.5%);
  }

  &[data-pos="topright"] {
    margin-bottom: 6.61vw;
  }

  &[data-pos="topleft"] {
    margin-bottom: 6.61vw;
    transform: rotateY(180deg);
  }

  &[data-pos="bottomleft"] {
    margin-top: 6.61vw;
    transform: rotate(180deg);
  }

  &[data-pos="bottomright"] {
    margin-top: 6.61vw;
    transform: rotateX(180deg);
  }
}