/* Shared "Beyond product design" gallery component.
   Included on any page via <link rel="stylesheet" href="./gallery.css">.
   Markup: a wrapper with class "gallery" containing a ".gallery-scroll"
   element with id="gallery-scroll" (gallery.js renders the items into it
   and drives the auto-scroll).
   All sizes are in rem so they scale fluidly with the root font-size. */

.gallery {
  margin-top: 3.3333rem;
}

.gallery-scroll {
  display: flex;
  gap: 1.3333rem;
  overflow-x: auto;
  /* No scroll-behavior: smooth here — gallery.js drives scrollLeft directly
     every frame for the auto-scroll; smooth scrolling fights that (each
     assignment queues its own animation) and can visibly stall/stick under
     any main-thread contention (e.g. the footer's dark-mode bg transition
     repainting the page, or the liquid-hover WebGL effect). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery-scroll::-webkit-scrollbar {
  display: none;
}

.gallery-item {
  position: relative;
  flex: 0 0 24.4444rem;
  aspect-ratio: 16 / 9;
  background: rgba(10,10,10,0.04);
  /* 4px at the 1440px baseline — the site's standard thumbnail/media
     corner radius; match this on any new image/media container. */
  border-radius: 0.2222rem;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.liquid-hover-canvas {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.liquid-hover-canvas.is-visible {
  opacity: 1;
}