.video-gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0 12px;
}

.video-gallery-count {
  margin: 0;
  color: #b8bdc7;
  font: 9px 'Jost EG', Arial, sans-serif;
  letter-spacing: 1.5px;
}

.video-gallery-count > span:first-child { color: #68d8ff; }
.video-gallery-navigation { display: flex; align-items: center; gap: 11px; }
.video-gallery-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(217, 219, 222, .24);
  border-radius: 50%;
  background: transparent;
  color: #d9dbde;
  font: 16px/1 'Jost EG', Arial, sans-serif;
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}

.video-gallery-arrow:hover,
.video-gallery-arrow:focus-visible {
  color: #151619;
  background: #68d8ff;
  border-color: #68d8ff;
  transform: translateY(-2px);
}

.video-gallery-arrow:focus-visible { outline: 2px solid #68d8ff; outline-offset: 3px; }
.video-gallery-dots { display: flex; align-items: center; gap: 6px; }
.video-gallery-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: #646a73; cursor: pointer; transition: width .2s, background .2s; }
.video-gallery-dot[aria-pressed="true"] { width: 18px; border-radius: 5px; background: linear-gradient(90deg, #68d8ff, #c43d62); }

.video-grid {
  display: flex;
  gap: 26px;
  width: calc(100% + 4px);
  margin: -8px -2px 0;
  padding: 8px 18% 25px 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.video-grid::-webkit-scrollbar { display: none; }
.video-card { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; opacity: .82; transform: translateY(4px) scale(.99); transition: opacity .3s, transform .35s, filter .3s; }
.video-card.is-active { opacity: 1; transform: translateY(0) scale(1); }
.video-card:hover,
.video-card:focus-within { opacity: 1; transform: translateY(-5px) scale(1); }
.video-card .video-launch { box-shadow: 0 18px 40px rgba(0, 0, 0, .3); transition: transform .35s, box-shadow .35s; }
.video-card:hover .video-launch,
.video-card:focus-within .video-launch { transform: translateY(-3px); box-shadow: 0 25px 52px rgba(0, 0, 0, .38); }
.video-card .video-caption { transition: border-color .3s, padding-left .3s; }
.video-card:hover .video-caption,
.video-card:focus-within .video-caption { padding-left: 9px; border-color: rgba(104, 216, 255, .56); }

@media (max-width: 760px) {
  .video-gallery-toolbar { margin: 14px 0 12px; }
  .video-grid { gap: 13px; width: calc(100% + 7vw); padding: 8px 7vw 23px 0; }
  .video-card { flex-basis: 91%; }

  .photos .photo-grid {
    display: flex;
    gap: 12px;
    width: calc(100% + 7vw);
    margin-right: -7vw;
    padding: 3px 7vw 15px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  .photos .photo-grid::-webkit-scrollbar { display: none; }
  .photos .photo-tile { flex: 0 0 72%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
}

@media (prefers-reduced-motion: reduce) {
  .video-grid { scroll-behavior: auto; }
  .video-card,
  .video-gallery-arrow,
  .video-card .video-launch,
  .video-card .video-caption { transition: none; }
}