.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

    .video-item {
      flex: 1 1 calc(25% - 1rem);
      min-width: 250px;
      max-width: 500px;
      background: #f9f9f9;
      padding: 0.5rem;
      border: 1px solid #ddd;
    }
    .video-item iframe,
    .video-item video {
      width: 100%;
      height: auto;
    }
/*VIDEO TITLES*/
.video-title1{
      background-color: #FFF;
      color: #000;
      font-size: .8rem;
}

    /*VIDEO PLAYER */
     /* Style for video player */
    body { width: 100%; margin: auto; text-align: center; }
    video { width: 100%; max-width: 640px; border: 2px solid #000; border-radius: 8px; }
    
    /* Style for play button overlay */
    #playButton { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; color: white; background-color: transparent; border: none; border-radius: 50%; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.3s; }
    #playButton:hover { background-color: rgba(0, 0, 0, 0.8); }
    
    /* LIVE indicator style */
    #liveIndicator { display: none; font-size: 1.5em; color: red; font-weight: bold; position: absolute; bottom: 15px; left: 6%; background-color: transparent; padding: 5px 10px; border-radius: 3px; }

    .video-container { margin-right: 15px; margin-left: 15px; position: relative; display: inline-block; }

    /* Additional styles */
    h1 { font-size: 1.5em; margin-top: 20px; color: yellow;}
    h2 { color: skyblue; }

    /* Moblie styles */
    @media screen and (max-width: 750px) {
          h1 { font-size: 1.2em;}
    }

    @media screen and (max-width: 650px) {
          h1 { font-size: 1.1em;}
          #liveIndicator { left: 50%; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}
    }

    @media screen and (max-width: 550px) {
          h1 { font-size: .9em;}
        
    }

    @media screen and (max-width: 450px) {
          h1 { font-size: .7em;}
          .video-title1{ font-size: .7rem;}
         
    }

    @media screen and (max-width: 350px) {
          h1 { font-size: .5em;}
    }