.cover_basic_runner {
  $from_c: var(--from_x);
  $to_c: var(--to_x);
  top: 0px;
  left: 0px;
  display: block;
  position: absolute;
  $strip_a: #cccccc;
  $strip_b: #dbdbdb;
  $red: rgba(255, 0, 0, .3);
  $blue: rgba(0, 0, 255, .8);
  $strip_ac: rgba(122, 122, 122, 0.8);
  $strip_bc: rgba(65, 65, 65, 0.8);

  $hk1: rgba(#3f87a6, 0.9);
  $hk2: rgba(#ebf8e1, 0.7);
  $hk3: rgba(#ffb564, 0.9);
  $hk4: rgba(#ffb564, 0.93);
  $hk5: rgba(#ffb564, 0.3);
  $hk5g: rgba(#e04242, 0.51);

  $hkfrom: rgba($from_c, 0.3);
  $hkfromh: rgba($from_c, 0.9);
  $hkto: rgba($to_c, 0.3);
  $hktoh: rgba($to_c, 0.9);

  &.b0 {
    background-color: $from_c;
    background-blend-mode: overlay;
    background-repeat: repeat-x;
  }


  &.b1 {
    background-color: $to_c;
    background-blend-mode: overlay;
    background-repeat: repeat-x;
  }

  &.b3 {
    background-color: $hk1;
    background-blend-mode: overlay;
    background-repeat: repeat-x;
  }

  &.b4 {
    background-color: $hk2;
    background-blend-mode: overlay;
    background-repeat: repeat-x;
  }

  &.b5 {
    background-color: $hk3;
    background-blend-mode: overlay;
    background-repeat: repeat-x;
  }

  &.b6 {
    background-color: $hk4;
    background-blend-mode: overlay;
    background-repeat: repeat-x;
  }

  // background-image: repeating-linear-gradient(110deg, $strip_a, $strip_a 30px, $strip_b 30px, $strip_b 60px);
  &.n0 {
    background-image: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
    linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
  }

  &.n9 {
    background-image: linear-gradient(0.25turn, $hkfrom, $hk5g);
  }

  &.n1 {
    background-image: linear-gradient(0.25turn, $hk1, $hk2, $hk3);
  }

  &.n2 {
    background-image: radial-gradient($hk2, $hk4);
  }

  &.n3 {
    background-image: repeating-linear-gradient(-45deg, $red, $red 5px, $blue 5px, $blue 10px);;
  }

  &.n4 {
    background-image: repeating-linear-gradient(-45deg, $red, $red 5px, $blue 5px, $blue 50px);;
  }

  &.n5 {
    background-image: repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
            rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
            rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
            rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
            rgba(255, 0, 0, 0.5) 300px),
    repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
                    rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
                    rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
                    rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
                    rgba(255, 0, 0, 0.5) 230px);
  }

  &.n6 {
    background-image: repeating-linear-gradient(
                    90deg, transparent 0 50px,
                    rgba(255, 127, 0, 0.25) 50px 56px,
                    transparent 56px 63px,
                    rgba(255, 127, 0, 0.25) 63px 69px,
                    transparent 69px 116px,
                    rgba(255, 206, 0, 0.25) 116px 166px),
    repeating-linear-gradient(0deg, transparent 0 50px,
                    rgba(255, 127, 0, 0.25) 50px 56px,
                    transparent 56px 63px,
                    rgba(255, 127, 0, 0.25) 63px 69px,
                    transparent 69px 116px,
                    rgba(255, 206, 0, 0.25) 116px 166px),
    repeating-linear-gradient(-45deg, transparent 0 5px, rgba(143, 77, 63, 0.25) 5px 10px),
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(143, 77, 63, 0.25) 5px 10px);
  }

  &.n7 {
    background-image: repeating-radial-gradient($strip_ac, $strip_ac 5px, $strip_bc 5px, $strip_bc 10px);
  }

  &.n8 {
    background-image: conic-gradient(at 0% 30%, $strip_bc 10%, $blue 30%, $strip_ac 50%);
  }

  &.s1 {
    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  }

  &.s2 {
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
  }

  &.s3 {
    background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
  }

  &.s4 {
    background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
  }

  &.s5 {
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
  }

  &.s6 {
    background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
  }

  &.s7 {
    background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
  }

  &.s8 {
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  }

  &.s9 {
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
  }

  &.s10 {
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
  }
  &.s11{
    background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
  }
}