@layer components {
  .film-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--c-volt) transparent;
    padding-bottom: 0.35rem;
  }

  .film-strip__cell {
    position: relative;
    flex: 0 0 auto;
    width: min(78vw, 22rem);
    height: clamp(14rem, 11rem + 12vw, 24rem);
    overflow: hidden;
    background: var(--c-surface);
  }

  .film-strip__cell--wide {
    width: min(88vw, 34rem);
  }

  .film-strip__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-med) var(--ease-out);
  }

  .film-strip__cell:hover img {
    transform: scale(1.035);
  }

  .film-strip__tag {
    position: absolute;
    left: 0.85rem;
    bottom: 0.85rem;
    background: var(--c-white);
    color: var(--c-ink);
    font-size: var(--fs-mono);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.6rem;
  }

  @media (min-width: 64rem) {
    .film-strip {
      gap: 0.75rem;
    }

    .film-strip__cell {
      width: auto;
      flex: 1 1 0;
    }

    .film-strip__cell--wide {
      flex-grow: 1.85;
      width: auto;
    }
  }

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