/* CSS stylesheet for videos.php */

iframe.youtube
{
  display: block;
  margin: auto;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 16/9;
}

div.videos
{
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: space-around;
}

div.videos h3
{
  grid-column-start: 1;
  grid-column-end: 4;
}

@media (max-width: 1400px)
{
  div.videos { grid-template-columns: 1fr 1fr }
  div.videos h3 { grid-column-end: 3; }
}

@media (max-width: 1000px)
{
  div.videos { grid-template-columns: 1fr }
  div.videos h3 { grid-column-end: 2; }
}

video 
{
  display: block;
  margin: auto;
  aspect-ratio: 16/9;
  width: 100%;
  max-width: 500px;
}

div.videowrapper  /* caption text */
{
  font-style: italic;
  color: black;
  text-align: center;
}