* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f2f5;
    padding: 20px; /* Added padding around the body */
}

.image-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Space between each image link */
}

.image-links a {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    max-width: 800px; /* Replace with the natural width of your images */
    text-align: center;
    overflow: hidden;
}

.image-wrapper {
    padding: 10px; /* Padding around the image */

}

.image-wrapper img {
    width: 100%;
    height: auto;
    max-height: 20vh; /* Image takes up to 25% of viewport height */
    max-width: 100%;
    object-fit: contain; /* Maintain aspect ratio without cropping */
    transition: transform 0.2s;
}

.image-wrapper img:hover {
    transform: scale(1.03);
}

.link-text {
    padding: 10px; /* Padding around the text */
    font-size: 1rem;
    color: #333;
}

@media (min-width: 768px) {
    .image-links a {
        max-width: 500px; /* Limit the max-width on larger screens */
    }
}

/* body{
  margin:0;
  padding:2rem 1rem;
  background:#f9f9f9;
  font-family:Arial,Helvetica,sans-serif;
  text-align:center;               /* centre the wrapper horizontally */
/* }

/* -------------------------------------------------
   Wrapper – max‑width 400 px on desktop,
   full‑width on small screens
   ------------------------------------------------- */
.wrapper{
  display:inline-block;            /* makes margin:auto work with text‑align:center */
  width:100%;
  max-width:400px;                 /* desktop cap */
  box-sizing:border-box;
}

/* -------------------------------------------------
   Each track – stacked vertically (default block)
   ------------------------------------------------- */
.track{
  background:#fff;
  border:1px solid #ddd;
  border-radius:6px;
  padding:1rem;
  margin:0 0 1rem;                 /* space between tracks */
  box-shadow:0 2px 4px rgba(0,0,0,.05);
  text-align:left;                 /* keep title / audio left‑aligned inside */
}
.track h3{
  margin:0 0 .5rem;
  font-size:1.1rem;
  color:#333;
  text-align:center;
}
audio{
  width:100%;
  display:block;
}


/* @media (max-width:400px){
  .wrapper{
    max-width:none;                
  }
} */