:root {
   --news-visible-items: 3;
   --news-gap: 24px;
}

@media (max-width: 991.98px) {
   :root {
      --news-visible-items: 2;
      --news-gap: 20px;
   }
}

@media (max-width: 575.98px) {
   :root {
      --news-visible-items: 1;
      --news-gap: 16px;
   }
}

/* Slider Layout */
.news-slider-container {
   overflow: hidden;
   position: relative;
   cursor: grab;
}

.news-slider-container:active {
   cursor: grabbing;
}

.news-slider-track {
   display: flex;
   gap: var(--news-gap);
   transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
   transform: translateX(calc(-1 * var(--news-current-index, 0) * (100% + var(--news-gap)) / var(--news-visible-items)));
   will-change: transform;
}

.news-slide-item {
   flex: 0 0 calc((100% - (var(--news-visible-items) - 1) * var(--news-gap)) / var(--news-visible-items));
   width: calc((100% - (var(--news-visible-items) - 1) * var(--news-gap)) / var(--news-visible-items));
   box-sizing: border-box;
   user-select: none;
}

.news-slide-item>*,
.news-slide-item>*>* {
   height: 100%;
}

/* Image section */
.news-card-img-wrapper img {
   transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.news-card:hover .news-card-img-wrapper img {
   transform: scale(1.25);
}

/* Dots Indicators */
.news-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: rgba(var(--bs-body-color-rgb), .325);
   border: none;
   padding: 0;
   cursor: pointer;
   transition: all 0.3s ease;
}

.news-dot.active {
   background-color: rgba(var(--bs-body-color-rgb), 1);
   transform: scale(1.25);
   width: 20px;
   border-radius: 4px;
}

/* Control Buttons */
.news-control-btn {
   width: 40px;
   height: 40px;
}