video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 94%; 
    padding: 0.4rem 0;
    margin-top: 0;
  }
  
  .video-container {
    width: 98%;
    padding: 1rem 0;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-areas:
      'menu01 menu02 menu03 menu04'
      'menu05 menu06 menu07 menu08';
    gap: 0.7rem;
    align-items: stretch;
  }
  
  .item .pastor {
    font-family: "Times New Roman", Times, serif;
    font-variant: small-caps;
    font-size: 1.15rem;
    line-height: 1rem;
    color: var(--text-color);
  }
  
  .item .title {
    font-size: 0.85rem;
    line-height: normal;
    font-style: italic;
    color: var(--text-title-color);
  }
  
  .item .ref {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-ref-color);
  }
  
  .item {
    text-align: center;
    border: 1px solid var(--text-color);
    border-radius: 8px;
    padding-bottom: 0.5rem;
    background-color: var(--secondary-background-color);
  } 
  
  .item01 {grid-area: menu01;}
  .item02 {grid-area: menu02;}
  .item03 {grid-area: menu03;}
  .item04 {grid-area: menu04;}
  .item05 {grid-area: menu05;}
  .item06 {grid-area: menu06;}
  .item07 {grid-area: menu07;}
  .item08 {grid-area: menu08;}
  .item09 {grid-area: menu09;}
  .item10 {grid-area: menu10;}
  .item11 {grid-area: menu11;}
  .item12 {grid-area: menu12;}
  .item13 {grid-area: menu13;}
  .item14 {grid-area: menu14;}
  .item15 {grid-area: menu15;}
  .item16 {grid-area: menu16;}
  
  /* Keep for format changes  
  
  .item01 {grid-area: menu01;}
  .item02 {grid-area: menu02;}
  .item03 {grid-area: menu03;}
  .item04 {grid-area: menu04;}
  .item05 {grid-area: menu05;}
  .item06 {grid-area: menu06;}
  .item07 {grid-area: menu07;}
  .item08 {grid-area: menu08;}
  .item09 {grid-area: menu09;}
  .item10 {grid-area: menu10;}
  .item11 {grid-area: menu11;}
  .item12 {grid-area: menu12;}
  .item13 {grid-area: menu13;}
  .item14 {grid-area: menu14;}
  .item15 {grid-area: menu15;}
  .item16 {grid-area: menu16;}
   */

    .pad {
      height: 0;
    }

/*   ---   MEDIA QUERY   ---      ---   MEDIA QUERY   ---      ---   MEDIA QUERY   ---   */

   @media screen and (max-width: 980px) {

  .item07, .item08 {
    display: none;
  }

  .item {
    font-size: 1.2rem;
    line-height: 0.9rem;
    border-radius: 8px;
    padding-bottom: 0.5em;
  }

  .item .pastor {
    font-size: 1.1rem;
    line-height: 1rem;
  }

  .item .title {
    font-size: 0.75rem;
    line-height: normal;
  }

  .item .ref {
    font-size: 0.7rem;
  }

  .video-container {
    width: 94%;
    grid-template-areas:
      'menu01 menu02 menu03 '
      'menu04 menu05 menu06';
    gap: 10px;
    align-items: stretch;
  }
}

.pad {
  height: 16rem;
}

/*   ---   MEDIA QUERY   ---      ---   MEDIA QUERY   ---      ---   MEDIA QUERY   ---   */

@media screen and (max-width: 790px) {

  .item05, .item06 {
    display: none;
  }

  .item {
    border-radius: 8px;
    padding-bottom: 0.5em;
  }

  .item .pastor {
    font-size: 1.1rem;
    line-height: 1.1rem;
    color: var(--text-color);
  }
  
  .item .title {
    font-size: 0.9rem;
    line-height: normal;
  }

  .item .ref {
    font-size: 0.9rem;
    line-height: 1rem;
  }
  
    .video-container {
      width: 95%;
      padding: 1rem 2% 2% 3%;
      display: grid;
      grid-template-areas:
        'menu01 menu02'
        'menu03 menu04';
      gap: 1%;
      align-items: stretch;
    }
  }

  .pad {
    height: 2rem;
  }

  /*   ---   MEDIA QUERY   ---      ---   MEDIA QUERY   ---      ---   MEDIA QUERY   ---   */

  @media screen and (max-width: 620px) {

    .item {
      border-radius: 8px;
      padding-bottom: 0.5em;
    }
  
    .item .pastor {
      font-size: 1.2rem;
      line-height: 1.1rem;
    }
    
    .item .title {
      font-size: 1rem;
      line-height: normal;
    }
  
    .item .ref {
      font-size: 1rem;
      line-height: 1rem;
    }

    .video-container {
      width: 80%;
      padding: 1rem 3% 1% 3%;
      display: grid;
      grid-template-areas:
      'menu01' 
      'menu02'
      'menu03' 
      'menu04';
      gap: 1%;
      align-items: stretch;
    }

    .pad {
      height: 2.8rem;
    }
}