/*
=====================================================
IMAGE CROPPING / ZOOM CONTROLS
-----------------------------------------------------
How to use:
1) Find the image class in the HTML, for example:
   class="site-image img-home-hero"
2) Edit ONLY these 3 values for that image:
   --img-scale: bigger number = more zoom
   --img-pos-x: move left/right
   --img-pos-y: move up/down

Examples:
   --img-scale: 1.00;  = no extra zoom
   --img-scale: 1.15;  = slight zoom in
   --img-scale: 1.30;  = stronger zoom in

   --img-pos-x: 50%;   = centered horizontally
   --img-pos-x: 35%;   = move crop left
   --img-pos-x: 65%;   = move crop right

   --img-pos-y: 50%;   = centered vertically
   --img-pos-y: 35%;   = move crop upward
   --img-pos-y: 65%;   = move crop downward
=====================================================
*/

.site-image {
  --img-scale: 1;
  --img-pos-x: 50%;
  --img-pos-y: 50%;
  transform: scale(var(--img-scale));
  transform-origin: center;
  object-position: var(--img-pos-x) var(--img-pos-y);
}

/* HOME PAGE */
.img-home-hero { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 38%; }
.img-home-seniors { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 36%; }
.img-home-weddings { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 35%; }
.img-home-families { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 35%; }
.img-home-fav-1 { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 42%; }
.img-home-fav-2 { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 35%; }
.img-home-fav-3 { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 33%; }
.img-home-fav-4 { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 20%; }
.img-home-fav-5 { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 50%; }
.img-home-fav-6 { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 45%; }
.img-home-couples { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 0%; }
.img-home-special { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 40%; }
.img-home-creative { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 38%; }

/* PORTFOLIO PAGE */
.img-portfolio-hero { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 40%; }
.img-portfolio-fav-1 { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 42%; }
.img-portfolio-fav-2 { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 35%; }
.img-portfolio-fav-3 { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 33%; }
.img-portfolio-fav-4 { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 20%; }
.img-portfolio-fav-5 { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 50%; }
.img-portfolio-fav-6 { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 45%; }

/* ABOUT PAGE */
.img-about-hero { --img-scale: 1.00; --img-pos-x: 20%; --img-pos-y: 35%; }
.img-about-gallery-1 { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 38%; }
.img-about-gallery-2 { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 50%; }
.img-about-gallery-3 { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 10%; }

/* CONTACT PAGE */
.img-contact-hero { --img-scale: 1.00; --img-pos-x: 20%; --img-pos-y: 35%; }

/* PUBLISHED WORK PAGE */
.img-published-hero { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 38%; }
.img-published-feature { --img-scale: 1.00; --img-pos-x: 50%; --img-pos-y: 40%; }