/* ==========================================================================
   GENERATED by tools/build-photo-css.py from content/image-slots.json.
   Do not hand-edit: change the JSON and re-run.

   Each rule fixes the box a photograph occupies (aspect-ratio, so the
   browser reserves it before the image loads) and where the image is
   anchored inside it (object-position, from the slot's focal point).

   A slot marked "fill" is stretched to a box the layout sizes instead,
   and gets no aspect-ratio — otherwise the image would set the height and
   could grow taller than the section holding it.

   A separate file rather than inline styles because the CSP is
   style-src 'self' with no 'unsafe-inline'.
   ====================================================================== */

.photo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* hero — stretched to the box its section sizes */
.photo--hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.photo--hero {
  object-position: 50% 62%;
}
@media (max-width: 79.999rem) {
  .photo--hero {
    object-position: 50% 50%;
  }
}
@media (max-width: 47.999rem) {
  .photo--hero {
    object-position: 50% 72%;
  }
}

.photo--showroom {
  aspect-ratio: 3 / 2;
  object-position: 50% 46%;
}

.photo--sortiment-klangschalen {
  aspect-ratio: 4 / 3;
  object-position: 50% 48%;
}

.photo--sortiment-gongs {
  aspect-ratio: 4 / 3;
  object-position: 50% 46%;
}

.photo--sortiment-kristallklang {
  aspect-ratio: 4 / 3;
  object-position: 42% 50%;
}

.photo--sortiment-instrumente {
  aspect-ratio: 4 / 3;
  object-position: 50% 55%;
}

.photo--sortiment-zubehoer {
  aspect-ratio: 4 / 3;
  object-position: 50% 50%;
}

.photo--pro-hotels {
  aspect-ratio: 16 / 10;
  object-position: 50% 52%;
}

.photo--pro-therapeuten {
  aspect-ratio: 16 / 10;
  object-position: 50% 48%;
}