# CSS-only art direction demo

This is a CSS-only implemantation of responsive images and art direction. There are four classes: art-center, art-top-left, art-top-right, art-bottom-left, and art-bottom-right to use in different situations.

The following caveats exist for this technique:

- It depends on vmin and transform to make things happen. Sorry, IE8!
- The centered class doesn't really center it all the way. That needs to be fixed.
- The only breakpoint is set at 40em. There could theoretically be more added.
- A large image is still loaded on mobile. Might consider combining with a backend responsive images solution.
- I haven't tested it in anything but Chrome on Mac.

No art direction
Art direction: art-center
Art direction: art-top-left
Art direction: art-top-right
Art direction: art-bottom-left
Art direction: art-bottom-right