/* Music pages: image sizing that respects intrinsic dimensions (desktop)
   and scales down to fit on mobile while preserving aspect ratio. */

/* Desktop-first: show images at their intrinsic size */
.music-image {
  display: block;          /* avoids inline gaps if you center later */
  width: auto;             /* use the image's natural width */
  height: auto;            /* preserve aspect ratio */
  max-width: none;         /* do not constrain on wide screens */
  max-height: none;
  image-rendering: auto;
}

/* Mobile: scale down to fit the viewport, keep aspect ratio */
@media (max-width: 768px) {
  .music-image {
    width: auto;           /* let browser compute based on max-* */
    height: auto;
    max-width: 100vw;      /* never overflow horizontally */
    max-height: 100vh;     /* never overflow vertically */
    margin: 0 auto;        /* centered on small screens */
  }
}

/* Optional: if you later wrap images in a container, you can keep this handy:
.music-container {
  overflow: hidden;
}
*/