.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 18.75vw;
    grid-auto-flow: dense;
    gap: 6px;
}

img:not(#logo), video {
    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: 1fr 1fr;
       grid-auto-rows:37.5vw;
    }
}
@media screen and (max-width: 480px) {

/* changes the grid layout to a single column */
    div.gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: 75vw;
    }

/* resets the grid placement properties for 
the images spanning four grid cells */
    .gallery .four-grid-cells {
        grid-row: auto;
        grid-column: auto;
    }

/* resets the grid placement properties for 
the images spanning two grid columns  */
    .gallery .wide-image {
        grid-column: auto;
    }

}
/**********************************************************/
/*                    VIDEO CONTROLS                      */
/**********************************************************/
/* 2.1. Control-bar background → fully opaque aqua */
video::-webkit-media-controls-panel,
video::-internal-media-controls-panel {
  background: rgba(0, 0, 0, 0) !important;
}


/* 2.2. PLAY / PAUSE ICONS → keep native shape, but use filter to push them to pure aqua */
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-pause-button {
  /* 
     FILTER EXPLAINED:
       • invert(40%) turns the default light-gray/white roughly toward a darker base
       • sepia(100%) adds warm tones so that hue-rotate can then land exactly on 180° (cyan/aqua)
       • saturate(8000%) spikes the saturation so the result is vivid, not faded
       • hue-rotate(180deg) shifts that warmed shape into pure cyan/aqua
       • brightness(1) & contrast(1) leave them at normal lightness
  */
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1) contrast(1) !important;
  /* Do NOT change width/height—keep the native default size */
  margin: 0 8px !important; /* maintain a bit of spacing left/right */
}

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


/* 2.3. MUTE / SPEAKER ICON → same filter (keeps shape, just tints it) */
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;
}

/* 2.4. FULLSCREEN ICON → same “pure aqua” filter, native size */
video::-webkit-media-controls-fullscreen-button {
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1) contrast(1) !important;
  margin: 0 8px !important;
}

/* 2.5. TIMELINE (seek-bar) → apply filter to recolor entire bar into aqua/hinted tones */
video::-webkit-media-controls-timeline {
  /* That same filter chain applied to the timeline makes the “played” portion a vivid aqua,
     and the “buffered” portion a lighter aqua‐ish. */
    filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1) contrast(1) !important;
  height: 5px !important; /* keep a slightly taller bar, similar to YouTube */
  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;
}

/*  • “Buffered” portion → lighter semi‐opaque aqua */
video::-webkit-media-controls-timeline::-webkit-media-controls-timeline-buffered-background {
  filter: sepia(100%) saturate(6000%) hue-rotate(120deg) brightness(1) contrast(1) !important;
}

/* 2.6. SCRUBBER (drag handle) → force it white, only show on hover for contrast */
video::-webkit-media-controls-timeline-thumb {
  width: 12px !important;  /* leave at default “tiny circle” size */
  height: 12px !important;
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1) contrast(1) !important;
  border-radius: 50% !important;
  margin-top: -3px !important; /* center on the 5px-high bar */
  opacity: 0 !important;
  transition: opacity 0.1s ease-in-out;
}
video::-webkit-media-controls-timeline:hover::-webkit-media-controls-timeline-thumb {
  opacity: 1 !important;
}

/* 2.7. TIME TEXT (current / remaining) → pure aqua */
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;
}

/* 2.9. HIDE ANY EXTRA BUTTONS (skip, PiP, cast, etc.) for a clean YouTube-like row */
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;
}

/* On hover or active (when you click and hold), still keep it transparent */
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 {
  box-shadow:none !important;
  border: none !important;
  filter:  invert(100%) sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1) contrast(1) opacity(1) !important;
}

/* Remove the default focus ring/outline on these buttons */
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) opacity(1) !important;
}