@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(10dvw * 14 * -1));
  }
}

.carousel__wrapper {
  display: flex;
  align-items: center;

  width: calc(14 * 10dvw);
  overflow: hidden;
  margin: 0 auto;
}

.carousel {
  --no-of-slides: 20;
  --slides-in-view: 5;
  --slide-width: 10dvw;
  --slide-height: 35dvh;
  --iteration-time: 25s;

  overflow: hidden;
  width: 80dvw;
  height: 40dvh;
  margin-left: 10dvw;
}

.carousel__image {
  background-size: contain;
  background-repeat: no-repeat;

  height: 70%;
  width: calc(10dvw * 0.75);
  margin: 15px 20px;
}

.carousel__slide {
  animation: scroll 30s linear infinite;
  display: flex;
  flex-direction: column;

  flex: 0 0 auto;
  width: 10dvw;
  height: 20dvh;
  box-sizing: border-box;
  /*border: 1px dotted darkblue;*/
}

@media (min-width: 1501px) and (max-width: 2000px) {
  .carousel {
    --no-of-slides: 14;
    --slides-in-view: 5;
    --slide-width: 15dvw;
    --slide-height: 35dvh;
    --iteration-time: 30s;

    overflow: hidden;
    width: 80dvw;
    height: 35dvh;
    margin-left: 10dvw;
  }

  .carousel__image {
    background-size: contain;
    background-repeat: no-repeat;

    height: 50%;
    width: calc(15dvw * 0.75);
    margin: 15px 20px;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(15dvw * 14 * -1));
    }
  }

  .carousel__slide {
    animation: scroll 30s linear infinite;
    display: flex;
    flex-direction: column;

    flex: 0 0 auto;
    width: 15dvw;
    height: 35dvh;
    box-sizing: border-box;
    /*border: 1px dotted darkblue;*/
  }

  .carousel__wrapper {
    display: flex;
    align-items: center;

    width: calc(5 * 15dvw);
    overflow: hidden;
    margin: 0 auto;
  }
}

@media (min-width: 801px) and (max-width: 1500px) {
  .carousel {
    --no-of-slides: 14;
    --slides-in-view: 5;
    --slide-width: 20dvw;
    --slide-height: 35dvh;
    --iteration-time: 30s;

    overflow: hidden;
    width: 80dvw;
    height: 35dvh;
    margin-left: 10dvw;
  }

  .carousel__image {
    background-size: contain;
    background-repeat: no-repeat;

    height: 50%;
    width: calc(20dvw * 0.75);
    margin: 15px 20px;
  }

  .carousel__slide {
    animation: scroll 30s linear infinite;
    display: flex;
    flex-direction: column;

    flex: 0 0 auto;
    width: 20dvw;
    height: 35dvh;
    box-sizing: border-box;
    /*border: 1px dotted darkblue;*/
  }
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(20dvw * 14 * -1));
    }
  }

  .carousel__wrapper {
    display: flex;
    align-items: center;

    width: calc(14 * 20dvw);
    overflow: hidden;
    margin: 0 auto;
  }
}

@media (max-width: 800px) {
  .carousel {
    --no-of-slides: 14;
    --slides-in-view: 5;
    --slide-width: 30dvw;
    --slide-height: 20dvh;
    --iteration-time: 35s;

    overflow: hidden;
    width: 85svw;
    height: 30svh;
    margin-left: 7.5dvw;
  }

  .carousel__image {
    background-size: contain;
    background-repeat: no-repeat;

    height: 50%;
    width: calc(30dvw * 0.75);
    margin: 15px 20px;
  }

  .carousel__slide {
    animation: scroll 30s linear infinite;
    display: flex;
    flex-direction: column;

    flex: 0 0 auto;
    width: 30vw;
    height: 20vh;
    box-sizing: border-box;
    /*border: 1px dotted darkblue;*/
  }
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(30vw * 14 * -1));
    }
  }
  @-webkit-keyframes scroll {
    0% {
      -webkit-transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(calc(30vw * 14 * -1));
    }
  }

  .carousel__wrapper {
    display: flex;
    align-items: center;

    width: calc(14 * 30dvw);
    overflow: hidden;
    margin: 0 auto;
  }
}

.carousel_image_zoomedout {
  position: fixed;
  top: 0;
  left: 0;
}

.carousel_image_zoomedout_center {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 710px;
  max-width: 1060px;
  width: 60svw;
  height: min(40svw, 77svh);
}

.carousel_image_zoomedout_exit {
  position: relative;
  left: calc(100% - 64px);
  background-image: url("close_icon.png");
  background-size: 100%;
  opacity: 0.65;
  transition: 0.35s;
}

.carousel_image_move_next {
  position: absolute;
  left: calc(100% + 15px);
  background-image: url("carousel_forward.png");
  background-size: 100%;
  opacity: 0.65;
  transition: 0.35s;
  top: calc(50% - 64px);
  cursor: pointer;
}

.carousel_image_move_back {
  position: absolute;
  left: -79px;
  background-image: url("carousel_back.png");
  background-size: 100%;
  opacity: 0.65;
  transition: 0.35s;
  top: calc(50% - 64px);
  cursor: pointer;
}

.carousel_image_zoomedout_exit:hover {
  opacity: 1;
}
.carousel_image_move_next:hover {
  opacity: 1;
}
.carousel_image_move_back:hover {
  opacity: 1;
}