Filmstrip Lightbox Counter

<div class="nuda-gc2-filmstrip-counter" role="group" aria-roledescription="carousel" aria-label="Photo filmstrip">
  <div class="nuda-gc2-filmstrip-counter__main" style="background:linear-gradient(135deg,#62b6ff,#9d6dff)">
    <button type="button" class="nuda-gc2-filmstrip-counter__zoom" aria-label="Open full-screen lightbox">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" stroke="#0a0a0a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </button>
    <span class="nuda-gc2-filmstrip-counter__count" aria-live="polite">3 / 12</span>
  </div>
  <div class="nuda-gc2-filmstrip-counter__strip">
    <div class="nuda-gc2-filmstrip-counter__frame" style="background:#ff5e7a"></div>
    <div class="nuda-gc2-filmstrip-counter__frame" style="background:#ffb45e"></div>
    <div class="nuda-gc2-filmstrip-counter__frame is-on" style="background:#62b6ff"></div>
    <!-- More frames -->
  </div>
</div>

.nuda-gc2-filmstrip-counter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 260px;
}

.nuda-gc2-filmstrip-counter__main {
  position: relative;
  height: 130px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.nuda-gc2-filmstrip-counter__zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e4ff54;
  border: none;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}

.nuda-gc2-filmstrip-counter__zoom:hover {
  transform: scale(1.08);
}

.nuda-gc2-filmstrip-counter__zoom:focus-visible {
  outline: 2px solid #fafafa;
  outline-offset: 2px;
}

.nuda-gc2-filmstrip-counter__count {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  color: #fafafa;
  font-size: 11px;
  font-weight: 600;
}

.nuda-gc2-filmstrip-counter__strip {
  display: flex;
  gap: 5px;
}

.nuda-gc2-filmstrip-counter__frame {
  flex: 1;
  height: 34px;
  border-radius: 6px;
  opacity: .5;
  border: 2px solid transparent;
  transition: opacity .25s,border-color .25s,transform .25s;
}

.nuda-gc2-filmstrip-counter__frame:hover {
  opacity: .85;
  transform: translateY(-1px);
}

.nuda-gc2-filmstrip-counter__frame.is-on {
  opacity: 1;
  border-color: #e4ff54;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-gc2-filmstrip-counter__zoom,.nuda-gc2-filmstrip-counter__frame {
    transition: none;
  }
}