:root {
        --ink: #030303;
        --coal: #0b0b0b;
        --ash: #171717;
        --fog: #9d9a93;
        --bone: #f2eee5;
        --line: rgba(255, 255, 255, 0.1);
        --ease-drift: cubic-bezier(0.2, 0.7, 0.2, 1);
      }

      * {
        box-sizing: border-box;
      }

      html {
        background: var(--ink);
        overflow-x: hidden;
        overscroll-behavior-x: none;
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        min-width: 320px;
        max-width: 100%;
        overflow-x: hidden;
        touch-action: pan-y;
        background: var(--ink);
        color: var(--bone);
        font-family: Inter, ui-sans-serif, system-ui, sans-serif;
      }

      main {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      @supports (overflow-x: clip) {
        html,
        body,
        main {
          overflow-x: clip;
        }
      }

      body.viewer-open {
        overflow: hidden;
      }

      body.is-folder-view #approach {
        display: none;
      }

      button,
      a {
        -webkit-tap-highlight-color: transparent;
      }

      button {
        font: inherit;
      }

      img {
        display: block;
      }

      ::selection {
        background: var(--bone);
        color: var(--ink);
      }

      ::-webkit-scrollbar {
        width: 10px;
        height: 8px;
      }

      ::-webkit-scrollbar-track {
        background: #050505;
      }

      ::-webkit-scrollbar-thumb {
        background: #24211d;
      }

      ::-webkit-scrollbar-thumb:hover {
        background: #3a352e;
      }

      .hero {
        position: relative;
        display: flex;
        min-height: 100vh;
        align-items: flex-end;
        overflow: hidden;
        padding: 1.25rem 1.25rem 2.5rem;
      }

      .hero__image {
        position: absolute;
        inset: 0;
        z-index: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        animation: hero-settle 2.4s ease-out both;
      }

      .hero::before,
      .hero::after,
      .grain {
        pointer-events: none;
        position: absolute;
        inset: 0;
        content: "";
      }

      .hero::before {
        z-index: 1;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9));
      }

      .hero::after {
        z-index: 1;
        background:
          radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.18) 46%, rgba(0, 0, 0, 0.76) 100%),
          linear-gradient(90deg, rgba(0, 0, 0, 0.62), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.62));
      }

      .grain {
        z-index: 2;
        opacity: 0.35;
        mix-blend-mode: soft-light;
        background-image:
          radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px),
          radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px),
          radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px);
        background-size: 3px 3px, 5px 5px, 7px 7px;
      }

      .top-nav {
        position: absolute;
        z-index: 3;
        top: 1.25rem;
        left: 1.25rem;
        right: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--line);
        padding-bottom: 1rem;
        font-size: 0.66rem;
        letter-spacing: 0.34em;
        text-transform: uppercase;
      }

      .top-nav a {
        color: rgba(242, 238, 229, 0.7);
        text-decoration: none;
        transition: color 240ms ease;
      }

      .top-nav a:hover {
        color: var(--bone);
      }

      .hero__content {
        position: relative;
        z-index: 3;
        max-width: 72rem;
        animation: lift-in 1.6s 250ms ease-out both;
      }

      .eyebrow {
        margin: 0 0 1.25rem;
        color: rgba(242, 238, 229, 0.55);
        font-size: 0.68rem;
        letter-spacing: 0.46em;
        text-transform: uppercase;
      }

      .hero h1 {
        margin: 0;
        color: var(--bone);
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: clamp(3.8rem, 13vw, 13rem);
        font-weight: 300;
        letter-spacing: 0;
        line-height: 0.82;
      }

      .collection-nav {
        position: sticky;
        top: 0;
        z-index: 30;
        border-block: 1px solid var(--line);
        background: rgba(0, 0, 0, 0.6);
        padding: 0.85rem 1rem;
        backdrop-filter: blur(18px);
      }

      .collection-nav__toggle {
        display: flex;
        width: min(100%, 28rem);
        min-height: 3rem;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        border: 1px solid rgba(242, 238, 229, 0.28);
        border-radius: 999px;
        background: rgba(242, 238, 229, 0.9);
        color: var(--ink);
        cursor: pointer;
        padding: 0.78rem 1.2rem;
        font-size: 0.74rem;
        letter-spacing: 0.18em;
        line-height: 1.2;
        text-transform: uppercase;
      }

      .collection-nav__inner {
        display: none;
        width: min(100%, 28rem);
        max-width: 80rem;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
        margin: 0.85rem auto 0;
      }

      .collection-nav.is-open .collection-nav__inner {
        display: flex;
      }

      .category-button {
        width: 100%;
        min-height: 3rem;
        max-width: calc(100vw - 2rem);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.03);
        color: rgba(242, 238, 229, 0.58);
        cursor: pointer;
        padding: 0.72rem 1rem;
        text-align: center;
        font-size: 0.74rem;
        letter-spacing: 0.14em;
        line-height: 1.25rem;
        text-transform: uppercase;
        transition:
          border-color 700ms var(--ease-drift),
          background 700ms var(--ease-drift),
          color 700ms var(--ease-drift);
      }

      .category-button:hover {
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.07);
        color: var(--bone);
      }

      .category-button.is-active {
        border-color: rgba(242, 238, 229, 0.7);
        background: rgba(242, 238, 229, 0.9);
        color: var(--ink);
      }

