@layer components {
  .photos-section {
    color: var(--color-ink);
  }

  .photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    padding-inline: var(--main-padding-inline);
    max-width: 1200px;
    margin-inline: auto;
  }

  .photos-grid ~ turbo-frame .photos-grid {
    margin-block-start: var(--space-2);
  }

  @media (min-width: 640px) {
    .photos-grid {
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: var(--space-4);
    }

    .photos-grid ~ turbo-frame .photos-grid {
      margin-block-start: var(--space-4);
    }
  }

  .photos-grid__item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
  }

  .photos-grid__button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }

  .photos-grid__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .photos-grid__duration {
    position: absolute;
    inset-block-end: var(--space-2);
    inset-inline-end: var(--space-2);
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius);
    background: oklch(0% 0 0 / 0.7);
    color: oklch(100% 0 0);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
  }

  /* Batch upload */

  .batch-upload__drop-zone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
  }

  .batch-upload__drop-zone--active {
    border-color: var(--color-accent);
    background-color: oklch(from var(--color-accent) l c h / 0.1);
  }

  .batch-upload__file-input {
    margin-block-start: var(--space-2);
  }

  .batch-upload__row {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-4);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
  }

  .batch-upload__preview {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
  }

  .batch-upload__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .batch-upload__fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .batch-upload__remove {
    flex-shrink: 0;
    align-self: flex-start;
    padding: var(--space-2);
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--color-ink-subtle);
    cursor: pointer;
    font-size: var(--text-sm);
  }

  .batch-upload__remove:hover {
    color: var(--color-ink);
    background-color: oklch(from var(--color-ink) l c h / 0.1);
  }

  @media (max-width: 639px) {
    .batch-upload__row {
      flex-direction: column;
    }

    .batch-upload__preview {
      width: 100%;
      height: 200px;
    }
  }

  /* View Transitions */

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 120ms;
    animation-timing-function: ease-in;
  }

  ::view-transition-old(root) {
    animation-name: fade-out;
  }

  ::view-transition-new(root) {
    animation-name: fade-in;
  }

  @keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}