.fc_spacer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(32px, 3.268vw + 13.176px, 72px);

  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  &::before {
    background-color: var(--before-bg);
  }
  &::after {
    background-color: var(--after-bg);
  }

  /* colours */
  /* top */
  &.top_white {
    --before-bg: var(--color-white);
  }
  &.top_light_grey {
    --before-bg: var(--color-light-grey);
  }
  &.top_teal {
    --before-bg: var(--color-teal);
  }
  &.top_dark_teal {
    --before-bg: var(--color-dark-teal);
  }
  &.top_light_green {
    --before-bg: var(--color-light-green);
  }
  &.top_orange {
    --before-bg: var(--color-orange);
  }
  /* bottom */
  &.bottom_white {
    --after-bg: var(--color-white);
  }
  &.bottom_light_grey {
    --after-bg: var(--color-light-grey);
  }
  &.bottom_teal {
    --after-bg: var(--color-teal);
  }
  &.bottom_dark_teal {
    --after-bg: var(--color-dark-teal);
  }
  &.bottom_light_green {
    --after-bg: var(--color-light-green);
  }
  &.bottom_orange {
    --after-bg: var(--color-orange);
  }

  /* direction */
  &.left {
    &::before {
      clip-path: polygon(0 -1%, 100% -1%, 100% 90%, 0 10%);
    }
    &::after {
      clip-path: polygon(0 10%, 100% 90%, 100% 101%, 0 101%);
    }
  }
  &.right {
    &::before {
      clip-path: polygon(0 -1%, 100% -1%, 100% 10%, 0 90%);
    }
    &::after {
      clip-path: polygon(0 90%, 100% 10%, 100% 101%, 0 101%);
    }
  }
}