.archive,
.approach,
.contact,
.footer {
  padding-inline: 1.25rem;
}

.archive,
.approach,
.contact {
  scroll-margin-top: 7rem;
}

      .archive {
        padding-block: 5rem;
      }

      .wrap {
        max-width: 80rem;
        margin: 0 auto;
      }

      .archive__intro {
        display: grid;
        gap: 2rem;
        margin-bottom: 5rem;
        border-bottom: 1px solid var(--line);
        padding-bottom: 3rem;
      }

      .section-label {
        margin: 0;
        color: rgba(242, 238, 229, 0.45);
        font-size: 0.68rem;
        letter-spacing: 0.42em;
        text-transform: uppercase;
      }

      .collections {
        display: grid;
        gap: 6rem;
      }

.collection {
  display: grid;
  gap: 2.25rem;
}

.collection__meta {
  align-self: start;
  justify-self: center;
  text-align: center;
}

      .collection__number {
        margin: 0 0 1.25rem;
        color: rgba(242, 238, 229, 0.35);
        font-size: 0.64rem;
        letter-spacing: 0.38em;
      }

      .collection h2,
      .folder h3,
      .approach h2,
      .footer__brand,
      .viewer__title {
        font-family: "Cormorant Garamond", Georgia, serif;
        font-weight: 300;
      }

      .collection h2 {
        margin: 0;
        font-size: clamp(2.5rem, 6vw, 4rem);
      }

.collection__description,
.folder__description {
  max-width: 26rem;
  margin: 1.25rem 0 0;
        color: rgba(242, 238, 229, 0.52);
        font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.75;
}

.collection__description {
  margin-inline: auto;
}

      .folders {
        display: grid;
        gap: 3rem;
      }

.folder-grid {
  display: grid;
  gap: 1rem;
  width: min(100%, 48rem);
  margin-inline: auto;
}

.folder-card {
  position: relative;
  display: grid;
  min-height: 22rem;
  overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: var(--ash);
  color: var(--bone);
  cursor: pointer;
  padding: 0;
  text-align: left;
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-size: 22rem;
  isolation: isolate;
}

.folder-card::after {
  position: absolute;
  inset: 0;
  z-index: 1;
        background:
          linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.2) 58%, rgba(0, 0, 0, 0.46)),
          radial-gradient(circle at 80% 10%, rgba(242, 238, 229, 0.12), transparent 35%);
  content: "";
}

.folder-card__category {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 92%;
  padding: 1.25rem;
  color: var(--bone);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.8rem, 7vw, 6.4rem);
  font-weight: 300;
  line-height: 0.95;
  text-align: center;
  overflow-wrap: anywhere;
}

.folder-card img {
  position: absolute;
  inset: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        opacity: 0.82;
        transform: scale(1.01);
        transition:
          opacity 900ms var(--ease-drift),
          transform 1400ms var(--ease-drift);
      }

      .folder-card:hover img {
        opacity: 1;
        transform: scale(1.055);
      }

