.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_navy {
    --before-bg: var(--color-navy);
  }
  &.top_blue {
    --before-bg: var(--color-blue);
  }
  &.top_green {
    --before-bg: var(--color-green);
  }
  &.top_pink {
    --before-bg: var(--color-pink);
  }
  /* bottom */
  &.bottom_white {
    --after-bg: var(--color-white);
  }
  &.bottom_navy {
    --after-bg: var(--color-navy);
  }
  &.bottom_blue {
    --after-bg: var(--color-blue);
  }
  &.bottom_green {
    --after-bg: var(--color-green);
  }
  &.bottom_pink {
    --after-bg: var(--color-pink);
  }

  /* 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%);
    }
  }
}