.galleryContainer ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
  }
  
  .galleryContainer li {
     height: 15vh;
      flex-grow: 1;
      margin: 5px;
      border-radius: 5px;
  }
  
  .galleryContainer li:last-child { 
    flex-grow: 10;
    height: 10vh;
  }
  
  .galleryContainer img {
    max-height: 100%;
    width: 100%;
    object-fit: cover;
    vertical-align: bottom;
    border-radius: 5px;
  }
  
  a[data-fancybox] {
    display: block;
    height: 100%;
    border: solid 2px transparent;
  }
  
  a[data-fancybox]:hover, a[data-fancybox]:focus {
      outline-offset: -2px;
      border-radius: 10px;
      border: black solid 2px;
      filter: drop-shadow(2px 4px 6px black);
      height: 100%;
      display: block;
  }
  
  a[data-fancybox]:focus {
    border: black solid 4px;
    outline: yellow solid 3px;
}
  
  .galleryMoreLI{
    display: none;
  }
  .galleryMore {
    position: relative;
    width: 100%;
  
  }
  
  .galleryMoreImage {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .galleryMoreOverlay img {
      margin: 0;
      position: absolute;
      top: 50%;
      transform: translate(0%, -50%);
  }
  
  .galleryMoreOverlay {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    color: #f1f1f1;
    width: 100%;
    height: 100%;
  }
  
  .galleryMoreLI2 {
    position: relative;
    display: block;
  }
  
  .galleryMoreLI2 img {
    filter: brightness(0.5);
  }
  
  .galleryMore2 {
    width: 100%;
  
  }
  
  .galleryMoreImage2 {
    display: block;
    width: 100%;
    height: auto;
  }
  #moreImages {font-size: 2em;}
  
  .galleryMoreOverlay2 {
      position: absolute;
      text-align: center;
      font-size: 1.2em;
      color: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  /* Short screens */
  
  @media (max-height: 480px) {
    .galleryContainer li {
      height: 80vh;
    }
  }
  
  /*  Smaller screens in portrait */
  
  @media (max-aspect-ratio: 1/1) and (max-width: 480px) {
  
  
    .galleryContainer li {
      display: none;
      height: auto;
    }
  
  
    .galleryMoreLI{
    display: block !important;
    width: 100%;
  }
  }
  
  /* Smaller screens in landscape */
  @media (min-width: 481px) and (max-width: 643px) {
    .galleryContainer li {
      max-width: 47%;
    }
  }