.purple-box {
  background-color: white;
  color: white;
  padding: 20px;
  border-radius: 5px;
}

.video-container {
  overflow-x: scroll;
  white-space: nowrap;
}

.video-list {
  display: inline-flex;
  gap: 10px; /* Adjust the gap size as needed */
}

.video-item {
  width: 300px;
  height: 600px;
  overflow: hidden;
}



.video-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .video-item {
    width: 300px;
    height: 500px;
  }
}

@media screen and (max-width: 480px) {
  .video-item {
    width: 300px;
    height: 550px;
  } 
  .video-item video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  
 
}