#work .project-marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding: 6px 0 12px;
  position: relative;
}
#work .project-track {
  display: flex;
  width: max-content;
  animation: project-drift var(--marquee-duration, 44s) linear infinite;
  will-change: transform;
}
#work .project-marquee:hover .project-track,
#work .project-marquee:focus-within .project-track,
#work .project-marquee.is-touching .project-track,
#work .project-marquee.is-viewing .project-track {
  animation-play-state: paused;
}
#work .project-group {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.5vw, 20px);
  width: max-content;
  padding-right: clamp(12px, 1.5vw, 20px);
}
#work .project-group .project {
  display: block;
  flex: 0 0 clamp(260px, 25vw, 350px);
  width: clamp(260px, 25vw, 350px);
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  transform: none;
  opacity: 1;
}
#work .project-group .project[hidden] { display: none; }
#work .project-group .real-art {
  aspect-ratio: 404 / 316 !important;
  height: auto !important;
  background: #e8e6de;
  border-radius: 16px;
  overflow: hidden;
}
#work .project-group .real-art img { object-fit: contain; transform: none !important; }
#work .project-group .project-meta { padding: 11px 2px 0; }
#work .project-group .project:hover .art { transform: none; }
#work .project-group .project:hover img { transform: scale(1.025) !important; }
#work .project-marquee.is-filtered { overflow-x: auto; scrollbar-width: thin; }
#work .project-marquee.is-filtered .project-track {
  width: max-content;
  min-width: 100%;
  justify-content: center;
  animation: none;
  will-change: auto;
}
@keyframes project-drift { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 760px) {
  #work .project-group .project { flex-basis: min(76vw, 320px); width: min(76vw, 320px); }
  #work .project-group .project-meta h3 { font-size: 13px; }
  #work .project-group .project-meta p { font-size: 10px; }
  #work .project-group .real-art { border-radius: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #work .project-marquee { overflow-x: auto; scrollbar-width: thin; }
  #work .project-track { animation: none; will-change: auto; }
  #work .project-group[aria-hidden="true"] { display: none; }
  #work .project-group .project:hover img { transform: none !important; }
}