.arcade-page .project-hero__artwork {
  background: var(--blue-fg) url("assets/arcade/swirl.webp") center / cover;
}

.project-hero__swatch {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

.project-hero__swatch--left {
  top: 50%;
  left: -6%;
  width: auto;
  height: 82%;
  transform: translateY(-50%) rotate(-5deg);
}

.project-hero__swatch--panel {
  top: 92.3%;
  left: 2.3%;
  width: 34%;
  height: auto;
  aspect-ratio: 420 / 526;
  transform: translateY(-50%);
}

.project-hero__swatch--right {
  top: 0;
  right: 0;
  left: auto;
  width: auto;
  height: 100%;
}

.project-hero__swatch--phone {
  top: 7.7%;
  left: 50%;
  width: 184px;
  height: auto;
  aspect-ratio: 435 / 942;
  border-radius: 24px;
  box-shadow: 0 16px 48px 12px rgba(0,0,0,.32);
  transform: translateX(-50%);
}

.project-hero__swatch--card {
  top: 7.5%;
  left: .75%;
  width: 16.4%;
  height: auto;
  aspect-ratio: 176 / 170;
  transform: translateY(-50%);
}

.detail-card--edit .detail-card__media img {
  width: 499px;
}

.detail-card--color .detail-card__media :is(img, video) {
  width: 495px;
}

.detail-card--navigation .detail-card__media :is(img, video) {
  width: 555px;
  max-width: 100%;
}

.detail-card--choice .detail-card__media :is(img, video) {
  width: 329px;
}

.selected-work--creation .comparison--before .comparison__media :is(img, video) {
  position: absolute;
  top: 37px;
  width: 396px;
  max-height: none;
}

.selected-work--creation .comparison--after .comparison__media :is(img, video) {
  width: 100%;
}

.selected-work--iteration .comparison--before .comparison__media img {
  width: 539px;
}

.selected-work--iteration .comparison--after .comparison__media img {
  width: 585px;
}