/**
 * 制作実績のモックアップ（parts/works/mockup.php）
 *
 * デバイスの枠にスクリーンショットをはめ込む規則。個別ページと、一覧・トップページのカードで共用する。
 */

.atb-work-mockup__canvas {
  position: relative;
  aspect-ratio: 760 / 428;
}

.atb-work-mockup__device {
  position: absolute;
}

.atb-work-mockup__frame {
  display: block;
  width: 100%;
  height: auto;
}

.atb-work-mockup__screen {
  position: absolute;
  overflow: hidden;
  background: #fff;
}

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

/* ブラウザ（PC） */
.atb-work-mockup__device.-browser-pc { left: 0; top: 0; width: 76.3%; aspect-ratio: 1360.85 / 809.65; }
.atb-work-mockup__device.-browser-pc .atb-work-mockup__screen { left: 0.63%; top: 8.4%; width: 97.77%; height: 88.25%; }

/* ブラウザ（スマホ） */
.atb-work-mockup__device.-browser-sp { left: 79.6%; top: 0; width: 14.9%; aspect-ratio: 275.3 / 547.18; }
.atb-work-mockup__device.-browser-sp .atb-work-mockup__screen { left: 0; top: 10.95%; width: 91.16%; height: 75.92%; }

/* ノートPC */
.atb-work-mockup__device.-laptop { left: 68.8%; top: 60%; width: 31.2%; aspect-ratio: 1141.77 / 675.77; }
.atb-work-mockup__device.-laptop .atb-work-mockup__screen { left: 8.83%; top: 3.38%; width: 82.17%; height: 89.3%; }

/* スマホ */
.atb-work-mockup__device.-phone { left: 58.5%; top: 64.5%; width: 8.7%; aspect-ratio: 830 / 1722; z-index: 1; }
.atb-work-mockup__device.-phone .atb-work-mockup__screen { left: 3.7%; top: 1.63%; width: 92.5%; height: 96.7%; border-radius: 11% / 5.2%; }

/* カードのサムネイルとして出すとき（一覧・トップページ） */
.atb-work-mockup.-thumb {
  box-sizing: border-box;
  width: 100%;
  padding: 1.5% 3%;
  background: #fff;
}

/* 一覧（Arkhe の投稿リストのカード）のサムネイルの枠いっぱいに置く */
.c-postThumb__figure > .atb-work-mockup.-thumb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.atb-work-mockup.-thumb .atb-work-mockup__canvas {
  width: 100%;
}