@media (max-width: 720px) {
  .project-carousel .project-grid,
  .project-carousel .project-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--copper) transparent;
    padding: 4px 4px 16px;
  }

  .project-carousel .project-grid > .project,
  .project-carousel .project-track > .project {
    flex: 0 0 88%;
    min-width: 0;
    height: auto;
    scroll-snap-align: start;
  }

  .project-carousel .project-track::-webkit-scrollbar,
  .project-carousel .project-grid::-webkit-scrollbar {
    display: block;
    height: 4px;
  }

  .project-carousel .project-track::-webkit-scrollbar-thumb,
  .project-carousel .project-grid::-webkit-scrollbar-thumb {
    background: var(--copper);
    border-radius: 2px;
  }

  .project-carousel .project:only-child {
    flex-basis: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    .project-carousel .project-grid,
    .project-carousel .project-track {
      scroll-behavior: auto;
    }
  }

}