/* Responsive image crops from the supplied design references.
   Original PNG files are copied without edits. Every rectangle below is in source pixels.
   Use class="photo photo--orthodontics" etc., role="img", and an appropriate aria-label.
   Keep the supplied aspect-ratio for an undistorted exact crop. */
.photo {
  display: block;
  width: 100%;
  aspect-ratio: var(--photo-ratio);
  background-image: var(--photo-image);
  background-size: var(--photo-size);
  background-position: var(--photo-position);
  background-repeat: no-repeat;
  background-color: #efeeeb;
  overflow: hidden;
}

/* products: x=31, y=429, width=303, height=181 */
.photo--orthodontics {
  --photo-image: url("./reference-products.png");
  --photo-ratio: 303 / 181;
  --photo-size: 329.702970% 869.613260%;
  --photo-position: 4.454023% 30.796841%;
}

/* products: x=352, y=429, width=297, height=181 */
.photo--aligners {
  --photo-image: url("./reference-products.png");
  --photo-ratio: 297 / 181;
  --photo-size: 336.363636% 869.613260%;
  --photo-position: 50.142450% 30.796841%;
}

/* products: x=667, y=429, width=301, height=181 */
.photo--restorations {
  --photo-image: url("./reference-products.png");
  --photo-ratio: 301 / 181;
  --photo-size: 331.893688% 869.613260%;
  --photo-position: 95.558739% 30.796841%;
}

/* products: x=31, y=729, width=303, height=186 */
.photo--sleep {
  --photo-image: url("./reference-products.png");
  --photo-ratio: 303 / 186;
  --photo-size: 329.702970% 846.236559%;
  --photo-position: 4.454023% 52.521614%;
}

/* products: x=352, y=729, width=297, height=186 */
.photo--vivos {
  --photo-image: url("./reference-products.png");
  --photo-ratio: 297 / 186;
  --photo-size: 336.363636% 846.236559%;
  --photo-position: 50.142450% 52.521614%;
}

/* products: x=667, y=729, width=301, height=186 */
.photo--ceph {
  --photo-image: url("./reference-products.png");
  --photo-ratio: 301 / 186;
  --photo-size: 331.893688% 846.236559%;
  --photo-position: 95.558739% 52.521614%;
}

/* products: x=31, y=1046, width=303, height=164 */
.photo--printed {
  --photo-image: url("./reference-products.png");
  --photo-ratio: 303 / 164;
  --photo-size: 329.702970% 959.756098%;
  --photo-position: 4.454023% 74.184397%;
}

/* clearbow: x=60, y=150, width=489, height=440 */
.photo--clearbow {
  --photo-image: url("./reference-clearbow.png");
  --photo-ratio: 489 / 440;
  --photo-size: 209.406953% 349.090909%;
  --photo-position: 11.214953% 13.686131%;
}

/* clearbow: x=60, y=1241, width=287, height=113 */
.photo--hawley {
  --photo-image: url("./reference-clearbow.png");
  --photo-ratio: 287 / 113;
  --photo-size: 356.794425% 1359.292035%;
  --photo-position: 8.141113% 87.210119%;
}

/* clearbow: x=369, y=1241, width=286, height=113 */
.photo--essix {
  --photo-image: url("./reference-clearbow.png");
  --photo-ratio: 286 / 113;
  --photo-size: 358.041958% 1359.292035%;
  --photo-position: 50.000000% 87.210119%;
}

/* clearbow: x=678, y=1241, width=287, height=113 */
.photo--bonded {
  --photo-image: url("./reference-clearbow.png");
  --photo-ratio: 287 / 113;
  --photo-size: 356.794425% 1359.292035%;
  --photo-position: 91.994573% 87.210119%;
}

/* home: x=0, y=1013, width=447, height=347 */
.photo--technician {
  --photo-image: url("./reference-home.png");
  --photo-ratio: 447 / 347;
  --photo-size: 200.671141% 505.475504%;
  --photo-position: 0.000000% 71.997157%;
}

/* home: x=531, y=1363, width=366, height=187 */
.photo--digital {
  --photo-image: url("./reference-home.png");
  --photo-ratio: 366 / 187;
  --photo-size: 245.081967% 937.967914%;
  --photo-position: 100.000000% 86.981493%;
}

/* home: x=456, y=98, width=441, height=416 */
.photo--hero {
  --photo-image: url("./reference-home.png");
  --photo-ratio: 441 / 416;
  --photo-size: 203.401361% 421.634615%;
  --photo-position: 100.000000% 7.324365%;
}

/* Authentic logo from ClearBow design: x=58, y=43, width=230, height=53. */
.brand {
  display: block;
  width: 230px;
  max-width: 100%;
  aspect-ratio: 230 / 53;
  background-image: url("./reference-clearbow.png");
  background-size: 445.217391% 2898.113208%;
  background-position: 7.304786% 2.899528%;
  background-repeat: no-repeat;
  flex-shrink: 0;
  overflow: hidden;
  text-indent: -9999px;
}
.brand--light {
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
}