/* :root {
   --radius: 5px;
   --padding: 5px;
} */

.vid_container {
   width: 78%;  /* was 66% */
   max-width: 120rem;
   margin: auto;
   padding: 0 2rem;
   /* border: 1px solid yellowgreen; */
}

.vid_gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: auto;
   grid-gap: 4rem 2rem;
   grid-template-areas: 
      'vid_1 vid_2 vid_3 vid_4'
      'vid_5 vid_6 vid_7 vid_8'
      'vid_9 . . .';
   /* border: 1px solid purple; */
}

/* YouTube; added on 20210804 */
.vid_gallery_yt {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: auto;
   grid-gap: 4rem 2rem;
   grid-template-areas: 
      'vid_1 vid_2'
      'vid_3 vid_4' 
      'vid_5 vid_6' 
      'vid_7 vid_8'
      'vid_9 .';
   /* border: 1px solid purple; */
}

.vid_area {
   width: 100%;
   height: 100%;
}

.ytid_area {
   width: 100%;
   height: 100%;
}

/* .vid_desc {
   padding: 10px;
   text-align: center;
   border: 1px solid #ccc;
   font-family: Arial, Helvetica, sans-serif;
} */

#vid_1 {
   grid-area: vid_1;
}

#vid_2 {
   grid-area: vid_2;
}

#vid_3 {
   grid-area: vid_3;
}

#vid_4 {
   grid-area: vid_4;
}

#vid_5 {
   grid-area: vid_5;
}

#vid_6 {
   grid-area: vid_6;
}

#vid_7 {
   grid-area: vid_7;
}

#vid_8 {
   grid-area: vid_8;
}

#vid_9 {
   grid-area: vid_9;
}

@media screen and (max-width: 1200px) {
   .vid_gallery {
      grid-template-areas: 
         'vid_1 vid_1 vid_2 vid_2'
         'vid_3 vid_3 vid_4 vid_4'
         'vid_5 vid_5 vid_6 vid_6'
         'vid_7 vid_7 vid_8 vid_8'
         'vid_9 vid_9 . .';
   }
 }

@media screen and (max-width: 800px) {
   .vid_gallery {
      grid-template-areas: 
         'vid_1 vid_1 vid_1 vid_1'
         'vid_2 vid_2 vid_2 vid_2'
         'vid_3 vid_3 vid_3 vid_3'
         'vid_4 vid_4 vid_4 vid_4'
         'vid_5 vid_5 vid_5 vid_5'
         'vid_6 vid_6 vid_6 vid_6'
         'vid_7 vid_7 vid_7 vid_7'
         'vid_8 vid_8 vid_8 vid_8'
         'vid_9 vid_9 vid_9 vid_9';
   }
 }


/* Master Class 2022 add on 20221009*/
/* border: 1px solid yellowgreen; */
/* border: 1px solid purple; */
/*
.MC2022_vid0_container {
   width: 60%;
   max-width: 120rem;
   margin: auto;
   padding: 0 2rem;
   
}

 .MC2022_vid0_gallery {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto;
   grid-gap: 4rem 2rem;
   grid-template-areas: 
      '. MC2022_vid0_1 .';
   
}


#MC2022_vid0_1 {
   grid-area: MC2022_vid0_1;
}

@media screen and (max-width: 1200px) {
   .MC2022_vid0_gallery {
      grid-template-areas: 
         '. MC2022_vid0_1 .';
   }
 }

@media screen and (max-width: 800px) {
   .MC2022_vid0_gallery {
      grid-template-areas: 
         'MC2022_vid0_1';
   }
 }
*/



.MC2022_vid_container {
   width: 80%;
   max-width: 120rem;
   margin: auto;
   padding: 0 2rem;
   /* border: 1px solid yellowgreen; */
}

 .MC2022_vid_gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: auto;
   grid-gap: 4rem 2rem;
   grid-template-areas: 
      'MC2022_vid_1 MC2022_vid_2 MC2022_vid_3 MC2022_vid_4';
   /* border: 1px solid purple; */
}


#MC2022_vid_1 {
   grid-area: MC2022_vid_1;
}

#MC2022_vid_2 {
   grid-area: MC2022_vid_2;
}

#MC2022_vid_3 {
   grid-area: MC2022_vid_3;
}

#MC2022_vid_4 {
   grid-area: MC2022_vid_4;
}

@media screen and (max-width: 1200px) {
   .MC2022_vid_gallery {
      grid-template-areas: 
      'MC2022_vid_1 MC2022_vid_1 MC2022_vid_2 MC2022_vid_2'
      'MC2022_vid_3 MC2022_vid_3 MC2022_vid_4 MC2022_vid_4';
   }
 }

@media screen and (max-width: 800px) {
   .MC2022_vid_gallery {
      grid-template-areas: 
         'MC2022_vid_1 MC2022_vid_1 MC2022_vid_1 MC2022_vid_1'
         'MC2022_vid_2 MC2022_vid_2 MC2022_vid_2 MC2022_vid_2'
         'MC2022_vid_3 MC2022_vid_3 MC2022_vid_3 MC2022_vid_3'
         'MC2022_vid_4 MC2022_vid_4 MC2022_vid_4 MC2022_vid_4';
   }
 }