.folder-card__content {
  position: relative;
  z-index: 2;
  align-self: end;
  padding: 1.25rem;
}

      .folder-card__label,
      .folder-detail__kicker {
        margin: 0 0 0.8rem;
        color: rgba(242, 238, 229, 0.58);
        font-size: 0.62rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
      }

      .folder-card h3 {
        margin: 0;
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: clamp(2.1rem, 4vw, 3.3rem);
        font-weight: 300;
        line-height: 0.98;
      }

      .folder-card__meta {
        margin: 1rem 0 0;
        color: rgba(242, 238, 229, 0.62);
        font-size: 0.82rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

.folder-card__description {
  max-width: 32rem;
  margin: 0.95rem 0 0;
  color: rgba(242, 238, 229, 0.68);
  font-size: 0.92rem;
        font-weight: 300;
        line-height: 1.65;
      }

      .folder {
        border-top: 1px solid var(--line);
        padding-top: 1.5rem;
      }

      .folder__header {
        display: grid;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
      }

      .folder__label {
        margin: 0;
        color: rgba(242, 238, 229, 0.38);
        font-size: 0.62rem;
        letter-spacing: 0.3em;
        text-transform: uppercase;
      }

      .folder h3 {
        margin: 0;
        font-size: clamp(2rem, 4vw, 2.7rem);
      }

      .photo-grid {
        display: grid;
        gap: 1rem;
      }

.photo-card {
  min-width: 0;
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-size: 24rem;
  animation: lift-in 900ms ease-out both;
}

      .photo-card__button {
        position: relative;
        display: block;
        width: 100%;
        overflow: hidden;
        border: 0;
        background: var(--ash);
        color: var(--bone);
        cursor: pointer;
        padding: 0;
        text-align: left;
        aspect-ratio: 5 / 4;
      }

      .photo-card.is-tall .photo-card__button {
        aspect-ratio: 4 / 5;
      }

      .photo-card__button::after {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
        content: "";
        transition: background 700ms ease;
      }

      .photo-card__button:hover::after {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.08));
      }

      .photo-card img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        opacity: 0.85;
        filter: grayscale(18%);
        transition:
          transform 1600ms var(--ease-drift),
          opacity 1600ms var(--ease-drift),
          filter 1600ms var(--ease-drift);
      }

      .photo-card__button:hover img {
        opacity: 1;
        filter: grayscale(0);
        transform: scale(1.055);
      }

      .photo-card img.is-broken {
        opacity: 0.2;
      }

      .archive-back {
        display: inline-flex;
        min-height: 2.75rem;
        align-items: center;
        gap: 0.7rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.035);
        color: rgba(242, 238, 229, 0.78);
        cursor: pointer;
        padding: 0.7rem 1rem;
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        transition:
          border-color 350ms ease,
          background 350ms ease,
          color 350ms ease;
      }

      .archive-back:hover {
        border-color: rgba(255, 255, 255, 0.35);
        background: rgba(255, 255, 255, 0.07);
        color: var(--bone);
      }

      .folder-detail {
        display: grid;
        gap: 2rem;
        justify-items: center;
      }

      .folder-detail__header {
        display: grid;
        gap: 1.5rem;
        width: 100%;
        border-bottom: 1px solid var(--line);
        padding-bottom: 2rem;
        text-align: center;
      }

      .folder-detail h2 {
        max-width: 56rem;
        margin: 0 auto;
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: clamp(3.1rem, 8vw, 7.5rem);
        font-weight: 300;
        line-height: 0.9;
      }

      .folder-detail__meta {
        margin: 1rem 0 0;
        color: rgba(242, 238, 229, 0.5);
        font-size: 0.74rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }

      .folder-detail__description {
        max-width: 42rem;
        margin: 1.25rem auto 0;
        color: rgba(242, 238, 229, 0.62);
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.8;
      }

      .folder-detail .photo-grid {
        width: min(100%, 72rem);
        margin-inline: auto;
      }

      .approach {
        border-top: 1px solid var(--line);
        padding-block: 6rem;
      }

      .approach__grid {
        display: grid;
        gap: 3.5rem;
      }

      .approach h2 {
        margin: 0;
        max-width: 40rem;
        font-size: clamp(3.2rem, 7vw, 7rem);
        line-height: 0.95;
      }

      .approach__text {
        display: grid;
        gap: 1.75rem;
        color: rgba(242, 238, 229, 0.64);
        font-size: 1rem;
        font-weight: 300;
        line-height: 2;
      }

      .approach__text p {
        margin: 0;
      }

