.banner {
  width: 100%;
  --base_banner_height: 24px;
  --banner_height: var(--base_banner_height); /*default*/
  --base_dot_size: 4.2vw;
  --dot_size: var(--base_dot_size); /*default*/
  height: min(var(--dot_size), var(--banner_height));

  background-image: url(../docs/banners/banner_1.svg); /*default*/
  background-size: contain;
  background-repeat: repeat;
  background-position-x: 0%;

  animation-duration: 10s; /*default*/
  animation-name: slide_svg;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: normal;
}
@keyframes slide_svg {
  from {
    background-position-x: 0%;
  }
  to {
    background-position-x: 100%;
  }
}

/*
* speeds
*
*/
.banner_pause {
  animation-play-state: paused;
}
.banner_reverse {
  animation-direction: reverse;
}
.banner_speed_10 {
  animation-duration: 10s;
}
.banner_speed_20 {
  animation-duration: 20s;
}
.banner_speed_30 {
  animation-duration: 30s;
}
.banner_speed_40 {
  animation-duration: 40s;
}
.banner_speed_50 {
  animation-duration: 50s;
}

/*
* sizes
*
*/
.banner_size_0 {
  background-image: url(../docs/banners/banner_0.svg);
  --banner_height: calc(var(--base_banner_height) * 1);
  --dot_size: calc(var(--base_dot_size) * 1);
}
.banner_size_00 {
  background-image: url(../docs/banners/banner_00.svg);
  --banner_height: calc(var(--base_banner_height) * 1);
  --dot_size: calc(var(--base_dot_size) * 1);
}
.banner_size_1 {
  background-image: url(../docs/banners/banner_1.svg);
  --banner_height: calc(var(--base_banner_height) * 1);
  --dot_size: calc(var(--base_dot_size) * 1);
}
.banner_size_2 {
  background-image: url(../docs/banners/banner_2.svg);
  --banner_height: calc(var(--base_banner_height) * 2);
  --dot_size: calc(var(--base_dot_size) * 2);
}
.banner_size_3 {
  background-image: url(../docs/banners/banner_3.svg);
  --banner_height: calc(var(--base_banner_height) * 3);
  --dot_size: calc(var(--base_dot_size) * 3);
}
.banner_size_4 {
  background-image: url(../docs/banners/banner_4.svg);
  --banner_height: calc(var(--base_banner_height) * 4);
  --dot_size: calc(var(--base_dot_size) * 4);
}
.banner_size_5 {
  background-image: url(../docs/banners/banner_5.svg);
  --banner_height: calc(var(--base_banner_height) * 5);
  --dot_size: calc(var(--base_dot_size) * 5);
}