.custom-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.custom-carousel {
  position: relative;
  z-index: 2;
  width: 100%;
}

.carousel-artifact {
  position: absolute;
  top: -28%;
  left: 0;
  transform: translate(-51%);
  z-index: -10;
  width: 650px;
  height: auto;
}

.custom-carousel .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #f9f9f9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  aspect-ratio: 1/1;
}

.custom-carousel .swiper-slide-prev {
  opacity: 0;
}

.custom-carousel .swiper-slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.custom-carousel .swiper-slide {
  display: block;
  text-align: center;
}

.custom-carousel .swiper-slide .category-text {
  position: absolute;
  bottom: 0;
  color: #ffffff;
  width: 100%;
  display: flex;
  justify-content: start;
  padding-left: 20px;;
}

.custom-carousel .swiper-slide h3 {
  color: #ffffff;
  font-size: 26px;
  text-align: left;
  font-weight: 500;
}

.category-thumbnail {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
}

.category-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.17);
}
.swiper-button-next, .swiper-button-prev {
  color: #ffffff !important;
}
/* Media Queries */
@media (min-width: 766px) {
    .carousel-artifact{
        top: -58%;
        transform: translate(-51%);
    }
}
@media (min-width: 1279px) {
    .carousel-artifact{
        top: -96%;
        transform: translate(-51%);
    }
    .custom-carousel{
        padding-left: 50px;
    }
}
@media (min-width: 1365px) {
    .carousel-artifact{
        top: -86%;
        transform: translate(-51%);
    }
    .custom-carousel{
        padding-left: 50px;
    }
}
@media (min-width: 1439px) {
    .carousel-artifact{
        top: -78%;
        transform: translate(-51%);
    }
    .custom-carousel{
        padding-left: 50px;
    }
}
@media (min-width: 1919px) and (max-width: 2000px) {
    .custom-carousel{
        padding-left: 50px;
    }
    .carousel-artifact{
        top: -43%;
        transform: translate(-51%);
    }
}
@media (min-width: 2001px){
    .custom-carousel{
        padding-left: 0;
    }
    .carousel-artifact{
        top: -40%;
        transform: translate(-61%);
    }
}