/* 可裁切圖層的共用規則。**前台與後台都載入這一份。**
   後台的裁切預覽用的就是這些規則，所以店家拖出來的構圖
   就是客人看到的構圖。分成兩份寫遲早會不一致。 */

.img-layer {
  position: absolute; inset: 0; display: block; z-index: 0;
  background-size: cover; background-repeat: no-repeat;
  transform-origin: center;
}

/* img 版本，用在需要 alt 的地方（店徽）。外層負責裁切，img 負責定位縮放。 */
.img-crop {
  width: 100%; height: 100%; display: block;
  object-fit: cover; transform-origin: center;
}