/* Photography gives context; the unmodified screen remains the evidence. */
.app-cover {
  position: relative;
  isolation: isolate;
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #d9e4ec;
}

.app-cover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.app-cover-screen {
  position: absolute;
  inset: 17% 7% 7%;
  display: flex;
  align-items: end;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.app-cover-screen picture {
  display: contents;
}

.app-cover-screen img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  border-radius: 4px;
  box-shadow: 0 12px 28px rgb(7 22 40 / 24%);
}

.app-cover[data-cover="housing"] .app-cover-photo { object-position: center 42%; }
.app-cover[data-cover="classroom"] .app-cover-photo { object-position: center 25%; }

/* Abstract projects use the same stage, with colour drawn from the actual app. */
.app-cover:not(.app-cover--photo) .app-cover-screen { inset: 8% 6%; align-items: center; }
.app-cover[data-cover="policylens"] { background: #273a4b; }
.app-cover[data-cover="lakehouse"] { background: #c9dcd7; }
.app-cover[data-cover="hr"] { background: #d9deeb; }
.app-cover[data-cover="england"] { background: #0b1d45; }

@media (prefers-color-scheme: dark) {
  .app-cover { background: #20364c; }
  .app-cover[data-cover="lakehouse"] { background: #294b46; }
  .app-cover[data-cover="hr"] { background: #2b3653; }
}