.sat-gallery {
  contain: layout paint;
}
/* FIX IMAGE SIZE */
.car-image {
  position: relative;
  width: 100%;
  max-width: 323px; /* keeps desktop size */
  aspect-ratio: 323 / 227;
  overflow: hidden;
  background: rgba(128, 128, 128, 0.075);
  border-radius: 8px;
}

/* IMAGE COUNT (BOTTOM RIGHT) */
.img-count {
  position: absolute;
  bottom: 22px;
  right: 10px;
  background: #2d2d2dcc;
  color: #fff;
  font-family: Lato;
  font-weight: 500;
  font-size: 14px;
  line-height: 22.09px;
  padding: 1px 8px;
  border-radius: 6px;
  z-index: 4;
  pointer-events: none;
}
/* SLIDE TRACK */
.slide-track {
  display: flex;
  height: 100%;
  transition: transform 0.35s ease;
}

/* EACH IMAGE */
.slide-track img {
  width: 323px;
  height: 227px;
  max-width: 323px;
  max-height: 227px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border-radius: 8px;
}

.slide-track {
  display: flex;
  transition: transform 0.35s ease;
  will-change: transform;
}

.slide-track img {
  width: 100%;
  flex-shrink: 0;
  display: block;
}

/* NAV */
.nav_slider {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: none;
  z-index: 2;
  border-radius: 4px;
  height: 48px;
  width: 28px;
}
.nav_slider span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.car-image:hover .nav_slider {
  display: block;
}

.nav_slider.prev {
  left: 6px;
  z-index: 4;
}
.nav_slider.next {
  right: 6px;
}

.nav_slider.disabled {
  opacity: 0.3;
  pointer-events: none;
  display: none !important;
}

/* DOTS */
.sat-gallery .dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.sat-gallery .dots button {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.6);
  padding: 0;
  cursor: pointer;
  transition:
    width 0.2s ease,
    background 0.2s ease;
}

.sat-gallery .dots button.active {
  width: 8px;
  height: 5px;
  border-radius: 4px; /* pill look */
  background: #fff;
}
/* OVERLAY CONTAINER */
.view-all-gallery {
  position: absolute;
  inset: 0; /* top:0 right:0 bottom:0 left:0 */
  background: rgba(0, 0, 0, 0.45);
  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* BUTTON */
.view-all-gallery button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffffff;
  color: #ffffff;
  border-radius: 100px;
  width: 201px;
  height: 44px;
  text-decoration: none;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(0px);
  user-select: none;
}

/* OPTIONAL hover */
.view-all-gallery button:hover {
  background: rgba(255, 255, 255, 0.15);
}

.total-img-count {
  margin-inline: 4px;
}
.status-car-overlay {
  position: relative;
  padding-right: 8px;
}
/* FAVORITE ICON (TOP RIGHT) */
.favorite-icon {
  position: absolute;
  top: 10px;
  right: 18px;
  width: 36px;
  height: 36px;
  background: #ffffffb2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  border: 1px solid #ffffff;
}

/* icon style */
.favorite-icon i {
  font-size: 20px;
  color: #0c1529;
  margin-top: 2px;
}

/* hover effect */
.favorite-icon:hover {
  background: #fff;
  transform: scale(1.05);
}
.favorite-icon.active i {
  color: #ff2a2a;
}

.favorite-icon.active i.far {
  font-weight: 900;
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .car-image {
    max-width: 244px;
    aspect-ratio: 244 / 175;
  }
  .favorite-icon i {
    font-size: 16px;
    margin-top: 0px;
  }
  .favorite-icon {
    width: 32px;
    height: 33px;
  }
  .img-count {
    bottom: 12px;
    font-size: 12px;
    padding: 1px 5px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {
  .car-image {
    max-width: 244px;
    aspect-ratio: 244 / 175;
  }
  .favorite-icon i {
    font-size: 16px;
    margin-top: 0px;
  }
  .favorite-icon {
    width: 32px;
    height: 33px;
  }
  .img-count {
    bottom: 12px;
    font-size: 12px;
    padding: 1px 5px;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .car-image {
    max-width: 248px;
    aspect-ratio: 248 / 187;
  }
  .favorite-icon i {
    font-size: 16px;
    margin-top: 0px;
  }
  .favorite-icon {
    width: 32px;
    height: 33px;
  }
  .img-count {
    bottom: 12px;
    font-size: 12px;
    padding: 1px 5px;
  }
  .slide-track img {
    height: 186px;
  }
  .section-heading {
    font-size: 20px;
    line-height: 24px;
  }
}