# Responsive Art-Directed Photos

## Using Element Queries

By using Element Queries, with a little helper function named `isBG()` we can write repsonsive art direction rules about where we want the focal point of an image to be, and then using Element Queries we can check which elements have that image applied to them as a CSS background image, check the element's own aspect ratio, and reposition the background image inside whatever element it is set on to ensure that the desired focal point of the image is always visible.

I added all of the `border-color` just so you could see which query was applying to the image :) You can feel free to remove that!