.artistGallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 8px;
  max-width: 1400px;
  margin: 8px auto 0;
}

.artistFrame {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #0d0d0d;
}

.momentGrid .moment {
  position: relative;
}

.artistFrame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .8s ease;
}

.artistFrame picture {
  width: 100%;
  height: 100%;
  display: block;
}

.momentGrid .moment::after,
.artistFrame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px rgba(255,248,235,.08),
    inset 0 0 20px rgba(193,139,65,.015);
  animation: galleryFrameLustre 16.5s ease-in-out infinite both;
}

.momentGrid .moment:nth-child(2)::after { animation-delay: 1.5s; }
.momentGrid .moment:nth-child(3)::after { animation-delay: 3s; }
.momentGrid .moment:nth-child(4)::after { animation-delay: 4.5s; }
.momentGrid .moment:nth-child(5)::after { animation-delay: 6s; }
.momentGrid .moment:nth-child(6)::after { animation-delay: 7.5s; }
.artistGallery > .artistFrame:nth-child(1)::after { animation-delay: 9s; }
.artistGallery > .artistFrame:nth-child(2)::after { animation-delay: 10.5s; }
.artistCompact .artistFrame:nth-child(1)::after { animation-delay: 12s; }
.artistCompact .artistFrame:nth-child(2)::after { animation-delay: 13.5s; }
.artistCompact .artistFrame:nth-child(3)::after { animation-delay: 15s; }

@keyframes galleryFrameLustre {
  0%, 16%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(255,248,235,.08),
      inset 0 0 18px rgba(193,139,65,.012),
      0 0 0 rgba(210,166,95,0);
  }
  4%, 7% {
    box-shadow:
      inset 0 0 0 2px rgba(221,181,112,.39),
      inset 0 0 36px rgba(193,139,65,.15),
      0 0 13px rgba(210,166,95,.095);
  }
  12% {
    box-shadow:
      inset 0 0 0 1px rgba(255,248,235,.19),
      inset 0 0 29px rgba(193,139,65,.065),
      0 0 8px rgba(210,166,95,.035);
  }
}

.artistFrame:hover img {
  transform: scale(1.025);
}

.artistBambi {
  grid-column: span 5;
  height: clamp(280px, 28vw, 410px);
}

.artistBambi img {
  object-position: 50% 46%;
  transform: scale(1.08);
}

.artistBambi:hover img {
  transform: scale(1.105);
}

.artistVocal {
  grid-column: span 7;
  height: clamp(280px, 28vw, 410px);
}

.artistCompact {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2.25fr) minmax(0, 3.25fr) minmax(0, 6.5fr);
  gap: 8px;
  height: clamp(220px, 23vw, 330px);
}

.artistSax {
  height: 100%;
}

.artistVocal img {
  object-position: 50% 38%;
}

.artistSax img {
  object-position: 30% 54%;
  transform: translateY(3%) scale(1.08);
  transform-origin: 30% 54%;
}

.artistSax:hover img {
  transform: translateY(3%) scale(1.10);
}

.artistStrings {
  height: 100%;
}

.artistEnsemble {
  height: 100%;
}

.artistStrings img {
  object-position: 92% 45%;
  transform: scale(1.05);
  transform-origin: right 45%;
}

.artistEnsemble img {
  object-position: center center;
  transform: scale(1);
}

.artistEnsemble:hover img {
  transform: scale(1.018);
}

@media (min-width: 761px) {
  .artistCompact {
    grid-template-columns: minmax(0, 2.25fr) minmax(0, 3.55fr) minmax(0, 6.2fr);
  }

  .artistSax img {
    object-position: 30% 54%;
    transform-origin: 30% 54%;
  }

  .artistStrings img {
    object-position: 92% 45%;
    transform: scale(1.05);
    transform-origin: right 45%;
  }

  .artistStrings:hover img {
    transform: scale(1.065);
  }

  .artistEnsemble img {
    object-position: left center;
    transform: scale(1.08);
    transform-origin: left center;
  }

  .artistEnsemble:hover img {
    transform: scale(1.095);
  }
}

@media (max-width: 760px) {
  .artistGallery {
    display: block;
    margin-top: 6px;
  }

  .artistCompact {
    display: block;
    gap: 6px;
    height: auto;
    margin-top: 6px;
  }

  .artistFrame {
    height: 62vw;
    min-height: 230px;
    margin-top: 6px;
  }

  .artistBambi {
    height: 76vw;
    min-height: 296px;
  }

  .artistBambi img {
    object-position: 50% 47%;
    transform: scale(1.12);
  }

  .artistBambi:hover img {
    transform: scale(1.145);
  }

  .artistVocal img {
    object-position: 52% 40%;
  }

  .artistCompact .artistFrame {
    min-height: 0;
    height: 44vw;
    margin-top: 6px;
  }

  .artistCompact .artistSax {
    height: 82vw;
    background: #05070b;
  }

  .artistSax img {
    object-fit: contain;
    object-position: center;
    transform: none;
    transform-origin: center;
  }

  .artistStrings img {
    object-position: 92% 45%;
    transform: none;
    transform-origin: right 45%;
  }

  .artistCompact .artistStrings {
    height: 82vw;
  }

  .artistCompact .artistEnsemble {
    height: 44vw;
    min-height: 0;
  }

  .artistEnsemble img {
    object-fit: cover;
    object-position: left center;
    transform: scale(1.1);
    transform-origin: left center;
  }

  .artistEnsemble:hover img {
    transform: scale(1.115);
  }
}

@media (prefers-reduced-motion: reduce) {
  .momentGrid .moment::after,
  .artistFrame::after {
    animation: none;
  }

  .artistFrame img {
    transition: none;
  }
}