/* CSS-only laptop and mobile frames
   Usage: .device-mockup > .device-mockup__screen > img + optional figcaption */
.device-mockup {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  margin: 0;
  transform-style: preserve-3d;
}

.device-mockup__screen {
  position: relative;
  overflow: hidden;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--device-scale, 1));
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2, .75, .2, 1), box-shadow .45s ease;
  will-change: transform;
}

.device-mockup__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.device-mockup figcaption {
  margin-top: 26px;
  color: #5a675e;
  font-size: .78rem;
  font-weight: 750;
  text-align: center;
}

.device-mockup--laptop { padding-bottom: 18px; }

.device-mockup--laptop .device-mockup__screen {
  overflow: visible;
  aspect-ratio: 16 / 10;
  padding: 17px 13px 13px;
  background: linear-gradient(145deg, #27322c, #111814);
  border: 1px solid #46534b;
  border-radius: 16px 16px 8px 8px;
  box-shadow: 0 30px 70px rgba(19, 33, 23, .24), inset 0 1px rgba(255, 255, 255, .16);
}

.device-mockup--laptop .device-mockup__screen::before {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 4px;
  content: "";
  background: #66736b;
  border-radius: 50%;
  transform: translateX(-50%);
}

.device-mockup--laptop .device-mockup__screen::after {
  position: absolute;
  right: -5%;
  bottom: -17px;
  left: -5%;
  height: 17px;
  content: "";
  background: linear-gradient(180deg, #dfe4e0, #aeb7b0);
  border-radius: 2px 2px 45% 45%;
  box-shadow: 0 10px 20px rgba(26, 42, 31, .16);
}

.device-mockup--laptop .device-mockup__screen img { border-radius: 4px; }

.device-mockup--mobile { width: min(100%, 245px); padding-bottom: 8px; }

.device-mockup--mobile .device-mockup__screen {
  aspect-ratio: 9 / 18.5;
  padding: 23px 8px 24px;
  background: linear-gradient(145deg, #27332c, #101612);
  border: 1px solid #465149;
  border-radius: 34px;
  box-shadow: 0 28px 65px rgba(19, 33, 23, .27), inset 0 1px rgba(255, 255, 255, .18);
}

.device-mockup--mobile .device-mockup__screen::before {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 50%;
  width: 42px;
  height: 5px;
  content: "";
  background: #5d6861;
  border-radius: 999px;
  transform: translateX(-50%);
}

.device-mockup--mobile .device-mockup__screen::after {
  position: absolute;
  z-index: 2;
  bottom: 9px;
  left: 50%;
  width: 46px;
  height: 4px;
  content: "";
  background: #68736c;
  border-radius: 999px;
  transform: translateX(-50%);
}

.device-mockup--mobile .device-mockup__screen img { border-radius: 20px; object-position: 40% top; }

.device-mockup:hover { --device-scale: 1.012; }
.device-mockup:hover .device-mockup__screen { box-shadow: 0 38px 82px rgba(19, 33, 23, .3), inset 0 1px rgba(255, 255, 255, .18); }

@media (max-width: 720px) {
  .device-mockup--mobile { width: min(72vw, 235px); }
  .device-mockup--laptop .device-mockup__screen { padding: 12px 9px 9px; border-radius: 11px 11px 6px 6px; }
  .device-mockup figcaption { margin-top: 22px; }
}

@media (prefers-contrast: more) {
  .device-mockup__screen { border-color: #f1f4f2; }
}