/* Shared Jitka screenshots: a dominant desktop with a bounded mobile overlay.
   Only the lower mobile content is masked; image pixels keep their native ratio. */
.jitka-preview {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  isolation: isolate;
}

/* Desktop: preserve the original screenshot proportions */
.jitka-preview > .jitka-preview__desktop {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  box-shadow: none;
}

/* Mobile overlay: full image, no clipping */
.jitka-preview > .jitka-preview__mobile {
  position: absolute;
  top: 8%;
  right: 3%;
  width: 22%;
  height: auto;
  max-height: none;
  overflow: visible;
  box-sizing: border-box;
  border: 1px solid #bfc6bd;
  background: #f7f4f0;
  box-shadow: 0 12px 35px rgb(0 0 0 / 0.12);
}

.jitka-preview__mobile > img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* Case study: keep the mobile image fully visible */
.jitka-case .case-opening-screen {
  overflow: visible;
}

.jitka-case .case-opening-screen
  > .jitka-preview__mobile {
  top: 6%;
  right: 3%;
  width: 20%;
}

/* Separate composition in the web section */
.jitka-case .case-web-composition .jitka-preview
  > .jitka-preview__mobile {
  top: 5%;
  right: 3%;
  width: 20%;
}

@media (max-width: 620px) {
  .jitka-preview > .jitka-preview__mobile {
    top: 8%;
    right: 2%;
    width: 25%;
  }
}