.slider-container {
     width: 100vw;
     max-width: 800px;
     position: relative;
     margin-left: auto;
     margin-right: auto;
 }

 .slide-wrapper {
     width: 100%;
     height: 800px;
     overflow: hidden;
     position: relative;
     perspective: 1000px;
 }


 .slide {
     user-select: none;
     position: absolute;
     width: 400px;
     height: 100%;
     display: grid;
     overflow: hidden;

     & img {
         z-index: 1000;
         display: block;
     }
 }

 /* Image Loading Spinner */
 .slide::after {
     content: "";
     width: 100px;
     height: 100px;
     position: absolute;
     top: 50%;
     left: 50%;
     border-radius: 50%;
     border: 10px solid transparent;
     border-top: 10px solid #B8860B;
     border-left: 10px solid #B8860B;
     animation: rotate 1s linear infinite;
 }

 @keyframes rotate {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }

     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }



 .next-btn,
 .prev-btn {
     background-color: transparent;
     border: none;
     outline: none;
     position: absolute;
     top: 50%;
     z-index: 1000000;
     transform: translate(0, -50%);
     font-size: 1.5rem;
     cursor: pointer;

     & svg {
         width: 50px;
         height: auto;
         fill: white;
     }

     &:hover svg {
         fill: #B8860B;
     }
 }

 .next-btn {
     right: 32px;
 }

 .prev-btn {
     left: 32px;
 }

 .captions {
     font-size: 24px;
     color: rgba(255, 255, 255, 0.6);
     font-family: sans-serif;
     font-weight: 500;
     font-style: italic;
     text-align: center;
     padding: 20px;
 }

 .pagination {
     width: 100%;
     position: relative;
     z-index: 1000;
     transform: translateY(calc(-100% - 8px));
     display: flex;
     justify-content: center;
     gap: 5px;
     margin-top: 32px;

     & .bullet {
         width: 10px;
         height: 10px;
         background: #ffffff;
         border-radius: 50%;
         border: 0.5px solid #919191;
         transition-duration: 0.2s;

         &.active {
             background-color: #B8860B;
         }
     }
 }

 @media screen and (max-width:500px) {
     .slider-container {
         width: 300px;
     }

     .slide-wrapper {
         height: 400px;
     }

     .next-btn {
         right: -40px;
     }

     .prev-btn {
         left: -40px;
     }

     .slide {
         width: 100%;
     }


 }