.approach__quote {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  padding-left: 1.5rem;
  color: rgba(242, 238, 229, 0.78);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.65rem;
  line-height: 1.45;
}

.contact {
  border-top: 1px solid var(--line);
  padding-block: 6rem;
}

.contact__grid {
  display: grid;
  gap: 3.5rem;
}

.contact h2 {
  max-width: 38rem;
  margin: 1.5rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 300;
  line-height: 0.95;
}

.contact-form {
  display: grid;
  gap: 1rem;
}

.contact-form label {
  display: grid;
  gap: 0.55rem;
}

.contact-form span {
  color: rgba(242, 238, 229, 0.48);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.035);
  color: var(--bone);
  font: inherit;
  font-size: 1rem;
  outline: none;
  padding: 0.95rem 1rem;
  transition:
    border-color 280ms ease,
    background 280ms ease;
}

.contact-form textarea {
  min-height: 11rem;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(242, 238, 229, 0.56);
  background: rgba(255, 255, 255, 0.06);
}

.contact-form__message {
  grid-column: 1 / -1;
}

.contact-form__submit {
  justify-self: start;
  min-height: 3rem;
  border: 1px solid rgba(242, 238, 229, 0.42);
  background: rgba(242, 238, 229, 0.9);
  color: var(--ink);
  cursor: pointer;
  padding: 0.8rem 1.35rem;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition:
    background 280ms ease,
    border-color 280ms ease,
    transform 280ms ease;
}

.contact-form__submit:hover {
  border-color: rgba(242, 238, 229, 0.75);
  background: var(--bone);
  transform: translateY(-1px);
}

.footer {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem;
      }

      .footer__grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        color: rgba(242, 238, 229, 0.48);
      }

      .footer__brand {
        margin: 0;
        color: rgba(242, 238, 229, 0.7);
        font-size: 1.7rem;
      }

      .footer__copy {
        max-width: 42rem;
        display: grid;
        gap: 0.75rem;
        font-size: 0.92rem;
        font-weight: 300;
        line-height: 1.75;
      }

      .footer__copy p {
        margin: 0;
      }

      .viewer {
        position: fixed;
        inset: 0;
        z-index: 50;
        display: flex;
        flex-direction: column;
        background: rgba(0, 0, 0, 0.98);
        color: var(--bone);
        padding: 1rem;
        animation: fade-in 350ms ease-out both;
      }

      .viewer[hidden] {
        display: none;
      }

      .viewer__top {
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--line);
        padding-bottom: 1rem;
      }

      .viewer__context {
        margin: 0;
        color: rgba(242, 238, 229, 0.45);
        font-size: 0.66rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
      }

      .viewer__stage {
        display: flex;
        min-height: 0;
        flex: 1;
        align-items: center;
        justify-content: center;
        padding-block: 1.25rem;
      }

      .viewer__frame {
        position: relative;
        display: flex;
        max-height: 100%;
        max-width: 100%;
        align-items: center;
        justify-content: center;
      }

      .viewer__image {
        max-height: calc(100vh - 15rem);
        max-width: 100%;
        object-fit: contain;
        animation: viewer-image 500ms ease-out both;
      }

      .viewer__bottom {
        border-top: 1px solid var(--line);
        padding-top: 1.25rem;
        text-align: center;
      }

      .viewer__title {
        margin: 0;
        font-size: 1.75rem;
      }

      .icon-button,
      .viewer__download,
      .viewer__close {
        display: inline-flex;
        min-height: 3rem;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.22);
        background: rgba(0, 0, 0, 0.65);
        color: rgba(242, 238, 229, 0.88);
        cursor: pointer;
        backdrop-filter: blur(12px);
        transition:
          border-color 500ms ease,
          background 500ms ease,
          color 500ms ease;
      }

      .icon-button:hover,
      .viewer__download:hover,
      .viewer__close:hover {
        border-color: rgba(255, 255, 255, 0.55);
        background: rgba(0, 0, 0, 0.82);
        color: var(--bone);
      }

