.play-page .project-hero__artwork {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-fg);
}

.play-page .project-hero__artwork > img {
  position: absolute;
  top: -69px;
  left: 0;
  width: 100%;
  height: 684px;
  max-width: none;
  object-fit: cover;
}

.play-page .project-hero h1 { letter-spacing: 0; }

.play-award-badge {
  display: block;
  width: 274px;
  height: auto;
  flex: 0 0 auto;
  color: var(--white);
  fill: currentColor;
}

.play-award-badge svg { display: block; width: 100%; height: auto; fill: currentColor; }
.play-award-badge text { fill: currentColor; }
.play-award-badge__winner { font: 400 128px var(--serif); }
.play-award-badge__title { font: 700 256px var(--caption); }

.play-page .play-hero__content { margin-top: 32px; row-gap: 32px; }
.play-page .play-hero__content h1 { grid-column: 1; grid-row: 1; align-self: center; }
.play-page .play-hero__content .play-award-badge { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; }
.play-page .play-hero__content .project-hero__description { grid-column: 1; grid-row: 2; }
.play-page .play-hero__content .project-hero__meta { grid-column: 2; grid-row: 2; }

.play-detail-grid { grid-template-columns: repeat(2, minmax(0, 556px)); row-gap: 64px; }
.play-detail-grid .detail-card { min-width: 0; }
.play-detail-grid .detail-card__media { position: relative; }
.play-detail-grid .detail-card__media img { max-width: none; max-height: none; object-fit: cover; }
.play-detail-card--menu .detail-card__media img { width: min(484px, calc(100% - 40px)); height: auto; }
.play-detail-card--mobile-menu .detail-card__media video { position: absolute; top: 50%; left: 50%; width: 724px; height: 723px; max-width: none; max-height: none; object-fit: cover; transform: translate(-50%, -50%); }
.play-detail-card--education .detail-card__media img { position: static; width: auto; height: calc(100% - 40px); max-width: calc(100% - 40px); object-fit: contain; transform: none; }
.play-detail-card--code .detail-card__media video { width: min(521px, calc(100% - 34px)); height: auto; max-width: none; max-height: calc(100% - 40px); object-fit: contain; }
.play-detail-card--prototype .detail-card__media { place-items: center; padding-top: 0; }
.play-detail-card--prototype .detail-card__media video,
.play-detail-card--native .detail-card__media video { position: absolute; top: 0; left: 50%; width: auto; height: 100%; max-width: none; max-height: none; object-fit: contain; transform: translateX(-50%); }
.play-detail-card--data .detail-card__media > span { position: relative; display: block; overflow: hidden; width: 477px; height: 321px; }
.play-detail-card--data .detail-card__media img { position: absolute; top: -236px; left: -50px; width: 1497px; height: 1381px; }

.play-marquee { position: absolute; inset: 21px 0; overflow: hidden; }
.play-marquee__track { display: flex; width: max-content; height: 331px; animation: play-menu-marquee 120s linear infinite; will-change: transform; }
.play-detail-grid .play-marquee__track img { width: 1097px; height: 331px; flex: 0 0 auto; object-fit: cover; }

@keyframes play-menu-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.play-selected { display: flex; width: 100%; flex-direction: column; gap: 25px; }
.play-selected__intro { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 566px; gap: 64px; padding-bottom: 64px; }
.play-selected .selected-work__heading { width: 100%; }
.play-selected .selected-work__copy,
.play-selected .selected-work__essay { position: static; width: 100%; }
.play-selected .selected-work__copy { display: flex; flex-direction: column; gap: 24px; }
.play-selected .selected-work__copy p,
.play-selected .selected-work__essay,
.play-selected__closing p { margin: 0; font: 300 16px/24px var(--serif); letter-spacing: -.64px; }
.play-selected .selected-work__copy .selected-work__question { margin: 0; font-size: 20px; font-weight: 400; line-height: 24px; letter-spacing: -1.1px; }
.play-selected h2 { margin: 0; font: 400 40px/48px var(--serif); letter-spacing: -2px; }

.play-comparisons { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(550px, 1fr)); gap: 64px; }
.play-comparisons .comparison { position: relative; inset: auto; width: auto; min-width: 0; }
.play-comparisons .comparison__media { width: 100%; }
.play-comparisons .comparison__media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.play-comparisons .comparison > p { width: calc(100% - 128px); max-width: 600px; margin: 16px auto 0; text-align: center; }
.play-comparisons .comparison__badge,
.play-comparisons .comparison--after .comparison__badge { left: 24px; }
.play-comparisons .comparison--before .comparison__media img,
.play-comparisons .comparison--before .comparison__media video { mix-blend-mode: normal; }
.play-comparison--mobile .comparison__media img { width: 208px; max-height: 450px; }
.play-comparison--desktop .comparison__media img { width: 559px; max-height: 401px; }

.play-selected > .selected-work__essay,
.play-selected__closing { width: 566px; margin: 23px 0 0 auto; }
.play-selected__closing { display: flex; flex-direction: column; gap: 48px; }

@media (min-width: 1001px) and (max-width: 1291px) {
  .play-selected__intro { grid-template-columns: 1fr; gap: 32px; }
  .play-selected .selected-work__copy,
  .play-selected > .selected-work__essay,
  .play-selected__closing { width: 100%; max-width: 600px; margin-right: auto; margin-left: auto; }
  .play-comparisons { grid-template-columns: 1fr; gap: 64px; }
}

@media (max-width: 1000px) {
  .play-page .project-hero__artwork > img { top: -14.8%; height: 146.5%; }
  .play-page .play-hero__content { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 40px; margin-top: 40px; }
  .play-page .play-hero__content h1 { grid-column: 1; grid-row: 1; }
  .play-page .play-hero__content .play-award-badge { grid-column: 2; grid-row: 1; }
  .play-page .play-hero__content .project-hero__description { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .play-page .play-hero__content .project-hero__meta { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
  .play-selected__intro { grid-template-columns: 1fr; gap: 32px; }
  .play-selected .selected-work__copy,
  .play-selected > .selected-work__essay,
  .play-selected__closing { width: 100%; max-width: 600px; margin-right: auto; margin-left: auto; }
  .play-comparisons { grid-template-columns: 1fr; gap: 64px; }
  .play-comparisons .comparison { margin: 0; }
}

@media (max-width: 680px) {
  .play-page .play-hero__content { display: flex; flex-direction: column; row-gap: 0; }
  .play-page .play-hero__content h1 { order: 1; align-self: flex-start; }
  .play-page .play-hero__content .project-hero__description { order: 2; margin-top: 40px; }
  .play-page .play-hero__content .project-hero__meta { order: 3; margin-top: 40px; }
  .play-page .play-hero__content .play-award-badge { width: min(274px, 100%); order: 4; align-self: center; margin-top: 40px; }
  .play-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .play-detail-grid .detail-card__media img { max-width: none; }
  .play-selected__intro { padding-bottom: 64px; }
  .play-comparisons .comparison > p { width: 100%; text-align: left; }
}