#carousel {
  padding: 0 !important;
  box-shadow: 0px 0px 30px  #BB00FF;
  margin-bottom: 20vh;
  width:100% !important;
}
.splide {
  width: 100%;
  background-color: var(--dark-blue);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  padding: 24px !important;
  margin-bottom: 0 !important;
  box-sizing: border-box;
}
.splide img {
  border-radius: 6px;
}
.splide__slide {
  padding-top: 12px;
  padding-bottom: 12px;
}
.splide__slide img {
  box-shadow: 0 0 12px rgb(0 0 0 / 30%);
  height: 320px;
}
.splide__track {
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 15% 85%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 15% 85%,
    rgba(0, 0, 0, 0) 100%
  );
}
@media screen and (max-width: 1200px) {
  .splide__track {
    mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 10% 90%,
      rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 10% 90%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}
@media screen and (max-width: 600px) {
  #carousel {
    margin-bottom: 0;
  }
  .splide__slide img {
    height: 250px;
  }
  .splide__track {
    mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 5% 95%,
      rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 5% 95%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}