.device{position:relative;display:inline-block}
.device__frame{
  --w:clamp(240px,38vw,420px);
  --ar:9/19.5;
  --r:clamp(12px,4vw,32px);
  --b:clamp(10px,1.4vw,14px);

  position:relative;
  width:var(--w);
  aspect-ratio:var(--ar);
  border-radius:var(--r);
  padding:var(--b);

  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(0,0,0,.6);
}
.device__screen{
  position:absolute;
  inset:var(--b);
  border-radius:calc(var(--r)*.75);
  overflow:hidden;
  background:#000;
}
.device__link{position:absolute;inset:0;z-index:2;display:block}
.device__media{position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:cover;object-position:center}

/* Variants */
.device--phone  .device__frame{--w:clamp(240px,38vw,420px);--ar:9/19.5;--r:clamp(12px,4vw,32px);--b:clamp(10px,1.4vw,14px)}
.device--tablet .device__frame{--w:clamp(320px,46vw,620px);--ar:3/4;  --r:clamp(14px,3.2vw,28px);--b:clamp(12px,1.6vw,18px)}

/* Orientation */
.device.is-landscape.device--phone  .device__frame{--w:clamp(320px,70vw,760px);--ar:19.5/9}
.device.is-landscape.device--tablet .device__frame{--w:clamp(360px,74vw,980px);--ar:4/3}

/* Small screens */
@media (max-width:576px){
  .device--tablet .device__frame{--w:min(86vw,620px)}
  .device--phone  .device__frame{--w:min(74vw,420px)}
}

.device--mini.device--phone .device__frame{
  --w: min(220px, 70vw);
}
.device--mini.device--tablet .device__frame{
  --w: min(320px, 86vw);
}

/* Make mini frames a touch lighter */
.device--mini .device__frame{
  box-shadow:
    0 20px 55px rgba(0,0,0,.34),
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(0,0,0,.55);
}