#portfolio-design .seo-gallery{
  padding: var(--portfolio-space-section) var(--side-space) var(--portfolio-space-section);
  color: #173c62;
  background: var(--paper);
}

#portfolio-design .seo-shell{ width: var(--content); margin: 0 auto; }

#portfolio-design .seo-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
}

#portfolio-design .seo-head-copy{ max-width: 760px; }

#portfolio-design .seo-viewport{
  position: relative;
  width: 100vw;
  margin: clamp(42px, 5vw, 72px) 0 0 calc((var(--content) - 100vw) / 2);
  overflow: hidden;
  padding: 0 var(--side-space) 18px;
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  touch-action: pan-y;
}

#portfolio-design .seo-track{
  display: flex;
  width: max-content;
  animation: ds-seo-glide 98s linear infinite;
  will-change: transform;
}

#portfolio-design .seo-reel-set{
  display: flex;
  gap: clamp(12px, 1.5vw, 22px);
  padding-right: clamp(12px, 1.5vw, 22px);
}

#portfolio-design .seo-card{
  position: relative;
  display: block;
  flex: 0 0 min(560px, 45vw);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgb(23 60 98 / 17%);
  border-radius: var(--portfolio-radius-card);
  background: #fff;
  box-shadow: var(--portfolio-shadow-card);
}

#portfolio-design .seo-card img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  transition: transform 440ms cubic-bezier(.22, .75, .2, 1);
}

#portfolio-design .seo-card:hover img,
#portfolio-design .seo-card:focus-visible img{ transform: scale(1.025); }
#portfolio-design .seo-card:active img{ transform: scale(.99); }

#portfolio-design .seo-card::after{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 28%;
  content: "";
  background: linear-gradient(180deg, transparent, rgb(23 60 98 / 66%));
  pointer-events: none;
}

#portfolio-design .seo-index{
  position: absolute;
  z-index: 1;
  right: 12px;
  bottom: 11px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

#portfolio-design .seo-viewport:hover .seo-track,
#portfolio-design .seo-viewport:focus-within .seo-track{ animation-play-state: paused; }

@keyframes ds-seo-glide{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}

@media (max-width: 599px){
  #portfolio-design .seo-head{ display: block; }
  #portfolio-design .seo-viewport{ margin-left: calc((100% - 100vw) / 2); }
  #portfolio-design .seo-card{ flex-basis: min(560px, 78vw); }
}

@media (prefers-reduced-motion: reduce){
  #portfolio-design .seo-track{ animation-duration: .01ms; }
}