.side-triangle {
  position: relative;
  color: #FFF;
  background-color: #2B3C4E;
  filter: drop-shadow(0px 3.435px 2.748px rgba(0, 0, 0, 0.03)) drop-shadow(0px 8.687px 6.95px rgba(0, 0, 0, 0.05)) drop-shadow(0px 17.721px 14.177px rgba(0, 0, 0, 0.06)) drop-shadow(0px 36.502px 29.201px rgba(0, 0, 0, 0.08)) drop-shadow(0px 100px 80px rgba(0, 0, 0, 0.11));

  &::before, &::after {
    content: '';
    position: absolute;
    right: calc(100% - 1px);
    top: 0;
    bottom: 0;
    width: 24px;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D'276'%20height%3D'61'%20viewBox%3D'0%200%20276%2061'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M11.5341%205.83662C13.3535%202.25571%2017.0298%203.5257e-06%2021.0464%209.12268e-06L254.488%200.000334415C258.44%200.000339922%20262.068%202.18472%20263.918%205.6773L274.356%2025.3917C276.01%2028.5148%20276.01%2032.254%20274.356%2035.3771L263.918%2055.0914C262.068%2058.584%20258.44%2060.7684%20254.488%2060.7684L20.9388%2060.7681C16.9787%2060.7681%2013.3442%2058.5747%2011.4987%2055.0709L1.3563%2035.8156C-0.257192%2032.7524%20-0.284077%2029.0967%201.28419%2026.0101L11.5341%205.83662Z'%20fill%3D'%232B3C4E'%2F%3E%3C%2Fsvg%3E");
    background-position: left;
    background-size: cover;
  }
  &::after {
    left: calc(100% - 1px);
    width: 24px;
    background-position: right;
    background-size: cover;
  }

  &.remove-left {
    &::before {
      display: none;
    }

    &::after {
      right: 0px;
      width: 24px;
      z-index: -1;
    }
  }

  &.remove-right {
    &::after {
      display: none;
    }

    &::before {
      left: -24px;
      width: 24px;
    }
  }

	&.side-triangle--lightgrey {
    background-color: #D4D6D8;

    &::before, &::after {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D'276'%20height%3D'61'%20viewBox%3D'0%200%20276%2061'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M11.5341%205.83662C13.3535%202.25571%2017.0298%203.5257e-06%2021.0464%209.12268e-06L254.488%200.000334415C258.44%200.000339922%20262.068%202.18472%20263.918%205.6773L274.356%2025.3917C276.01%2028.5148%20276.01%2032.254%20274.356%2035.3771L263.918%2055.0914C262.068%2058.584%20258.44%2060.7684%20254.488%2060.7684L20.9388%2060.7681C16.9787%2060.7681%2013.3442%2058.5747%2011.4987%2055.0709L1.3563%2035.8156C-0.257192%2032.7524%20-0.284077%2029.0967%201.28419%2026.0101L11.5341%205.83662Z'%20fill%3D'%23D4D6D8'%2F%3E%3C%2Fsvg%3E");
    }
  }

  &.side-triangle--grey {
    background-color: #777777;

    &::before, &::after {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D'276'%20height%3D'61'%20viewBox%3D'0%200%20276%2061'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M11.5341%205.83662C13.3535%202.25571%2017.0298%203.5257e-06%2021.0464%209.12268e-06L254.488%200.000334415C258.44%200.000339922%20262.068%202.18472%20263.918%205.6773L274.356%2025.3917C276.01%2028.5148%20276.01%2032.254%20274.356%2035.3771L263.918%2055.0914C262.068%2058.584%20258.44%2060.7684%20254.488%2060.7684L20.9388%2060.7681C16.9787%2060.7681%2013.3442%2058.5747%2011.4987%2055.0709L1.3563%2035.8156C-0.257192%2032.7524%20-0.284077%2029.0967%201.28419%2026.0101L11.5341%205.83662Z'%20fill%3D'%23777777'%2F%3E%3C%2Fsvg%3E");
    }
  }

  &.side-triangle--dark {
    background-color: #494949;

    &::before, &::after {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D'276'%20height%3D'61'%20viewBox%3D'0%200%20276%2061'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M11.5341%205.83662C13.3535%202.25571%2017.0298%203.5257e-06%2021.0464%209.12268e-06L254.488%200.000334415C258.44%200.000339922%20262.068%202.18472%20263.918%205.6773L274.356%2025.3917C276.01%2028.5148%20276.01%2032.254%20274.356%2035.3771L263.918%2055.0914C262.068%2058.584%20258.44%2060.7684%20254.488%2060.7684L20.9388%2060.7681C16.9787%2060.7681%2013.3442%2058.5747%2011.4987%2055.0709L1.3563%2035.8156C-0.257192%2032.7524%20-0.284077%2029.0967%201.28419%2026.0101L11.5341%205.83662Z'%20fill%3D'%23494949'%2F%3E%3C%2Fsvg%3E");
    }
  }

  &.side-triangle--red {
    background-color: #ED0000;

    &::before, &::after {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D'276'%20height%3D'61'%20viewBox%3D'0%200%20276%2061'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M11.5341%205.83662C13.3535%202.25571%2017.0298%203.5257e-06%2021.0464%209.12268e-06L254.488%200.000334415C258.44%200.000339922%20262.068%202.18472%20263.918%205.6773L274.356%2025.3917C276.01%2028.5148%20276.01%2032.254%20274.356%2035.3771L263.918%2055.0914C262.068%2058.584%20258.44%2060.7684%20254.488%2060.7684L20.9388%2060.7681C16.9787%2060.7681%2013.3442%2058.5747%2011.4987%2055.0709L1.3563%2035.8156C-0.257192%2032.7524%20-0.284077%2029.0967%201.28419%2026.0101L11.5341%205.83662Z'%20fill%3D'%23ED0000'%2F%3E%3C%2Fsvg%3E");
    }
  }
}.side-triangle2 {
  position: relative;
  color: #FFF;
  background-color: #2B3C4E;

  &::before, &::after {
    content: '';
    position: absolute;
    right: calc(100% - 1px);
    top: 0;
    bottom: 0;
    width: 24px;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D'276'%20height%3D'61'%20viewBox%3D'0%200%20276%2061'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M11.5341%205.83662C13.3535%202.25571%2017.0298%203.5257e-06%2021.0464%209.12268e-06L254.488%200.000334415C258.44%200.000339922%20262.068%202.18472%20263.918%205.6773L274.356%2025.3917C276.01%2028.5148%20276.01%2032.254%20274.356%2035.3771L263.918%2055.0914C262.068%2058.584%20258.44%2060.7684%20254.488%2060.7684L20.9388%2060.7681C16.9787%2060.7681%2013.3442%2058.5747%2011.4987%2055.0709L1.3563%2035.8156C-0.257192%2032.7524%20-0.284077%2029.0967%201.28419%2026.0101L11.5341%205.83662Z'%20fill%3D'%232B3C4E'%2F%3E%3C%2Fsvg%3E");
    background-position: left;
    background-size: cover;
  }
  &::after {
    left: calc(100% - 1px);
    width: 24px;
    background-position: right;
    background-size: cover;
  }

  &.remove-left {
    &::before {
      display: none;
    }

    &::after {
      right: 0px;
      width: 24px;
      z-index: -1;
    }
  }

  &.remove-right {
    &::after {
      display: none;
    }

    &::before {
      left: -24px;
      width: 24px;
    }
  }

	&.side-triangle--lightgrey {
    background-color: #D4D6D8;

    &::before, &::after {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D'276'%20height%3D'61'%20viewBox%3D'0%200%20276%2061'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M11.5341%205.83662C13.3535%202.25571%2017.0298%203.5257e-06%2021.0464%209.12268e-06L254.488%200.000334415C258.44%200.000339922%20262.068%202.18472%20263.918%205.6773L274.356%2025.3917C276.01%2028.5148%20276.01%2032.254%20274.356%2035.3771L263.918%2055.0914C262.068%2058.584%20258.44%2060.7684%20254.488%2060.7684L20.9388%2060.7681C16.9787%2060.7681%2013.3442%2058.5747%2011.4987%2055.0709L1.3563%2035.8156C-0.257192%2032.7524%20-0.284077%2029.0967%201.28419%2026.0101L11.5341%205.83662Z'%20fill%3D'%23D4D6D8'%2F%3E%3C%2Fsvg%3E");
    }
  }

  &.side-triangle--grey {
    background-color: #777777;

    &::before, &::after {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D'276'%20height%3D'61'%20viewBox%3D'0%200%20276%2061'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M11.5341%205.83662C13.3535%202.25571%2017.0298%203.5257e-06%2021.0464%209.12268e-06L254.488%200.000334415C258.44%200.000339922%20262.068%202.18472%20263.918%205.6773L274.356%2025.3917C276.01%2028.5148%20276.01%2032.254%20274.356%2035.3771L263.918%2055.0914C262.068%2058.584%20258.44%2060.7684%20254.488%2060.7684L20.9388%2060.7681C16.9787%2060.7681%2013.3442%2058.5747%2011.4987%2055.0709L1.3563%2035.8156C-0.257192%2032.7524%20-0.284077%2029.0967%201.28419%2026.0101L11.5341%205.83662Z'%20fill%3D'%23777777'%2F%3E%3C%2Fsvg%3E");
    }
  }

  &.side-triangle--dark {
    background-color: #494949;

    &::before, &::after {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D'276'%20height%3D'61'%20viewBox%3D'0%200%20276%2061'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M11.5341%205.83662C13.3535%202.25571%2017.0298%203.5257e-06%2021.0464%209.12268e-06L254.488%200.000334415C258.44%200.000339922%20262.068%202.18472%20263.918%205.6773L274.356%2025.3917C276.01%2028.5148%20276.01%2032.254%20274.356%2035.3771L263.918%2055.0914C262.068%2058.584%20258.44%2060.7684%20254.488%2060.7684L20.9388%2060.7681C16.9787%2060.7681%2013.3442%2058.5747%2011.4987%2055.0709L1.3563%2035.8156C-0.257192%2032.7524%20-0.284077%2029.0967%201.28419%2026.0101L11.5341%205.83662Z'%20fill%3D'%23494949'%2F%3E%3C%2Fsvg%3E");
    }
  }

  &.side-triangle--red {
    background-color: #ED0000;

    &::before, &::after {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D'276'%20height%3D'61'%20viewBox%3D'0%200%20276%2061'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M11.5341%205.83662C13.3535%202.25571%2017.0298%203.5257e-06%2021.0464%209.12268e-06L254.488%200.000334415C258.44%200.000339922%20262.068%202.18472%20263.918%205.6773L274.356%2025.3917C276.01%2028.5148%20276.01%2032.254%20274.356%2035.3771L263.918%2055.0914C262.068%2058.584%20258.44%2060.7684%20254.488%2060.7684L20.9388%2060.7681C16.9787%2060.7681%2013.3442%2058.5747%2011.4987%2055.0709L1.3563%2035.8156C-0.257192%2032.7524%20-0.284077%2029.0967%201.28419%2026.0101L11.5341%205.83662Z'%20fill%3D'%23ED0000'%2F%3E%3C%2Fsvg%3E");
    }
  }
}