.media-slider {
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  
  .slider-track {
    display: flex;
    gap: 10px;
  }
  
  .slide {
    min-width: calc(100% - 10px); /* gap match */
  }
  
  .slide img,
  .slide video {
    width: 100%;
    height: 310px;
    display: block;
  }
  .video-frame {
    width: 100%;
    height: 310px;
    display: block;
  }
  
  /* Smooth scroll */
  .media-slider::-webkit-scrollbar {
    display: none;
  }

  .slider-dots {
    text-align: center;
  }
  
  .slider-dots span {
    height: 8px;
    width: 8px;
    margin: 5px;
    display: inline-block;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
  }
  
  .slider-dots span.active {
    background: #007bff;
    transform: scale(1.0);
  }

  
  @media screen and (max-width: 480px) {

    .media-slider {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .slider-track {
        display: flex;
        gap: 0;
        width: 100%;
    }

    .slide {
        min-width: 100%;
        width: 100%;
        flex: 0 0 100%;
        box-sizing: border-box;
    }

    .slide img,
    .slide video,
    .video-frame {
        width: 100%;
        max-width: 100%;
        height: 210px;
        display: block;
        box-sizing: border-box;
        object-fit: cover;
    }

    .slider-dots {
        width: 100%;
        text-align: center;
    }
}