refactor(cosmicfest): Adjust gallery photo sizes and audio player layout

Addresses feedback from previous commit:
- Increases the size of V0 gallery photos by adjusting grid min-width and item height.
- Updates the audio section title to "audio ~ ParVagues" and description as requested.
- Implements a flex layout for the Bandcamp and SoundCloud players:
    - Players are displayed side-by-side on screens wider than 768px.
    - Players stack vertically on screens 768px or narrower.

next/pages/cosmicfest/index.js

@@ -127,16 +127,18 @@ export default function CosmicFestHome() {
             ))}
           </ul>
 
-          <h3 style={{marginTop: '2rem'}}>live@cosmicfest v0 (audio)</h3>
+          <h3 style={{marginTop: '2rem'}}>audio ~ ParVagues</h3>
           <p>
-            écoutez le live track-par-track (qualité master via Bandcamp) ou en version mix continu ci-dessous (téléchargement gratuit activé sur SoundCloud).
+            ecoute chaque piste ~ ecoute le set entier ~ telecharge le tout
           </p>
-          <div className={styles.audioEmbed}>
+          <div className={styles.audioPlayersContainer}>
+            <div className={`${styles.audioEmbed} ${styles.bandcampPlayer}`}>
               <iframe title="Bandcamp player for Parvagues live at Cosmicfest" style={{border: 0, width: "100%", maxWidth: "350px", height: "470px"}} src="https://bandcamp.com/EmbeddedPlayer/album=644862623/size=large/bgcol=333333/linkcol=0f91ff/tracklist=true/artwork=small/transparent=true/" seamless><a href="https://parvagues.bandcamp.com/album/live-cosmicfest">live@cosmicfest by ParVagues</a></iframe>
             </div>
-          <div className={styles.audioEmbed} style={{marginTop: "2rem"}}>
+            <div className={`${styles.audioEmbed} ${styles.soundcloudPlayer}`}>
               <iframe title="Soundcloud player for Parvagues live at Cosmicfest" width="100%" height="450" scrolling="no" frameBorder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/2121089043&color=%233e00f7&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style={{fontSize: "10px", color: "#cccccc",lineBreak: "anywhere",wordBreak: "normal",overflow: "hidden",whiteSpace: "nowrap",textOverflow: "ellipsis", fontFamily: "Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif",fontWeight: "100"}}><a href="https://soundcloud.com/parvagues" title="ParVagues" target="_blank" rel="noopener noreferrer" style={{color: "#cccccc", textDecoration: "none"}}>ParVagues</a> · <a href="https://soundcloud.com/parvagues/cosmicfest" title="Live@cosmicfest 🌊🌅" target="_blank" rel="noopener noreferrer" style={{color: "#cccccc", textDecoration: "none"}}>Live@cosmicfest 🌊🌅</a></div>
             </div>
+          </div>
         </section>
 
         <section className={styles.section} id="next-edition">

next/styles/cosmicfest.module.css

@@ -196,10 +196,69 @@
   font-size: 0.9rem;
 }
 
-.audioEmbed {
+.audioEmbed { /* This class is now on the individual player wrappers */
   display: flex;
   justify-content: center;
-  margin: 1rem 0;
+  /* margin: 1rem 0; Retained for stacking, but might be overridden by flex container gap or item margins */
+}
+
+.audioPlayersContainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap; /* Allow players to wrap to next line if not enough space */
+  justify-content: space-around; /* Distribute space around players */
+  align-items: flex-start; /* Align items to the top if heights differ slightly */
+  gap: 2rem; /* Spacing between players when side-by-side */
+  margin-top: 1.5rem; /* Space above the container */
+}
+
+.bandcampPlayer, .soundcloudPlayer {
+  flex: 1 1 350px; /* Grow, shrink, with a base width related to Bandcamp's max-width */
+  min-width: 300px; /* Ensure they don't get too squished before wrapping */
+  margin: 0.5rem; /* Add some margin around each player for spacing */
+}
+
+.bandcampPlayer iframe {
+  max-width: 100%; /* Ensure iframe is responsive within its container */
+}
+
+.soundcloudPlayer iframe {
+  width: 100%; /* Ensure iframe takes full width of its container */
+  min-height: 450px; /* Maintain its intended height */
+}
+
+
+/* Media query for smaller screens to stack players */
+@media (max-width: 768px) { /* Breakpoint can be adjusted based on when it looks best */
+  .audioPlayersContainer {
+    flex-direction: column;
+    align-items: center; /* Center players when stacked */
+  }
+  .bandcampPlayer, .soundcloudPlayer {
+    flex-basis: auto; /* Reset flex-basis for stacked layout */
+    width: 100%; /* Make players take full width when stacked */
+    max-width: 400px; /* Optional: constrain max width when stacked, e.g. for SoundCloud visual player */
+    margin: 1rem 0; /* Adjust margin for vertical stacking */
+  }
+  .hero {
+    height: 70vh; /* Adjust hero height */
+  }
+  .section {
+    margin: 2rem auto;
+    padding: 1.5rem clamp(0.5rem, 3vw, 1.5rem);
+  }
+  .grid {
+    grid-template-columns: 1fr; /* Stack cards on smaller screens */
+  }
+  .card {
+    width: auto; /* Full width */
+  }
+  .card h3 {
+    font-size: 1.1rem; /* Further reduce font size on small screens for title/emojis */
+  }
+  .countdownContainer span div:first-child { /* The number */
+    font-size: clamp(1.8rem, 5vw, 3rem);
+  }
 }
 
 .footer a {
@@ -219,14 +278,14 @@
 /* Image gallery styles */
 .gallery {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Slightly smaller min for more items */
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Increased min item width */
   gap: 1rem;
 }
 
 /* Common styles for all gallery items (photos and video links) */
 .galleryItem {
   width: 100%;
-  height: 180px; /* Taller gallery items */
+  height: 200px; /* Increased height */
   border-radius: 8px; /* Consistent rounding */
   background-color: #ecf0f1; /* Light placeholder color for items without BG image */
   display: flex; /* Enables flexbox for content alignment */