.icon-button:focus-visible,
.viewer__download:focus-visible,
.viewer__close:focus-visible,
.category-button:focus-visible,
.folder-card:focus-visible,
.archive-back:focus-visible,
.contact-form__submit:focus-visible,
.photo-card__button:focus-visible {
  outline: 2px solid rgba(242, 238, 229, 0.7);
  outline-offset: 3px;
      }

      .icon-button {
        position: absolute;
        top: 50%;
        width: 3rem;
        padding: 0;
        transform: translateY(-50%);
      }

      .icon-button svg,
      .viewer__download svg,
      .viewer__close svg {
        width: 1.05rem;
        height: 1.05rem;
      }

      .viewer__prev {
        left: 0.5rem;
      }

      .viewer__next {
        right: 0.5rem;
      }

      .viewer__close {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        gap: 0.5rem;
        padding: 0.7rem 1rem;
        font-size: 0.68rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .viewer__download {
        position: absolute;
        bottom: 0.5rem;
        left: 50%;
        gap: 0.75rem;
        padding: 0.7rem 1rem;
        transform: translateX(-50%);
        font-size: 0.68rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      @keyframes hero-settle {
        from {
          opacity: 0.75;
          transform: scale(1.06);
        }

        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      @keyframes lift-in {
        from {
          opacity: 0;
          transform: translateY(24px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

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

        to {
          opacity: 1;
        }
      }

      @keyframes viewer-image {
        from {
          opacity: 0;
          transform: scale(0.985);
        }

        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      @media (min-width: 640px) {
        .hero {
          padding-inline: 2rem;
        }

        .top-nav {
          left: 2rem;
          right: 2rem;
        }

.archive,
.approach,
.contact,
.footer {
  padding-inline: 2rem;
}

        .category-button {
          padding-inline: 1.5rem;
          font-size: 0.82rem;
          letter-spacing: 0.16em;
        }

        .photo-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

    .folder-grid {
      grid-template-columns: minmax(0, 1fr);
    }

        .photo-card.is-tall {
          grid-row: span 2;
        }

        .photo-card.is-tall .photo-card__button {
          height: 100%;
        }

        .viewer {
          padding: 1.5rem 2rem;
        }

        .viewer__prev {
          left: 0.75rem;
        }

        .viewer__next {
          right: 0.75rem;
        }

        .viewer__close {
          top: 0.75rem;
          right: 0.75rem;
          letter-spacing: 0.2em;
        }

        .viewer__download {
          bottom: 0.75rem;
          padding-inline: 1.25rem;
          letter-spacing: 0.22em;
        }
      }

      @media (min-width: 768px) {
        .collection-nav {
          padding: 1rem;
        }

        .collection-nav__toggle {
          display: none;
        }

        .collection-nav__inner {
          display: flex;
          width: auto;
          margin-top: 0;
        }

        .category-button {
          width: auto;
        }

        .folder__header {
          grid-template-columns: 0.32fr 1fr;
        }

        .footer__grid {
          flex-direction: row;
          align-items: flex-start;
          justify-content: space-between;
        }
      }

      @media (min-width: 1024px) {
        .hero {
          padding-inline: 3.5rem;
          padding-bottom: 3.5rem;
        }

        .top-nav {
          left: 3.5rem;
          right: 3.5rem;
        }

        .archive,
        .approach,
        .footer {
          padding-inline: 3.5rem;
        }

        .archive {
          padding-block: 7rem;
        }

        .archive__intro {
          grid-template-columns: 0.8fr 1.2fr;
        }

    .collection__meta {
      position: static;
    }

.approach {
  padding-block: 8rem;
}

.approach__grid {
  grid-template-columns: 0.85fr 1.15fr;
}

.contact {
  padding-block: 8rem;
}

.contact__grid {
  grid-template-columns: 0.85fr 1.15fr;
}

.contact-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
      }

      @media (min-width: 1280px) {
        .photo-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

    .folder-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          scroll-behavior: auto !important;
          animation-duration: 1ms !important;
          transition-duration: 1ms !important;
        }
      }