/*
* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Lucida Sans", sans-serif;
}

h1 {
  background-color: lightblue;
  text-align: center;
  color: #ffffff;
  font-size: 40px;
  display: block; // creates the bottom padding //
  margin-bottom: 0.5em; // creates the bottom padding //

}
*/
/* Placing text over the videos */
.gallery {
  position: relative;/* establishes a positioning context for its absolutely positioned children. */
  /*width: 100%;  /* Or a specific video width */
  height: 30vh; /* Or a specific video height */
  overflow: hidden; /* To prevent overflow if video is larger */
}

.gallery video {
  position: absolute;/* to ensure it fills the container and maintains its aspect ratio.*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;/* to ensure it fills the container and maintains its aspect ratio.*/
  /*z-index: -1; /* Place video behind text, disabled video controls */
}

.desc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the text */
  /*z-index: 1; /* Place text above video, disabled video controls */
  color: orange; /* Or a suitable color */
  text-align: center;
  /* Add other text styling like font-size, font-family, etc. */
}
/* videos */
.grid-container {
  display: grid;
  grid-template-areas:
    'header . . . '
    'myArea myArea myArea . . . '
    'myArea myArea myArea . . . '
    'footer . . .';
  /* grid-template-columns: repeat(4, 1fr);*/
  gap: 10px;
  background-color: blue;
  padding: 10px;
  overflow: scroll;/*auto, differs from scroll placing scrolls just when it's needed*/
}

.grid-container > div {
  padding: 10px;
  font-size: 16px;
}

.item1 {
  grid-area: header;
  /*background-color: orange;*/
  text-align: center;
  color: #ffffff;
}

.item1 > h1 {
  font-size: 40px;
}


.item2 {
  grid-area: myArea;
}

.item3 {
  grid-area: footer;
}

.layout-container{
   width: min(1000px, 100%); /* responsive width */
   margin: 0 auto; /* centers layout */
   columns: 4 300px;/* # of columns, min size */
   column-gap: 1em;
   row-gap: 1em;
}

.layout-container > div {
  color:#000;
  padding: 5px;
  font-size: 15px;
  text-align: center;
}
/* length of area 
@media only screen and (max-width: 600px) {
  .item1 {grid-area: 1 / span 6;} 
  .item2 {grid-area: 2 / span 1;}
  .item3 {grid-area: 2 / span 6;}
 
}

@media only screen and (min-width: 600px) {
  .item1 {grid-area: 1 / span 6;}
  .item2 {grid-area: 2 / span 4;}
  .item3 {grid-area: 2 / span 6;}
 
}

@media only screen and (min-width: 768px) {
  .item1 {grid-area: 1 / span 6;}
  .item2 {grid-area: 2 / span 4;}
  .item3 {grid-area: 2 / span 6;}
}
*/
*/
img {
  display: block; /* creates the bottom padding */
  margin-bottom: 1em; /* creates the bottom padding */
  width: 100%; /* makes images responsive */
  height: auto;
}

video {
  width: 100%;
  /* makes the video element non-interactive with the mouse pointer. 
  This means clicks, hovers, and other pointer events will pass through 
  the video element to any elements beneath it, effectively disabling click-to-play/pause functionality.*/
  /*pointer-events: none;*/
  /*height: auto;*/
  
}
video::-internal-media-controls-download-button {
    display:none;
}