.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* w = (100vw - 30px) / 4, row h = 0.70711 * w - 1.5px */
  grid-auto-rows: calc((100vw - 30px) * 0.176777 - 1.5px);
  grid-auto-flow: dense;
  gap: 6px;
  margin: 0 6px 6px;
}

img:not(#logo),
video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 10px;
}

.gallery .four-grid-cells {
  grid-row: span 2 / auto;
  grid-column: span 2 / auto;
  border-radius: 10px;
}

.gallery .wide-image {
  grid-column: span 2 / auto;
  border-radius: 10px;
}

.gallery .tall-image {
  grid-row: span 2 / auto;
  border-radius: 10px;
}

@media screen and (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* w = (100vw - 18px) / 2 */
    grid-auto-rows: calc((100vw - 18px) * 0.353553 - 1.5px);
  }
}

@media screen and (max-width: 480px) {
  .gallery {
    grid-template-columns: minmax(0, 1fr);
    /* w = 100vw - 12px */
    grid-auto-rows: calc((100vw - 12px) * 0.707107 - 1.5px);
  }

  .gallery .four-grid-cells {
    grid-row: auto;
    grid-column: auto;
  }

  .gallery .wide-image {
    grid-column: auto;
  }
}

/**********************************************************/
/*                    VIDEO CONTROLS                      */
/**********************************************************/

video::-webkit-media-controls-panel,
video::-internal-media-controls-panel {
  background: rgba(0, 0, 0, 0) !important;
}

video::-webkit-media-controls-play-button,
video::-webkit-media-controls-pause-button {
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1)
    contrast(1) !important;
  margin: 0 8px !important;
}

video::-webkit-media-controls-overlay-play-button {
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1)
    contrast(1) !important;
}

video::-webkit-media-controls-mute-button {
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1)
    contrast(1) !important;
  margin: 0 4px 0 2px !important;
}

video::-webkit-media-controls-volume-slider {
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1)
    contrast(1) !important;
  margin: 0 2px 0 4px !important;
}

video::-webkit-media-controls-fullscreen-button {
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1)
    contrast(1) !important;
  margin: 0 8px !important;
}

video::-webkit-media-controls-timeline {
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1)
    contrast(1) !important;
  height: 5px !important;
  margin-left: 16px !important;
  margin-right: 16px !important;
}

video::-webkit-media-controls-timeline::-webkit-media-controls-timeline-played-background {
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1)
    contrast(1) !important;
}

video::-webkit-media-controls-timeline::-webkit-media-controls-timeline-buffered-background {
  filter: sepia(100%) saturate(6000%) hue-rotate(120deg) brightness(1)
    contrast(1) !important;
}

video::-webkit-media-controls-timeline-thumb {
  width: 12px !important;
  height: 12px !important;
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1)
    contrast(1) !important;
  border-radius: 50% !important;
  margin-top: -3px !important;
  opacity: 0 !important;
  transition: opacity 0.1s ease-in-out;
}

video::-webkit-media-controls-timeline:hover::-webkit-media-controls-timeline-thumb {
  opacity: 1 !important;
}

video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display {
  color: rgba(0, 255, 255, 1) !important;
  font-size: 12px !important;
  margin: 0 8px !important;
}

video::-webkit-media-controls-seek-back-button,
video::-webkit-media-controls-seek-forward-button,
video::-webkit-media-controls-picture-in-picture-button {
  display: none !important;
}

video::-webkit-media-controls-play-button:hover,
video::-webkit-media-controls-play-button:active,
video::-webkit-media-controls-overlay-play-button:hover,
video::-webkit-media-controls-overlay-play-button:active,
video::-webkit-media-controls-pause-button:hover,
video::-webkit-media-controls-pause-button:active,
video::-webkit-media-controls-fullscreen-button:hover,
video::-webkit-media-controls-fullscreen-button:active,
video::-webkit-media-controls-play-button:focus,
video::-webkit-media-controls-pause-button:focus,
video::-webkit-media-controls-overlay-play-button:focus,
video::-webkit-media-controls-fullscreen-button:focus {
  box-shadow: none !important;
  border: none !important;
  filter: invert(100%) sepia(100%) saturate(8000%) hue-rotate(120deg)
    brightness(1) contrast(1) !important;
}