@font-face {
      src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/TESLA.ttf");
      font-family: Tesla;
    }

    @font-face {
      src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFDinTextCompPro-Medium.ttf");
      font-family: pfd-medium;
    }


    .slider-wrapper {
      font-size: 25px;
      /* optional if you want rems */
      height: 100vh;
      /* full viewport height */
      /* hide scroll inside slider */
    }

    .slider {
      position: relative;
      height: 100%;
    }

    .slider--control {
      z-index: 50;
      position: absolute;
      top: calc(50% - 1.4rem);
      width: 1.7rem;
      height: 2.8rem;
      cursor: pointer;
    }

    .slider--control.left {
      left: 3rem;
    }

    .slider--control.right {
      right: 3rem;
    }

    /* .slider--control:after {
      content: "";
      position: absolute;
      display: block;
      top: -0.6rem;
      left: -1.15rem;
      width: 4rem;
      height: 4rem;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
    } */

    .slider--el {
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: transform 2.8s, z-index 0.1s;
      overflow: hidden;
    }

    .slider--el.active {
      z-index: 10;
    }

    .slider--el.active .slider--el-bg {
      transform: scale(0.834);
    }

    .slider--el.active .slider--el-content {
      opacity: 1;
    }

    .slider--el.next {
      z-index: 5;
    }

    .slider--el.next .slider--el-bg {
      transform: scale(0.834);
    }

    /* 5 parts */
    .slider--el.anim-5parts .part {
      position: absolute;
      top: 0;
      width: 20.1%;
      height: 100%;
      overflow: hidden;
      will-change: transform;
    }

    .slider--el.anim-5parts .part:before {
      content: "";
      display: block;
      position: absolute;
      background-size: cover;
      top: 0;
      width: 500%;
      height: 100%;
      background-image: url("../images/slider/6.webp");
    }

    .slider--el.anim-5parts .part.part-1 {
      left: 0%;
      transition: transform 1.1s 0.3s;
    }

    .slider--el.anim-5parts .part.part-1:before {
      left: 0%;
    }

    .slider--el.anim-5parts .part.part-2 {
      left: 20%;
      transition: transform 1.1s 0.5s;
    }

    .slider--el.anim-5parts .part.part-2:before {
      left: -100%;
    }

    .slider--el.anim-5parts .part.part-3 {
      left: 40%;
      transition: transform 1.1s 0.7s;
    }

    .slider--el.anim-5parts .part.part-3:before {
      left: -200%;
    }

    .slider--el.anim-5parts .part.part-4 {
      left: 60%;
      transition: transform 1.1s 0.5s;
    }

    .slider--el.anim-5parts .part.part-4:before {
      left: -300%;
    }

    .slider--el.anim-5parts .part.part-5 {
      left: 80%;
      transition: transform 1.1s 0.3s;
    }

    .slider--el.anim-5parts .part.part-5:before {
      left: -400%;
    }

    .slider--el.anim-5parts.removed .part {
      transform: translateY(100%);
    }

    /* 9 parts */
    .slider--el.anim-9parts .slider--el-bg {
      perspective: 2000;
    }

    .slider--el.anim-9parts .part {
      position: absolute;
      width: 33.5%;
      height: 33.5%;
      overflow: hidden;
      will-change: transform;
      transform-origin: 0% 100%;
    }

    .slider--el.anim-9parts .part:before {
      content: "";
      display: block;
      position: absolute;
      background-size: cover;
      width: 300%;
      height: 300%;
      background-image: url("../images/slider/3.webp");
    }

    .slider--el.anim-9parts .part.left-top {
      top: 0%;
      left: 0%;
      transition: transform 0.9s 0.5s, opacity 0.6s 0.9s;
    }

    .slider--el.anim-9parts .part.left-top:before {
      top: 0%;
      left: 0%;
    }

    .slider--el.anim-9parts .part.mid-top {
      top: 0%;
      left: 33.333%;
      transition: transform 0.9s 0.4s, opacity 0.6s 0.8s;
    }

    .slider--el.anim-9parts .part.mid-top:before {
      top: 0%;
      left: -100%;
    }

    .slider--el.anim-9parts .part.right-top {
      top: 0%;
      left: 66.666%;
      transition: transform 0.9s 0.5s, opacity 0.6s 0.9s;
    }

    .slider--el.anim-9parts .part.right-top:before {
      top: 0%;
      left: -200%;
    }

    .slider--el.anim-9parts .part.left-mid {
      top: 33.333%;
      left: 0%;
      transition: transform 0.9s 0.6s, opacity 0.6s 1s;
    }

    .slider--el.anim-9parts .part.left-mid:before {
      top: -100%;
      left: 0%;
    }

    .slider--el.anim-9parts .part.mid-mid {
      top: 33.333%;
      left: 33.333%;
      transition: transform 0.9s 0.3s, opacity 0.6s 0.7s;
    }

    .slider--el.anim-9parts .part.mid-mid:before {
      top: -100%;
      left: -100%;
    }

    .slider--el.anim-9parts .part.right-mid {
      top: 33.333%;
      left: 66.666%;
      transition: transform 0.9s 0.6s, opacity 0.6s 1s;
    }

    .slider--el.anim-9parts .part.right-mid:before {
      top: -100%;
      left: -200%;
    }

    .slider--el.anim-9parts .part.left-bot {
      top: 66.666%;
      left: 0%;
      transition: transform 0.9s 0.7s, opacity 0.6s 1.1s;
    }

    .slider--el.anim-9parts .part.left-bot:before {
      top: -200%;
      left: 0%;
    }

    .slider--el.anim-9parts .part.mid-bot {
      top: 66.666%;
      left: 33.333%;
      transition: transform 0.9s 0.8s, opacity 0.6s 1.2s;
    }

    .slider--el.anim-9parts .part.mid-bot:before {
      top: -200%;
      left: -100%;
    }

    .slider--el.anim-9parts .part.right-bot {
      top: 66.666%;
      left: 66.666%;
      transition: transform 0.9s 0.7s, opacity 0.6s 1.1s;
    }

    .slider--el.anim-9parts .part.right-bot:before {
      top: -200%;
      left: -200%;
    }

    .slider--el.anim-9parts.removed .part {
      transform: rotateX(90deg);
      opacity: 0;
    }

    /* 3 parts */
    .slider--el.anim-3parts .part {
      position: absolute;
      top: 0;
      width: 33.5%;
      height: 100%;
      overflow: hidden;
      transition: transform 1.5s 0.3s;
    }

    .slider--el.anim-3parts .part:before {
      content: "";
      display: block;
      position: absolute;
      background-size: cover;
      width: 300%;
      height: 100%;
      background-image: url("../images/slider/4.webp");
    }

    .slider--el.anim-3parts .part.left {
      left: 0;
    }

    .slider--el.anim-3parts .part.left:before {
      left: 0;
    }

    .slider--el.anim-3parts .part.mid {
      left: 33.333%;
    }

    .slider--el.anim-3parts .part.mid:before {
      left: -100%;
    }

    .slider--el.anim-3parts .part.right {
      left: 66.666%;
    }

    .slider--el.anim-3parts .part.right:before {
      left: -200%;
    }

    .slider--el.anim-3parts.removed .left {
      transform: translate3D(-100%, -33.333%, 0);
    }

    .slider--el.anim-3parts.removed .mid {
      transform: translate3D(0, 100%, 0);
    }

    .slider--el.anim-3parts.removed .right {
      transform: translate3D(100%, -33.333%, 0);
    }

    /* 4 parts */
    .slider--el.anim-4parts .part {
      position: absolute;
      width: 50.2%;
      height: 50.2%;
      overflow: hidden;
    }

    .slider--el.anim-4parts .part:before {
      content: "";
      display: block;
      position: absolute;
      background-size: cover;
      width: 200%;
      height: 200%;
      background-image: url("../images/slider/1.webp");
    }

    .slider--el.anim-4parts .part.top {
      top: 0;
      transition: transform 1.3s 0.3s;
    }

    .slider--el.anim-4parts .part.top:before {
      top: 0;
    }

    .slider--el.anim-4parts .part.bot {
      top: 50%;
      transition: transform 1.3s 0.5s;
    }

    .slider--el.anim-4parts .part.bot:before {
      top: -100%;
    }

    .slider--el.anim-4parts .part.left {
      left: 0;
    }

    .slider--el.anim-4parts .part.left:before {
      left: 0;
    }

    .slider--el.anim-4parts .part.right {
      left: 50%;
    }

    .slider--el.anim-4parts .part.right:before {
      left: -100%;
    }

    .slider--el.anim-4parts.removed .left {
      transform: translateX(-100%);
    }

    .slider--el.anim-4parts.removed .right {
      transform: translateX(100%);
    }



    .slider--el-bg {
      position: absolute;
      top: -10%;
      left: -10%;
      width: 120%;
      height: 120%;
      background-size: cover;
      transition: transform 1s 1s;
    }

    .slider--el-bg .part:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.15);
    }

    .slider--el-content {
      position: absolute;
      inset: 0;
      /* shorthand for top:0; left:0; right:0; bottom:0 */
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2rem;
      /* small padding for breathing room */
      text-align: center;
      transition: opacity 0.3s;
      opacity: 0;
    }

    .slider--el-heading {
      font-size: clamp(2rem, 6vw, 9rem);
      /* scales automatically */
      font-family: "DM Sans", sans-serif;
      text-transform: uppercase;
      color: #fff;
      line-height: 1.2;
    }

    .slider--el.removed .slider--el-content {
      opacity: 0;
    }