body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #ECEFFC;
}

.carousel {
  --carousel-width: 600px;
  --carousel-height: 400px;
  --navdots-height: 24px;
  --active-index: 0;

  // main function - sliding
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--carousel-width);
  height: var(--carousel-height);

  .slides {
    display: flex;
    padding: 0;
    margin: 0;
    overflow: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overscroll-behavior: contain;
    list-style-type: none;

    img {
      width: var(--carousel-width);
      height: calc(var(--carousel-height) - var(--navdots-height));
      scroll-snap-align: start;
    }
  }

  // dots
  .nav-dots {
    display: flex;
    justify-content: space-around;
    height: var(--navdots-height);
    padding: 20px 0 0 0;
    margin: 0;
    list-style-type: none;

    .dot a {
      position: relative;
      display: block;
      width: calc(var(--navdots-height) / 2);
      height: 50%;

      &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 50%;
      }

      &:hover::before {
        background: rgba(0, 0, 0, 0.4);
      }

      &.active::before {
        background: rgba(0, 0, 0, 0.6);
      }
    }
  }

  // arrows
  .nav-arrows {
    margin: 0;
    list-style-type: none;

    li {
      position: absolute;
      bottom: calc(50%);
      width: 2em;
      height: 2em;
      border: 5px solid black;
      cursor: pointer;

      &.arrow-left {
        left: -50px;
        border-right-color: transparent;
        border-bottom-color: transparent;
        transform: rotate(-45deg);
        transition: 1s cubic-bezier(0.2, 1, 0.3, 1);
      }

      &.arrow-right {
        right: -50px;
        border-left-color: transparent;
        border-bottom-color: transparent;
        transform: rotate(45deg);
        transition: 1s cubic-bezier(0.2, 1, 0.3, 1);
      }

      &.arrow-left::before {
        position: absolute;
        content: "";
        top: calc(-13%);
        left: calc(-15%);
        width: inherit;
        height: inherit;
        border: inherit;
      }

      &.arrow-left:hover {
        border-left-color: #e74c3c;
        border-top-color: #e74c3c;
      }

      &.arrow-left:hover::before {
        border-left-color: #e74c3c;
        border-top-color: #e74c3c;
        animation: fadeToLeft 2.5s cubic-bezier(0.2, 1, 0.3, 1) infinite;
      }

      &.arrow-right::before {
        position: absolute;
        content: "";
        top: calc(-13%);
        left: calc(-15%);
        width: inherit;
        height: inherit;
        border: inherit;
      }

      &.arrow-right:hover {
        border-right-color: #e74c3c;
        border-top-color: #e74c3c;
      }

      &.arrow-right:hover::before {
        border-right-color: #e74c3c;
        border-top-color: #e74c3c;
        animation: fadeToRight 2.5s cubic-bezier(0.2, 1, 0.3, 1) infinite;
      }
    }
  }
}

@keyframes fadeToLeft {
  5% {
    transform: translate(10%, 10%);
  }

  to {
    transform: translate(-100%, -100%);
    opacity: 0;
  }
}

@keyframes fadeToRight {
  5% {
    transform: translate(-10%, 10%);
  }

  to {
    transform: translate(100%, -100%);
    opacity: 0;
  }
}
