.project-preview-link { display: block; width: 100%; }
/* Authentic product captures, presented within the existing Webflow layouts. */
.project-source-image {
  width: 100%;
  height: auto;
}
.project-source-image.cover-image {
  height: 100%;
  object-fit: contain;
  background: #eeedf2;
}
.project-capture {
  margin: 2.5rem 0 0;
}
.project-capture > img,
.project-capture > a > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d3d2dc;
  border-radius: 4px;
}
.project-capture figcaption,
.project-mobile-figure figcaption {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #555360;
}
.project-mobile-pair {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 5%;
  width: 100%;
  padding: 6% 7%;
  background: #111817;
  border-radius: 4px;
}
.project-phone-capture {
  position: relative;
  width: 44%;
  aspect-ratio: 384 / 832;
  overflow: hidden;
  border-radius: 12% / 5.54%;
  flex-shrink: 0;
}
/* Crop only the reference artboard's outer canvas; preserve the source UI. */
.project-phone-capture > img {
  position: absolute;
  display: block;
  width: 333.333333%;
  max-width: none;
  height: 123.076923%;
  left: -116.666667%;
  top: -14.663462%;
}
.project-mobile-figure {
  width: 44%;
  margin: 0;
}
.project-mobile-figure .project-phone-capture {
  width: 100%;
}
.project-mobile-pair .project-mobile-figure figcaption {
  color: #cbd7d2;
}
#project-screens {
  scroll-margin-top: 7rem;
}
@media (max-width: 767px) {
  .project-capture { margin-top: 2rem; }
  .project-capture figcaption,
  .project-mobile-figure figcaption { font-size: 0.8rem; }
  .project-mobile-pair { padding: 7% 4%; gap: 5%; }
}