/* Screenshot — product screen images (assets/img/screens/)
   The source PNGs have a dark 1–2 px outline and dark corners. The frame
   rounds the corners, the image is scaled up 1% so that outline falls
   outside the frame, and an inside border (border-default) is drawn on top. */

.screenshot {
  position: relative;
  display: grid; /* also stacks cross-fade slides in one cell */
  overflow: hidden;
  border-radius: var(--screenshot-radius);
  background: var(--color-surface-page);
}

.screenshot img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.01); /* pushes the dark outline outside the frame */
}

/* Inside border drawn above the image */
.screenshot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--screenshot-border-width) var(--color-border-default);
  pointer-events: none;
}