.workshop-section {
  background:
    radial-gradient(circle at 90% 10%, rgba(238, 164, 80, .12), transparent 35%),
    #17130f;
}

.workshop-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.workshop-shot {
  grid-column: span 4;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 20px;
  background: rgba(255, 255, 255, .045);
}

.workshop-shot.wide {
  grid-column: span 6;
}

.workshop-shot img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
  filter: saturate(.92) contrast(1.02);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .55s ease;
}

.workshop-shot:hover img {
  transform: scale(1.025);
  filter: saturate(1.04) contrast(1.02);
}

.workshop-shot figcaption {
  padding: 14px 16px 16px;
  color: #c9c0b5;
  font: 650 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .065em;
  text-transform: uppercase;
}

@media (max-width: 850px) {
  .workshop-shot,
  .workshop-shot.wide {
    grid-column: span 6;
  }
}

@media (max-width: 560px) {
  .workshop-gallery {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

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

  .workshop-shot,
  .workshop-shot.wide {
    flex: 0 0 82vw;
    scroll-snap-align: start;
  }

  .workshop-shot img {
    height: 390px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workshop-shot img {
    transition: none;
  }
}