/* Basic styling for the grid container */
.audio-grid {
  display: grid;
  /* 5 columns on large screens, each taking up an equal fraction of the space */
  grid-template-columns: repeat(5, 1fr); 
  gap: 20px; /* Space between grid items */
  padding: 20px;
}

/* Styling for individual audio cards */
.audio-card {
  border: 10px solid #ccc;
  padding: 15px;
  text-align: center;
  /* Optional: Add shadow, background, etc. */
}

/* Styling for thumbnails */
.audio-thumbnail {
  width: 100%; /* Image takes full width of its container */
  /* Ensures all thumbnails have a consistent aspect ratio (e.g., square) */
  aspect-ratio: 1 / 1; 
  object-fit: cover; /* Prevents images from stretching and crops them to fit */
  display: block;
  margin-bottom: 10px;
}

/* Styling for the audio player */
.audio-card audio {
  width: 100%; /* Ensures audio player is responsive */
  margin-top: 10px;
}

/* --- Responsive Design with Media Queries --- */

/* For tablets and medium screens (e.g., screens up to 768px wide) */
@media screen and (max-width: 768px) {
  .audio-grid {
    /* Change to 2 columns on medium screens */
    grid-template-columns: repeat(2, 1fr); 
  }
}

/* For mobile devices (e.g., screens up to 480px wide) */
@media screen and (max-width: 480px) {
  .audio-grid {
    /* Change to 1 column on small screens, stacking elements vertically */
    grid-template-columns: 1fr; 
  }
}