/* How an artwork's photo sits in a fixed frame: the shop cards, the home page's wall and tiles, the
   studio's rows (ADR-0015). The frames keep one shape so the grid stays calm; each artwork chooses:
   - art-fit--whole: the whole piece, hung on the frame's mat with nothing cut off (new artworks);
   - art-fit--fill fx-N fy-N: the photo fills the frame, cropped around a point N% across and down.
   Display.FrameClasses (C#) and frameClasses (js/components/studio.js) write these classes. In the
   utilities layer, so it wins over each frame's own "cover". */

@layer utilities {
  .art-fit--whole img {
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / .22));
  }

  .art-fit--fill img {
    object-fit: cover;
    object-position: var(--fx, 50%) var(--fy, 50%);
  }

  .fx-0 { --fx: 0%; }
  .fx-10 { --fx: 10%; }
  .fx-20 { --fx: 20%; }
  .fx-30 { --fx: 30%; }
  .fx-40 { --fx: 40%; }
  .fx-50 { --fx: 50%; }
  .fx-60 { --fx: 60%; }
  .fx-70 { --fx: 70%; }
  .fx-80 { --fx: 80%; }
  .fx-90 { --fx: 90%; }
  .fx-100 { --fx: 100%; }

  .fy-0 { --fy: 0%; }
  .fy-10 { --fy: 10%; }
  .fy-20 { --fy: 20%; }
  .fy-30 { --fy: 30%; }
  .fy-40 { --fy: 40%; }
  .fy-50 { --fy: 50%; }
  .fy-60 { --fy: 60%; }
  .fy-70 { --fy: 70%; }
  .fy-80 { --fy: 80%; }
  .fy-90 { --fy: 90%; }
  .fy-100 { --fy: 100%; }
}