@media (max-width: 768px) {

  #mobileCarousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 40px;
  }

  .carousel-item {
    flex: 0 0 60%;
    max-height: 240px;
    object-fit: cover;
    border-radius: 20px;
    scroll-snap-align: center;
    transition: all 0.4s ease;
    filter: blur(3px);
    opacity: 0.6;
  }

  .carousel-item.active {
    transform: scale(1.05);
    filter: blur(0);
    opacity: 1;
  }

}