PageSourceSearch

https://mx3.ch/

html mx3.ch collected 2026-10-02 03:56:57 UTC 394,139 bytes, 5,523 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" class="dark">
3  <head>
4    <meta charset="utf-8">
5    <meta name="description" content="mx3.ch - Swiss Music Portal: Where the music grows! 26 Radios & TVs search and broadcast the best new bands, songs & videos. Thousands of concerts, playlists and free downloads to discover. Mx3.ch, launched in 2006 by SRF Virus, SRF3, Couleur3, Rete Tre, and Radio Rumantsch. Täglich werden  von 26 Radio- & TV-Redaktionen die besten neuen Bands, Songs und Videos gesucht und ausgestrahlt. Tausende von Konzerten, Playlists und Free-Downloads zu entdecken. Mx3.ch, 2006  von SRF3, Couleur3, Rete Tre, Radio Rumantsch und SRF Virus gegründet. Chaque jour 26 rédactions Radio TV cherchent et diffusent les meilleurs nouveaux groupes, morceaux & vidéoclips. Des milliers de concerts, des playlists et des downloads gratuits à découvrir. Mx3.ch, créé en 2006 par Couleur3, SRF3, Rete Tre, Radio Rumantsch et SRF Virus. Ogni giorno 26 redazioni Radio e TV cercano e mandano in onda le migliori band, canzoni e video nuovi. Migliaia di concerti, playlist e download gratuiti da scoprire. Mx3.ch, creato nel 2006 da Rete Tre, SRF3, Couleur3, Radio Rumantsch e SRF Virus
6">
7    <title>The Swiss Music Portal - Mx3.ch</title>
8    <link rel="icon" type="image/x-icon" href="/assets/mx3/favicon-b2b4abe730d35dceb6398ab7433d8030cbc40fa287023f80cc26686382b1c574.ico" />
9
10    <meta name="viewport" content="width=device-width, initial-scale=1">
11    <meta name="apple-mobile-web-app-capable" content="yes">
12    <meta name="apple-mobile-web-app-status-bar-style" content="black">
13    <meta name="apple-mobile-web-app-title" content="mx3">
14    <meta name="csrf-param" content="authenticity_token" />
15<meta name="csrf-token" content="HMUdJSNfuzPp3gXu0clGckZ1I13t5hW9jBAJzQsw13t7axZNQTgNNrokUN88Yu6bljxp4cB3O-hooBqpdbjrXQ" />
16    <link rel="stylesheet" href="/assets/tailwind-b6e70e437d500e33444a008f5b30ea216d356b1b6650bb9bf228bb40ad72795a.css" media="all" />
17    <link rel="stylesheet" href="/packs/css/application_2024-e84f7fa7.css" media="all" />
18
19    <!-- Main font -->
20    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
21    <!-- Icons  -->
22    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200">
23
24    
24<script src="/packs/js/application_2024-2abe1e5fb8982723f213.js"></script>
24
25      
25<script type="text/javascript" src="https://colibri-js.akamaized.net/penguin/tc_SRGGD_55.js"></script>
25
26  
26<script type="text/javascript">
27  document.addEventListener('turbo:load', () => {
28    if (typeof tC !== 'undefined') {
29      tC.event.virtualPageView()
30    }
31  })
32  </script>
32
33
34    
35
36    
37  </head>
38
39  <body class="text-body-md relative font-sans font-normal text-gray-700 dark:text-gray-300 bg-fixed show red-theme to-pink-900 via-slate-800 bg-surface-500 from-gray-800 from-10% dark:bg-gradient-to-b" data-controller="spinner aria-announcer" data-action="aria-announcer:announce@window->aria-announcer#announce">
40    <div data-spinner-target="spinner" class="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-black bg-opacity-50 z-[9999] hidden">
41      <div class="w-[50px] h-[50px] rounded-full border-[5px] border-gray-200 border-t-blue-500 animate-spin"></div>
42    </div>
43
44        
44<script
45        id="usercentrics-cmp"
46        src="https://app.usercentrics.eu/browser-ui/latest/loader.js"
47        data-ruleset-id="w5grYafxCHCrba"
48        async>
49    </script>
49
50
51    
52    <!-- Skip links for keyboard users -->
53    <a href="#main-content" class="sr-only focus:absolute focus:z-[100] focus:px-4 focus:py-2 focus:bg-primary-600 focus:text-white dark:focus:bg-primary-200 dark:focus:text-primary-800 focus:rounded">
54      Skip to main content
55    </a>
56    <a href="#site-navigation" class="sr-only focus:absolute focus:z-[100] focus:px-4 focus:py-2 focus:bg-primary-600 focus:text-white dark:focus:bg-primary-200 dark:focus:text-primary-800 focus:rounded">
57      Main navigation
58    </a>
59    
60    <header role="banner" data-type="navtop" class="nav-top [&.show]:translate-y-0 top-0 fixed h-[64px] px-1 pt-5 pb-[20px] lg:pb-0 lg:px-8 lg:pl-3 left-0 lg:left-72 right-0 flex flex-row items-center justify-between gap-3 z-[100] transition-all duration-300 ease-in-out bg-surface-500 bg-gradient-to-b from-transparent dark:from-gray-800 dark:from-10% dark:via-slate-800 to-white/80 dark:to-pink-900 bg-fixed">
61
62  <aside class="trigger-sidebar">
63    <!-- trigger sidebar -->
64    <button type="button" data-controller="dialog" data-dialog-show-class="show" data-action="dialog#open" data-dialog-target-id-value="#sidebar" class="text-black dark:text-white relative inline-flex lg:hidden items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] tracking-[.00714em] text-center font-medium hover:bg-primary-600/[0.08] focus:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08] dark:focus:bg-primary-200/[0.08]" aria-controls="sidebar" aria-expanded="false" aria-label="Open navigation menu">
65      <span class="material-symbols-outlined !text-[28px]">menu</span>
66    </button>
67  </aside>
68  <a href="/">
69    <div class="w-16 h-16 flex items-center text-white transform transition-transform duration-100 hover:scale-110 opacity-80 block lg:hidden">
70      <svg class="fill-current inline-block w-full h-full" viewBox="0 0 109 46">
71        <title>Mx3</title>
72        <path d="M32.0045 16.8083C33.205 17.6956 33.8102 18.8856 34.0495 20.3947L36.2344 41.6665L42.246 41.0542L40.0524 19.896C39.7049 16.6583 38.3959 14.0411 36.0028 12.1521C33.6181 10.1487 30.5738 9.36204 27.3438 9.59591C23.7548 10.033 21.1141 11.685 19.2913 14.7716C16.8324 12.189 13.9264 11.0672 10.3454 11.391C7.10762 11.7385 4.36048 13.2679 2.47123 15.6613C0.468337 18.0466 -0.188609 20.8699 0.0449713 24.1002L2.35272 45.2658L8.25777 44.531L5.94974 23.3651C5.94 21.8723 6.26375 20.5175 7.15142 19.317C8.03851 18.1161 9.34295 17.5193 10.958 17.4025C12.5736 17.2857 13.9278 17.6103 15.1283 18.4977C16.2147 19.3771 16.8124 20.6812 17.0508 22.19L19.2366 43.4627L25.2556 42.7356L23.0626 21.5775C22.9375 20.0767 23.2621 18.7221 24.1412 17.6355C25.0289 16.435 26.3333 15.8379 27.9564 15.6069C29.5714 15.4904 30.9262 15.8144 32.0045 16.8083Z"></path>
73        <path d="M48.6798 6.49628L41.833 15.7739L52.7354 23.997L44.2845 34.884L53.5544 41.845L61.7855 30.8272L72.8021 39.0584L79.6495 29.781L68.7465 21.5582L68.6234 21.6647L76.8549 10.6472L67.7 3.69417L59.4689 14.7117L48.6798 6.49628Z"></path>
74        <path d="M105.146 -5.55189e-06L79.7142 2.58283L80.3772 9.5158L92.8726 8.094L86.6266 20.2831C89.538 19.6837 91.747 19.2643 93.2398 19.254C98.0774 19.0182 100.683 21.1513 101.172 25.662C101.378 27.6277 100.916 29.3169 99.6699 30.7223C98.6597 32.0294 96.9971 32.8309 94.9095 33.1434C91.0912 33.566 88.5365 32.3537 87.3414 29.7448L80.0577 30.4988C80.7636 33.5322 82.5381 36.0672 85.3966 37.8734C88.2379 39.909 91.7382 40.7276 95.6701 40.3134C99.8299 39.9158 103.042 38.3037 105.428 35.3722C107.813 32.4396 108.755 28.8322 108.348 24.7867C108.009 21.4344 106.815 18.8255 104.886 16.8541C102.958 14.883 100.501 13.9077 97.4174 13.6922L105.146 -5.55189e-06Z"></path>
75      </svg>
76    </div>
77</a>
78  <!-- trigger compact layout -->
79  <button data-type="toggle" data-target="#body-layout" class="compact-btn group relative hidden  !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] tracking-[.00714em] text-center font-medium hover:bg-primary-600/[0.08] focus:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08] dark:focus:bg-primary-200/[0.08]">
80    <span class="material-symbols-outlined !text-[28px] menu-close">menu_open</span>
81    <span class="material-symbols-outlined !text-[28px] menu-open">menu</span>
82  </button>
83
84  <!-- search form -->
85  <div class="relative w-full hidden md:block md:ml-4 lg:ml-0"
86       data-controller="search-dropdown">
87    <!-- desktop search -->
88    <div class="relative w-full">
89      <form action="/home/search" class="relative z-50">
90        <label for="header-search-input" class="sr-only">Search</label>
91        <button class="absolute left-1 top-1 hidden sm:inline-flex !items-center justify-center w-10 h-10 gap-x-2 p-2.5 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-primary-600/[0.08] focus:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08] dark:focus:bg-primary-200/[0.08]">
92          <span class="material-symbols-outlined !text-2xl">search</span>
93        </button>
94        <input
95          id="header-search-input"
96          name="q"
97          type="search"
98          placeholder="Search keywords..."
99          class="max-sm:absolute max-sm:inset-x-0 block w-40 sm:w-80 md:w-full pl-14 h-12 rounded-full bg-white dark:bg-gray-900 py-2 px-4 ring-0 focus:outline-none focus:shadow"
100          data-action="focus->search-dropdown#show blur->search-dropdown#hide"
101          data-search-dropdown-target="input">
102      </form>
103
104      <!-- Advanced search dropdown -->
105      <div
106        data-search-dropdown-target="dropdown"
107        class="absolute left-0 right-0 -mt-5 bg-white dark:bg-gray-900 rounded-t-none rounded-b-3xl shadow-lg pt-6 pr-5 pl-5 pb-4 hidden">
108        <p class="mt-1">
109          <a class="text-primary-600 dark:text-primary-400 hover:underline" href="/home/advanced_search">Advanced search</a>
110        </p>
111      </div>
112    </div>
113  </div>
114
115  <!-- navbar right -->
116  <div class="flex flex-row items-center sm:gap-3 ml-auto md:ml-4 lg:ml-12">
117    <!-- mobile search trigger -->
118    <button data-controller="dialog" data-dialog-show-class="show" data-action="dialog#toggle" data-dialog-target-id-value="#dialog_search" class="btn relative inline-flex md:hidden !items-center justify-center w-12 h-12 gap-x-2 p-2.5 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-primary-600/[0.08] focus:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08] dark:focus:bg-primary-200/[0.08] ">
119      <span class="material-symbols-outlined !text-[28px]">search</span>
120    </button>
121
122    <div data-controller="dropdown theme" data-dropdown-show-class="show" data-dropdown-hidden-class="hidden" data-theme-dark-class="dark"  data-theme-cookie-name-value="theme" data-action="theme:closeDropdown@window->dropdown#hideMenuInstance" class="relative">
123      <button
124        type="button"
125        data-action="dropdown#toggle click@window->dropdown#hide"
126        class="btn relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 p-2.5 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-primary-600/[0.08] focus:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08] dark:focus:bg-primary-200/[0.08] uppercase"
127        aria-haspopup="true"
128        aria-controls="theme-menu"
129        aria-expanded="false"
130        aria-label="Change theme, current selection: Use device&#39;s theme"
131        data-theme-label-template-value="Change theme, current selection: Use device&#39;s theme">
132        <span class="sr-only" data-theme-target="label">Use device&#39;s theme</span>
133        <span class="material-symbols-outlined !text-[24px] pointer-events-none" data-theme-target="button" aria-hidden="true">
134          dark_mode
135        </span>
136      </button>
137      <ul id="theme-menu" data-dropdown-target="menu" data-theme-target="menu" role="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute top-[3.1rem] z-30 transition duration-400 ease-in-out left-auto right-0 transform md:translate-x-1/3  min-w-[150px] inline-flex flex-col py-2 rounded-xl bg-white dark:bg-gray-900 shadow-md dark:shadow-gray-50/10 max-sm:fixed max-sm:mt-3 max-sm:left-4 max-sm:right-4">
138        <li role="none" class="relative">
139          <button type="button" data-action="click->theme#change" data-theme-value="dark" role="menuitemradio" class="w-full text-left flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 hover:cursor-pointer">
140            <span class="material-symbols-outlined" aria-hidden="true">
141              dark_mode
142            </span>
143            Dark theme
144          </button>
145        </li>
146        <li role="none" class="relative">
147          <button type="button" data-action="click->theme#change" data-theme-value="light" role="menuitemradio" class="w-full text-left flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 hover:cursor-pointer">
148            <span class="material-symbols-outlined" aria-hidden="true">
149              light_mode
150            </span>
151            Light theme
152          </button>
153        </li>
154        <li role="none" class="relative">
155          <button type="button" data-action="click->
155theme#change" data-theme-value="system" role="menuitemradio" class="w-full text-left flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 hover:cursor-pointer">
156            <span class="material-symbols-outlined" aria-hidden="true">
157              computer
158            </span>
159            Use device&#39;s theme
160          </button>
161        </li>
162      </ul>
163    </div>
164
165    <div data-controller="dropdown" data-dropdown-show-class="show" data-dropdown-hidden-class="hidden" class="relative">
166      <button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="btn relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 p-2.5 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-primary-600/[0.08] focus:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08] dark:focus:bg-primary-200/[0.08] uppercase" aria-haspopup="true" aria-controls="locale-menu" aria-expanded="false" aria-label="Change language">en
167      </button>
168
169      <!-- menus -->
170      <ul id="locale-menu" data-dropdown-target="menu" role="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute top-[3.1rem] z-30 transition duration-400 ease-in-out left-auto right-0 transform md:translate-x-1/3 min-w-[150px] inline-flex flex-col py-2 rounded-xl bg-white dark:bg-gray-900 shadow-md dark:shadow-gray-50/10 max-sm:fixed max-sm:mt-3 max-sm:left-4 max-sm:right-4">
171          <li role="none" class="relative">
172            <form class="button_to" method="post" action="/locales/update?locale=de"><input type="hidden" name="_method" value="put" autocomplete="off" /><button role="menuitemradio" class="w-full text-left flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 hover:cursor-pointer" type="submit">Deutsch</button><input type="hidden" name="authenticity_token" value="4T2RgFxoGV8cBtkNFqqxRbZPDq9AbVVSTRPIzsWVQtU-rXhTSZeXieikkjDhMJ8uA-DS8xoPowZ1JTXwkmk59A" autocomplete="off" /></form>
173          </li>
174          <li role="none" class="relative">
175            <form class="button_to" method="post" action="/locales/update?locale=fr"><input type="hidden" name="_method" value="put" autocomplete="off" /><button role="menuitemradio" class="w-full text-left flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 hover:cursor-pointer" type="submit">Français</button><input type="hidden" name="authenticity_token" value="JXEz4uru58J5x4GkCX2RzyVseJO9Sw04Tudlo8QXZ_j64dox_xFpFI1lypn-57-kkMOkz-cp-2x20Zidk-sc2Q" autocomplete="off" /></form>
176          </li>
177          <li role="none" class="relative">
178            <form class="button_to" method="post" action="/locales/update?locale=it"><input type="hidden" name="_method" value="put" autocomplete="off" /><button role="menuitemradio" class="w-full text-left flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 hover:cursor-pointer" type="submit">Italiano</button><input type="hidden" name="authenticity_token" value="cUPQsWh5DW0XIwu7SEkS_6iaYZd6kF_PaQqzMW-ZUpmu0zlifYaDu-OBQIa_0zyUHTW9yyDyqZtRPE4POGUpuA" autocomplete="off" /></form>
179          </li>
180          <li role="none" class="relative">
181            <form class="button_to" method="post" action="/locales/update?locale=rm"><input type="hidden" name="_method" value="put" autocomplete="off" /><button role="menuitemradio" class="w-full text-left flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 hover:cursor-pointer" type="submit">Rumantsch</button><input type="hidden" name="authenticity_token" value="zs57Vd8JXK53o6yjcIFpOWIgAAKZBHIbPsueVmIViasRXpKGyvbSeIMB556HG0dS14_cXsNmhE8G_WNoNenyig" autocomplete="off" /></form>
182          </li>
183          <li role="none" class="relative">
184            <form class="button_to" method="post" action="/locales/update?locale=en"><input type="hidden" name="_method" value="put" autocomplete="off" /><button role="menuitemradio" class="w-full text-left flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 hover:cursor-pointer" type="submit">English</button><input type="hidden" name="authenticity_token" value="RnlZ5D5Xi1dQf17CyltuwFQ7zTIV-MDM0X7oj5hosQqZ6bA3K6gFgaTdFf89wUCr4ZQRbk-aNpjpSBWxz5TKKw" autocomplete="off" /></form>
185          </li>
186      </ul>
187    </div>
188
189    <div data-controller="dropdown" data-dropdown-show-class="show" data-dropdown-hidden-class="hidden" class="relative">
190      <button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="btn relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 p-2.5 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-primary-600/[0.08] focus:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08] dark:focus:bg-primary-200/[0.08]" aria-haspopup="true" aria-controls="account-menu" aria-expanded="false" aria-label="Account menu">
191          <span class="material-symbols-outlined" aria-hidden="true">account_circle</span>
192      </button>
193
194      <!-- menus -->
195      <ul data-dropdown-target=menu id=&quot;account-menu&quot; role="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute top-[3.1rem] z-30 transition duration-400 ease-in-out left-auto right-0 min-w-[200px] inline-flex flex-col py-2 rounded-xl bg-white dark:bg-gray-900 shadow-md dark:shadow-gray-50/10 max-sm:fixed max-sm:mt-3 max-sm:left-4 max-sm:right-4">
196
197    <li role="none" class="relative">
198      <a role="menuitem" class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200" data-turbo="false" href="/admin/tracks">
199        <span class="material-symbols-outlined" aria-hidden="true">upload</span>
200        Upload
201</a>    </li>
202
203    <li role="none" class="relative">
204      <a role="menuitem" class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200" data-turbo="false" href="/admin/performances">
205        <span class="material-symbols-outlined" aria-hidden="true">calendar_add_on</span>
206        Gigs
207</a>    </li>
208
209
210  <li role="none" class="relative">
211    <a role="menuitem" class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200" href="mailto:[email protected]">
212      <span class="material-symbols-outlined" aria-hidden="true">help_center</span>
213      Help
214</a>  </li>
215
216    <li role="none" class="relative border-t border-gray-100 dark:border-gray-800">
217      <a role="menuitem" class="w-full flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 hover:cursor-pointer" href="/sign_in">
218        <span class="material-symbols-outlined" aria-hidden="true">power_settings_new</span>
219        Sign in
220</a>    </li>
221</ul>
222
223    </div>
224  </div>
225</header>
226
227
228    <main id="main-content" class="lg:flex" role="main">
229      <nav id="site-navigation" role="navigation" aria-label="Main navigation">
230        <aside data-controller="dialog" data-dialog-show-class="show" data-dialog-target-id-value="#sidebar" id="sidebar"
231  data-dialog-opened-text="opened"
232  data-dialog-closed-message="Dialog closed"
233  role="complementary" aria-label="Main navigation" class="sidebar transition-all duration-500 ease-in-out fixed max-lg:z-[100] lg:shrink-0 lg:relative lg:w-72 h-screen max-lg:[&.show_.sidebar-bg]:opacity-60 dark:max-lg:[&.show_.sidebar-bg]:opacity-60 [&.show_.sidebar-bg]:inset-0 [&.show_.sidebar-content]:translate-x-0">
234  <!-- backdrop -->
235  <div data-action="click->dialog#close" class="sidebar-bg fixed z-40 opacity-0 -top-full bg-black max-lg:[.sidebar.show_&]:opacity-60"></div>
236
237  <!-- menu -->
238  <div id="sidebar-content" class="sidebar-content transition-all duration-300 ease-in-out fixed z-40 max-lg:-translate-x-full max-lg:bg-surface-500 dark:max-lg:bg-surfacedark-500 left-0 top-0 bottom-0 h-screen w-72 overflow-auto scrollbars">
239    <!-- logo -->
240    <a href="/" class="sidebar-logo pt-4 pb-2 pl-6 flex items-center w-full">
241      <div class="">
242        <img alt="Mx3.ch" width="150" height="100" style="margin-left:-23px; margin-top:63px" src="/assets/mx3/logo-79d1cc98fd379a36ad4af4c4269c0a848aa462c0fe20e299269c79166acf529b.png" />
243      </div>
244      <h4 class="text-2xl font-medium tracking-wide text-gray-900 dark:text-gray-100 compact-hide ml-2"> </h4>
245    </a>
246
247    <!-- Standart drawer -->
248    <div class="w-full inline-flex flex-col px-3 pb-3">
249      <!-- title & menu -->
250      <ul class="sidebar-menu flex flex-col">
251        <!-- Apps -->
252        <li data-controller="collapse" data-collapse-active-class="active" class="relative">
253          <button type="button" data-action="collapse#toggle" aria-expanded="false" aria-controls="side-nav-genres" class="flex flex-row items-center gap-3 py-3 pl-4 pr-6 mb-1 rounded-full hover-icon text-left w-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]">
254            <span class="material-symbols-outlined">library_music</span>
255            <span class="compact-title"> Genres</span>
256          </button>
257          <ul id="side-nav-genres" data-collapse-target="collapsible" class="sidebar-submenu [&.active]:block hidden" aria-hidden="true">
258              <li>
259                <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/genre/chanson">Chanson</a>
260              </li>
261              <li>
262                <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/genre/electro">Electro</a>
263              </li>
264              <li>
265                <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/genre/folk-country">Folk/Country</a>
266              </li>
267              <li>
268                <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/genre/funk">Funk</a>
269              </li>
270              <li>
271                <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/genre/metal-punk">Metal/Punk</a>
272              </li>
273              <li>
274                <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/genre/hip_hop">Hip Hop</a>
275              </li>
276              <li>
277                <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/genre/jazz">Jazz</a>
278              </li>
279              <li>
280                <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/genre/reggae">Reggae</a>
281              </li>
282              <li>
283                <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/genre/rock">Rock</a>
284              </li>
285              <li>
286                <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/genre/pop">Pop</a>
287              </li>
288              <li>
289                <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/genre/techno">Techno</a>
290              </li>
291              <li>
292                <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/genre/world">World</a>
293              </li>
294              <li>
295                <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/genre/easy-film">
295Easy/Film</a>
296              </li>
297          </ul>
298        </li>
299        <li data-controller="collapse" data-collapse-active-class="active" class="relative">
300          <button type="button" data-action="collapse#toggle" aria-expanded="false" aria-controls="side-nav-new" class="flex flex-row items-center gap-3 py-3 pl-4 pr-6 mb-1 rounded-full hover-icon text-left w-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]">
301            <span class="material-symbols-outlined">new_releases</span>
302            <span class="compact-title">New</span>
303          </button>
304          <ul id="side-nav-new" data-collapse-target="collapsible" class="sidebar-submenu [&.active]:block hidden" aria-hidden="true">
305            <li>
306              <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/home/advanced_search?models%5B%5D=Track&amp;order=age">Tracks</a>
307            </li>
308            <li>
309              <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/home/advanced_search?models%5B%5D=Band&amp;order=age">Bands</a>
310            </li>
311              <li>
312                <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/home/advanced_search?models%5B%5D=Playlist&amp;order=recently_updated">Playlists</a>
313              </li>
314            <li>
315              <a class="flex items-center py-3 pl-[52px] pr-6 mb-1 leading-none gap-2.5 rounded-full hover-icon [&amp;.active]:text-gray-900 dark:[&amp;.active]:text-gray-100 [&amp;.active]:bg-primary-600/[0.08] dark:[&amp;.active]:bg-primary-200/10 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]" href="/performances">Gigs</a>
316            </li>
317          </ul>
318        </li>
319          <li class="relative">
320            <a href="https://blog.mx3.ch/music-news/" target="_blank" class="flex flex-row items-center gap-3 py-3 pl-4 pr-6 mb-1 rounded-full hover-icon [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]">
321              <span class="material-symbols-outlined">rss_feed</span>
322              <span class="compact-title">Blog</span>
323            </a>
324          </li>
325        <li class="relative">
326            <a href="https://discover.mx3.ch" target="_blank" class="flex flex-row items-center gap-3 py-3 pl-4 pr-6 mb-1 rounded-full hover-icon [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]">
327            <span class="material-symbols-outlined">help_clinic</span>
328            <span class="compact-title">Discover Mx3</span>
329          </a>
330        </li>
331      </ul>
332
333      <!-- title & menu -->
334      <div class="pt-6 pb-2 px-4 compact-hide">
335        <p class="text-title-sm font-medium uppercase text-gray-600 dark:text-gray-400">Explore</p>
336      </div>
337      <ul class="sidebar-menu flex flex-col">
338        <!-- Apps -->
339
340          <li class="relative">
341            <a href="https://volksmusik.mx3.ch" class="flex flex-row items-center gap-3 py-3 pl-10 pr-6 mb-1 rounded-full hover-icon [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]">
342              <span class="material-symbols-outlined"> </span>
343              <span class="compact-title">Popular Music</span>
344            </a>
345          </li>
346          <li class="relative">
347            <a href="https://neo.mx3.ch" class="flex flex-row items-center gap-3 py-3 pl-10 pr-6 mb-1 rounded-full hover-icon [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08]">
348              <span class="material-symbols-outlined"> </span>
349              <span class="compact-title">Contemporary music</span>
350            </a>
351          </li>
352      </ul>
353    </div>
354  </div>
355</aside>
356
357      </nav>
358
359      <div class="flex-grow">
360        <div class="main-content flex-grow min-h-[100%] max-w-[1400px] mt-20 relative px-1 lg:pr-8 lg:pl-3 mb-20">
361  <div class="grid grid-cols-1 gap-4 md:gap-6">
362    <div class="py-0 px-3 flex flex-col max-w-[1200px]">
363      <div class="text-xl text-gray-800 dark:text-gray-200 mb-5 sm:pt-3 uppercase">Radio &amp; TV selection</div>
364
365      <section id="featuring" data-controller="carousel" class="relative">
366  <div id="maxi-cards" class="overflow-hidden relative">
367    <div class="absolute top-6 left-4 transform -translate-y-1/2 z-40 pointer-events-auto opacity-40">
368      <button data-action="carousel#prev" class="p-2 bg-white rounded-full shadow-md pointer-events-auto -scale-x-100">
369        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="13" height="13" focusable="false">
370          <path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
371        </svg>
372      </button>
373    </div>
374    <div class="absolute top-6 right-4 transform -translate-y-1/2 z-40 pointer-events-auto opacity-40">
375      <button data-action="carousel#next" class="p-2 bg-white rounded-full shadow-md pointer-events-auto">
376        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="13" height="13" focusable="false">
377          <path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
378        </svg>
379      </button>
380    </div>
381    <div id="featured-content" data-carousel-target="list" class="flex transition-transform duration-500 ease-in-out gap-5 overflow-scroll snap-x snap-mandatory scroll-smooth [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
382      data-action="mouseenter->carousel#mouseenter mouseleave->carousel#mouseleave scroll->carousel#scroll">
383        <div id="card1" class="group flex-shrink-0 w-full md:w-[400px] md:max-w-[360px] h-[480px] flex relative snap-start">
384          <img src="https://cid1290.s3.pub.eu-lsn-prc.nimag.net/wm-pictures-production/vs5asr3wb27ld0bxm0nnci76cd6r" class="absolute inset-0 w-full h-full object-cover border-[0.1px] border-slate-600 rounded-2xl shadow-md" />
385          <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
386          <div id="unfeatured" class="absolute top-4 right-4 z-30 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity duration-200">
387          </div>
388          <div class="absolute pt-10 float-left hover:scale-110 transition-transform duration-500 ease-in-out">
389          </div>
390
391          <div class="absolute inset-0 flex px-5">
392            <div class="z-30 cursor-pointer mt-80 flex flex-col">
393              <a class="band-featured-name" target="_blank" href="https://mx3.ch/t/2516">
394                <h3 class="text-3xl font-bold text-white line-clamp-2">20 Years Showcases</h3>
395                <span class="mt-1 text-title text-white">1st video!</span>
396</a>            </div>
397          </div>
398
399            <div class="absolute z-20 w-full h-full top-0 flex items-center transition justify-evenly">
400                <a data-turbo-frame="_top" href="/t/2516#play">
401                  <button
402                    class="hover:scale-110 text-white transition">
403                    <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/2516.json&quot;,&quot;path&quot;:&quot;/t/2516&quot;,&quot;navigate_to_path&quot;:&quot;/t/2516&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
404                  </button>
405</a>            </div>
406        </div>
407        <div id="card2" class="group flex-shrink-0 w-full md:w-[400px] md:max-w-[360px] h-[480px] flex relative snap-start">
408          <img src="https://cid1290.s3.pub.eu-lsn-prc.nimag.net/wm-pictures-production/cdw1w5eeh70f0c1gll61hgnzq1ye" class="absolute inset-0 w-full h-full object-cover border-[0.1px] border-slate-600 rounded-2xl shadow-md" />
409          <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
410          <div id="unfeatured" class="absolute top-4 right-4 z-30 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity duration-200">
411          </div>
412          <div class="absolute pt-10 float-left hover:scale-110 transition-transform duration-500 ease-in-out">
413          </div>
414
415          <div class="absolute inset-0 flex px-5">
416            <div class="z-30 cursor-pointer mt-80 flex flex-col">
417              <a class="band-featured-name" target="_blank" href="https://blog.mx3.ch/20-years-mx3">
418                <h3 class="text-3xl font-bold text-white line-clamp-2">the story of mx3</h3>
419                <span class="mt-1 text-title text-white">20 years of music</span>
420</a>            </div>
421          </div>
422
423        </div>
424        <div id="card3" class="group flex-shrink-0 w-full md:w-[400px] md:max-w-[360px] h-[480px] flex relative snap-start">
425          <img src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4NjU1MywicHVyIjoiYmxvYl9pZCJ9fQ==--825f012ebc341a867c1ea1091310afb2d49a92a6/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzkwMCw2MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--1d19efe00ef75ace074331051d6bf4418cc6e236/WRONG_THINGS_6000x6000px.png" class="absolute inset-0 w-full h-full object-cover border-[0.1px] border-slate-600 rounded-2xl shadow-md" />
426          <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
427          <div id="unfeatured" class="absolute top-4 right-4 z-30 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity duration-200">
428          </div>
429          <div class="absolute pt-10 float-left hover:scale-110 transition-transform duration-500 ease-in-out">
430              <span class="track-spotlight-curator-badge"></span>
431<span class="track-spotlight-badge"></span>
432
433          </div>
434
435          <div class="absolute inset-0 flex px-5">
436            <div class="z-30 cursor-pointer mt-80 flex flex-col">
437              <a class="band-featured-name" href="/t/24xQ">
438                <h3 class="text-3xl font-bold text-white line-clamp-2">Danitsa - Wrong Things (Feat Jarreau Vandal)</h3>
439                <span class="mt-1 text-title text-white">Reggae</span>
440</a>            </div>
441          </div>
442
443            <div class="absolute z-20 w-full h-full top-0 flex items-center transition justify-evenly">
444                <button
445                  data-controller="playable"
446                  data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/24xQ.json&quot;,&quot;path&quot;:&quot;/t/24xQ&quot;}}"
447                  data-action="playable#play"
448                  class="hover:scale-110 text-white transition">
449                  <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/24xQ.json&quot;,&quot;path&quot;:&quot;/t/24xQ&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
450                </button>
451            </div>
452        </div>
453        <div id="card4" class="group flex-shrink-0 w-full md:w-[400px] md:max-w-[360px] h-[480px] flex relative snap-start">
454          <img src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjIyODA1LCJwdXIiOiJibG9iX2lkIn19--5f8b72a4f42895500d1e3c5d819164800daf2151/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzkwMCw2MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2240843dc42a134b83ead3db6ae746a8a04a208b/img_1328_cyanotype_normal_head-2.jpg" class="absolute inset-0 w-full h-full object-cover border-[0.1px] border-slate-600 rounded-2xl shadow-md" />
455          <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
456          <div id="unfeatured" class="absolute top-4 right-4 z-30 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity duration-200">
457          </div>
458          <div class="absolute pt-10 float-left hover:scale-110 transition-transform duration-500 ease-in-out">
459              <span class="broadcast-badge broadcast-badge-srfvirus"></span>
460
461<span class="broadcast-badge broadcast-badge-on-air">On Air</span>
462
463          </div>
464
465          <div class="absolute inset-0 flex px-5">
466            <div class="z-30 cursor-pointer mt-80 flex flex-col">
467              <a class="band-featured-name" href="/organmug">
468                <h3 class="text-3xl font-bold text-white line-clamp-2">Organ Mug</h3>
469                <span class="mt-1 text-title text-white">Electro</span>
470</a>            </div>
471          </div>
472
473            <div class="absolute z-20 w-full h-full top-0 flex items-center transition justify-evenly">
474                <button
475                  data-controller="playable"
476                  data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/p/rjN.json&quot;,&quot;path&quot;:&quot;/p/rjN&quot;}}"
477                  data-action="playable#play"
478                  class="hover:scale-110 text-white transition">
479                  <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/p/rjN.json&quot;,&quot;path&quot;:&quot;/p/rjN&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
480                </button>
481            </div>
482        </div>
483        <div id="card5" class="group flex-shrink-0 w-full md:w-[400px] md:max-w-[360px] h-[480px] flex relative snap-start">
484          <img src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6OTkzMDQsInB1ciI6ImJsb2JfaWQifX0=--56fd6bcca6e30dec681844e1b1a2e1ab6cf297a3/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzkwMCw2MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2240843dc42a134b83ead3db6ae746a8a04a208b/oltre-2014.jpg" class="absolute inset-0 w-full h-full object-cover border-[0.1px] border-slate-600 rounded-2xl shadow-md" />
485          <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
486          <div id="unfeatured" class="absolute top-4 right-4 z-30 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity duration-200">
487          </div>
488          <div class="absolute pt-10 float-left hover:scale-110 transition-transform duration-500 ease-in-out">
489              <span class="hot-today-badge">Hot Today!</span>
490
491          </div>
492
493          <div class="absolute inset-0 flex px-5">
494            <div class="z-30 cursor-pointer mt-80 flex flex-col">
495              <a class="band-featured-name" href="/oltr3">
496                <h3 class="text-3xl font-bold text-white line-clamp-2">OLTRE</h3>
497                <span class="mt-1 text-title text-white">Pop</span>
498</a>            </div>
499          </div>
500
501            <div class="absolute z-20 w-full h-full top-0 flex items-center transition justify-evenly">
502                <button
503                  data-controller="playable"
504                  data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/p/dEs.json&quot;,&quot;path&quot;:&quot;/p/dEs&quot;}}"
505                  data-action="playable#play"
506                  class="hover:scale-110 text-white transition">
507                  <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/p/dEs.json&quot;,&quot;path&quot;:&quot;/p/dEs&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
508                </button>
509            </div>
510        </div>
511        <div id="card6" class="group flex-shrink-0 w-full md:w-[400px] md:max-w-[360px] h-[480px] flex relative snap-start">
512          <img src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc3NjA1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--bee687c7ff2097226fbeecb0c99abe81719a983a/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyODAsNzIwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--b4e963985148c55c3f4ebd68a8b70f63657923c1/frame_0004.png" class="absolute inset-0 w-full h-full object-cover border-[0.1px] border-slate-600 rounded-2xl shadow-md" />
513          <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
514          <div id="unfeatured" class="absolute top-4 right-4 z-30 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity duration-200">
515          </div>
516          <div class="absolute pt-10 float-left hover:scale-110 transition-transform duration-500 ease-in-out">
517              <span class="broadcast-badge broadcast-badge-srfzwei">SRF Zwei</span>
518<span class="video-of-the-week-badge">Video of the week</span>
519
520          </div>
521
522          <div class="absolute inset-0 flex px-5">
523            <div class="z-30 cursor-pointer mt-80 flex flex-col">
524              <a class="band-featured-name" href="/t/23VS">
525                <h3 class="text-3xl font-bold text-white line-clamp-2">Milune - HOMECOMING</h3>
526                <span class="mt-1 text-title text-white">Pop</span>
527</a>            </div>
528          </div>
529
530            <div class="absolute z-20 w-full h-full top-0 flex items-center transition justify-evenly">
531                <a data-turbo-frame="_top" href="/t/23VS#play">
532                  <button
533                    class="hover:scale-110 text-white transition">
534                    <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/23VS.json&quot;,&quot;path&quot;:&quot;/t/23VS&quot;,&quot;navigate_to_path&quot;:&quot;/t/23VS&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
535                  </button>
536</a>            </div>
537        </div>
538        <div id="card7" class="group flex-shrink-0 w-full md:w-[400px] md:max-w-[360px] h-[480px] flex relative snap-start">
539          <img src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTY2OTgxNCwicHVyIjoiYmxvYl9pZCJ9fQ==--86268ccc83d7ea0ab195532f821a0b8aecc6025c/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzkwMCw2MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2240843dc42a134b83ead3db6ae746a8a04a208b/IMG_0063.jpg" class="absolute inset-0 w-full h-full object-cover border-[0.1px] border-slate-600 rounded-2xl shadow-md" />
540          <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
541          <div id="unfeatured" class="absolute top-4 right-4 z-30 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity duration-200">
542          </div>
543          <div class="absolute pt-10 float-left hover:scale-110 transition-transform duration-500 ease-in-out">
544              <span class="broadcast-badge broadcast-badge-srf3"></span>
545
546<span class="broadcast-badge broadcast-badge-on-air">On Air</span>
547
548          </div>
549
550          <div class="absolute inset-0 flex px-5">
551            <div class="z-30 cursor-pointer mt-80 flex flex-col">
552              <a class="band-featured-name" href="/mariejay">
553                <h3 class="text-3xl font-bold text-white line-clamp-2">Marie Jay</h3>
554                <span class="mt-1 text-title text-white">Pop</span>
555</a>            </div>
556          </div>
557
558            <div class="absolute z-20 w-full h-full top-0 flex items-center transition justify-evenly">
559                <button
560                  data-controller="playable"
561                  data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/p/1201nq.json&quot;,&quot;path&quot;:&quot;/p/1201nq&quot;}}"
562                  data-action="playable#play"
563                  class="hover:scale-110 text-white transition">
564                  <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/p/1201nq.json&quot;,&quot;path&quot;:&quot;/p/1201nq&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
565                </button>
566            </div>
567        </div>
568        <div id="card8" class="group flex-shrink-0 w-full md:w-[400px] md:max-w-[360px] h-[480px] flex relative snap-start">
569          <img src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc3MDU5OSwicHVyIjoiYmxvYl9pZCJ9fQ==--e4e1de9bf70d3c2dce84b92501e75e270339cb61/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzkwMCw2MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--1d19efe00ef75ace074331051d6bf4418cc6e236/01-PRIORITY-DKTC-CARRE.png" class="absolute inset-0 w-full h-full object-cover border-[0.1px] border-slate-600 rounded-2xl shadow-md" />
570          <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
571          <div id="unfeatured" class="absolute top-4 right-4 z-30 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity duration-200">
572          </div>
573          <div class="absolute pt-10 float-left hover:scale-110 transition-transform duration-500 ease-in-out">
574              <span class="broadcast-badge broadcast-badge-couleur3"></span>
575
576<span class="broadcast-badge broadcast-badge-on-air">On Air</span>
577
578          </div>
579
580          <div class="absolute inset-0 flex px-5">
581            <div class="z-30 cursor-pointer mt-80 flex flex-col">
582              <a class="band-featured-name" href="/dontkillthecow">
583                <h3 class="text-3xl font-bold text-white line-clamp-2">Don&#39;t Kill The Cow</h3>
584                <span class="mt-1 text-title text-white">Rock</span>
585</a>            </div>
586          </div>
587
588            <div class="absolute z-20 w-full h-full top-0 flex items-center transition justify-evenly">
589                <button
590                  data-controller="playable"
591                  data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/p/1201tH.json&quot;,&quot;path&quot;:&quot;/p/1201tH&quot;}}"
592                  data-action="playable#play"
593                  class="hover:scale-110 text-white transition">
594                  <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/p/1201tH.json&quot;,&quot;path&quot;:&quot;/p/1201tH&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
595                </button>
596            </div>
597        </div>
598        <div id="card9" class="group flex-shrink-0 w-full md:w-[400px] md:max-w-[360px] h-[480px] flex relative snap-start">
599          <img src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4OTI5NCwicHVyIjoiYmxvYl9pZCJ9fQ==--df6f3e545cbb902d416df802969a6c281a8c2dde/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJKUEciLCJyZXNpemVfdG9fZmlsbCI6WzkwMCw2MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--59d7fee9ef551d18e49bcd5a7bf724a9f2539223/1%20Peter%20Kernel%20%C2%A9%20Simon%20Brazzola.JPG" class="absolute inset-0 w-full h-full object-cover border-[0.1px] border-slate-600 rounded-2xl shadow-md" />
600          <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
601          <div id="unfeatured" class="absolute top-4 right-4 z-30 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity duration-200">
602          </div>
603          <div class="absolute pt-10 float-left hover:scale-110 transition-transform duration-500 ease-in-out">
604              <span class="broadcast-badge broadcast-badge-retetre"></span>
605
606<span class="broadcast-badge broadcast-badge-on-air">On Air</span>
607
608          </div>
609
610          <div class="absolute inset-0 flex px-5">
611            <div class="z-30 cursor-pointer mt-80 flex flex-col">
612              <a class="band-featured-name" href="/peterkernel">
613                <h3 class="text-3xl font-bold text-white line-clamp-2">Peter Kernel</h3>
614                <span class="mt-1 text-title text-white">Rock</span>
615</a>            </div>
616          </div>
617
618            <div class="absolute z-20 w-full h-full top-0 flex items-center transition justify-evenly">
619                <button
620                  data-controller="playable"
621                  data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/p/cnq.json&quot;,&quot;path&quot;:&quot;/p/cnq&quot;}}"
622                  data-action="playable#play"
623                  class="hover:scale-110 text-white transition">
624                  <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/p/cnq.json&quot;,&quot;path&quot;:&quot;/p/cnq&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
625                </button>
626            </div>
627        </div>
628        <div id="card10" class="group flex-shrink-0 w-full md:w-[400px] md:max-w-[360px] h-[480px] flex relative snap-end">
629          <img src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTYzNTk4MSwicHVyIjoiYmxvYl9pZCJ9fQ==--7be2ac634f83440e196857d52490e2e5f3619480/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzkwMCw2MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--1d19efe00ef75ace074331051d6bf4418cc6e236/Bildschirmfoto%202026-01-21%20um%2014.43.04.png" class="absolute inset-0 w-full h-full object-cover border-[0.1px] border-slate-600 rounded-2xl shadow-md" />
630          <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
631          <div id="unfeatured" class="absolute top-4 right-4 z-30 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity duration-200">
632          </div>
633          <div class="absolute pt-10 float-left hover:scale-110 transition-transform duration-500 ease-in-out">
634              <span class="broadcast-badge broadcast-badge-rtr"></span>
635
636<span class="broadcast-badge broadcast-badge-on-air">On Air</span>
637
638          </div>
639
640          <div class="absolute inset-0 flex px-5">
641            <div class="z-30 cursor-pointer mt-80 flex flex-col">
642              <a class="band-featured-name" href="/mattiu">
643                <h3 class="text-3xl font-bold text-white line-clamp-2">Mattiu</h3>
644                <span class="mt-1 text-title text-white">Pop</span>
645</a>            </div>
646          </div>
647
648            <div class="absolute z-20 w-full h-full top-0 flex items-center transition justify-evenly">
649                <button
650                  data-controller="playable"
651                  data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/p/ry6.json&quot;,&quot;path&quot;:&quot;/p/ry6&quot;}}"
652                  data-action="playable#play"
653                  class="hover:scale-110 text-white transition">
654                  <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/p/ry6.json&quot;,&quot;path&quot;:&quot;/p/ry6&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
655                </button>
656            </div>
657        </div>
658    </div>
659  </div>
660
661  <div class="flex justify-center mt-4 space-x-2">
662      <button
663        data-carousel-target="indicator"
664        data-action="click->carousel#goTo"
665        data-carousel-slide="0"
666        class="h-2 w-2 rounded-full bg-gray-300"
667      >
668      </button>
669      <button
670        data-carousel-target="indicator"
671        data-action="click->carousel#goTo"
672        data-carousel-slide="1"
673        class="h-2 w-2 rounded-full bg-gray-300"
674      >
675      </button>
676      <button
677        data-carousel-target="indicator"
678        data-action="click->carousel#goTo"
679        data-carousel-slide="2"
680        class="h-2 w-2 rounded-full bg-gray-300"
681      >
682      </button>
683      <button
684        data-carousel-target="indicator"
685        data-action="click->carousel#goTo"
686        data-carousel-slide="3"
687        class="h-2 w-2 rounded-full bg-gray-300"
688      >
689      </button>
690      <button
691        data-carousel-target="indicator"
692        data-action="click->carousel#goTo"
693        data-carousel-slide="4"
694        class="h-2 w-2 rounded-full bg-gray-300"
695      >
696      </button>
697      <button
698        data-carousel-target="indicator"
699        data-action="click->carousel#goTo"
700        data-carousel-slide="5"
701        class="h-2 w-2 rounded-full bg-gray-300"
702      >
703      </button>
704      <button
705        data-carousel-target="indicator"
706        data-action="click->carousel#goTo"
707        data-carousel-slide="6"
708        class="h-2 w-2 rounded-full bg-gray-300"
709      >
710      </button>
711      <button
712        data-carousel-target="indicator"
713        data-action="click->carousel#goTo"
714        data-carousel-slide="7"
715        class="h-2 w-2 rounded-full bg-gray-300"
716      >
717      </button>
718      <button
719        data-carousel-target="indicator"
720        data-action="click->carousel#goTo"
721        data-carousel-slide="8"
722        class="h-2 w-2 rounded-full bg-gray-300"
723      >
724      </button>
725      <button
726        data-carousel-target="indicator"
727        data-action="click->carousel#goTo"
728        data-carousel-slide="9"
729        class="h-2 w-2 rounded-full bg-gray-300"
730      >
731      </button>
732  </div>
733</section>
734
735
736      <section id="WELCOME">
737        <div class="flex mt-12 sm:mt-16 flex-wrap gap-4 gap-y-6">
738          <div class="w-3/3">
739            <h1 class="text-3xl xl:text-6xl md:text-4xl w-full text-black dark:text-white">Where Swiss music grows</h1>
740<h4 class="md:block text-xl xl:text-2xl md:text-xl w-full mt-4">Discover Swiss Music without commercials<br>A digital public service utility for all Swiss media and regions</h4>
741<p class="pt-2">35264 Swiss bands already registered! <a target="_blank" href="https://blog.mx3.ch/about-en">Learn more about MX3</a></p>
742<div class="flex flex-wrap gap-4 pt-4">
743  <a data-turbo="false" class="hover:scale-110 grid h-12 relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium bg-black hover:bg-primary-900 text-white dark:bg-white dark:hover:bg-primary-200 dark:text-primary-800" href="/admin/tracks">Upload</a>
744    <a class="hover:scale-110 grid h-12 relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium bg-white hover:bg-primary-100 text-black dark:bg-black dark:text-primary-100 dark:hover:bg-primary-200 transition dark:hover:text-primary-800" href="/sign_in">Sign in</a>
745    <a class="hover:scale-110 grid h-12 relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:bg-primary-100 text-black dark:hover:bg-black dark:hover:text-white transition bg-primary-200" href="/signup">Sign up</a>
746</div>
747
748
749          </div>
750        </div>
751      </section>
752
753          <section>
754  <div
755    data-controller="dropdown tabs"
756    data-dropdown-show-class="show"
757    data-dropdown-hidden-class="hidden"
758    data-tabs-active-class="active"
759    data-type="tabs-container"
760    >
761    <div class="relative">
762      <h2 class="text-lg text-gray-800 dark:text-gray-200 mb-5 pt-5">
763        <button data-action="dropdown#toggle click@window->dropdown#hide" class="flex items-center">
764          <span data-dropdown-target="label" class="uppercase">New tracks</span>
765          <span class="float material-symbols-outlined font-bold">expand_more</span>
766        </button>
767      </h2>
768
769      <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute top-[3.1rem] z-30 transition duration-400 ease-in-out left-auto  min-w-[200px] inline-flex flex-col py-2 rounded-xl bg-white dark:bg-gray-900 shadow-md dark:shadow-gray-50/10  max-sm:mt-3 max-sm:left-4 max-sm:right-4">
770        <li data-action="click->dropdown#select click->tabs#open" data-target-id="new-singles" data-dropdown-label="New tracks">
771          <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer ">
772            New tracks
773          </div>
774        </li>
775        <li data-action="click->dropdown#select click->tabs#open" data-target-id="new-onair" data-dropdown-label="New on air" class="">
776          <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer ">
777            New on air
778          </div>
779        </li>
780        <li data-action="click->dropdown#select click->tabs#open" data-target-id="new-bands" data-dropdown-label="New bands">
781          <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer ">
782            New bands
783          </div>
784        </li>
785          <li data-action="click->dropdown#select click->tabs#open" data-target-id="new-stages" data-dropdown-label="New clubs / festivals">
786            <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer ">
787              New clubs / festivals
788            </div>
789          </li>
790        <li data-action="click->dropdown#select click->tabs#open" data-target-id="new-labels" data-dropdown-label="New labels" class="hidden">
791          <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer ">
792            New labels
793          </div>
794        </li>
795      </ul>
796    </div>
797
798    <div class="relative w-full overflow-hidden">
799      <div data-tabs-target="tab" id="new-singles" role="tabpanel" class="active [&.active]:flex hidden snap-x-mandatory overflow-x-auto scrollbar-hide pb-6">
800        
801  <div 
802    data-track-id="496623"
803    class="snap-start audio-card flex-shrink-0 w-[194px] sm:w-[202px]  px-1 sm:px-2">
804    <div class="card h-[270px] rounded-xl bg-white dark:bg-gray-800 flex flex-col shadow-lg">
805      <div class="flex flex-row py-3 px-4 ">
806        <div class="w-full flex flex-row gap-4">
807          <div class="flex flex-col overflow-hidden">
808            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
809              <a data-turbo-frame="_top" class="card__target" href="/t/25c3">IN HIS ARMS</a>
810            </div>
811            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
812                  <a data-turbo-frame="_top" href="/heylo">heylo</a>
813
814            </div>
815            <p class="text-sm truncate">
816              Pop
817
818            </p>
819            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
820            </div>
821          </div>
822        </div>
823      </div>
824      <div class="group relative flex-grow">
825        <div class="w-full h-full relative">
826          <img alt="" class="max-w-full w-full h-full absolute object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMTE2OCwicHVyIjoiYmxvYl9pZCJ9fQ==--221f0c3996e0ee95e6f4b52515ecfc1cb4b41fd1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/in%20his%20arms%20artwork%204.jpg" />
827        </div>
828        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
829          <button
830            data-controller="playable"
831            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/25c3.json&quot;,&quot;path&quot;:&quot;/t/25c3&quot;}}"
832            data-action="playable#play"
833            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
834            <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/25c3.json&quot;,&quot;path&quot;:&quot;/t/25c3&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
835          </button>
836        </div>
837        
838        <div
839          data-controller="dropdown"
840          data-dropdown-show-class="show"
841          data-dropdown-hidden-class="hidden"
842          data-action="click@window->dropdown#hide"
843          class="absolute top-0 right-0">
844          <button
845            data-action="dropdown#toggle"
846            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
847            <span class="material-symbols-outlined font-bold">more_vert</span>
848          </button>
849
850          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
851            
852
853  <li class="relative cursor-pointer whitespace-nowrap">
854    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
855  </li>
856<li class="relative cursor-pointer whitespace-nowrap">
857  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
858    <a data-turbo-frame="_top" href="/t/25c3">Go to track page</a>
859  </div>
860</li>
861  <li class="relative cursor-pointer whitespace-nowrap">
862    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
863      <a data-turbo-frame="_top" href="/heylo">Go to band page</a>
864    </div>
865  </li>
866
867
868
869
870
871
872          </ul>
873        </div>
874      </div>
875    </div>
876  </div>
877
878  <div 
879    data-track-id="496622"
880    class="snap-start audio-card flex-shrink-0 w-[194px] sm:w-[202px]  px-1 sm:px-2">
881    <div class="card h-[270px] rounded-xl bg-white dark:bg-gray-800 flex flex-col shadow-lg">
882      <div class="flex flex-row py-3 px-4 ">
883        <div class="w-full flex flex-row gap-4">
884          <div class="flex flex-col overflow-hidden">
885            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
886              <a data-turbo-frame="_top" class="card__target" href="/t/25c2">Overlook</a>
887            </div>
888            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
889                  <a data-turbo-frame="_top" href="/nickbetschart">Nick Betschart</a>
890    (feat. Dyeana)
891
892            </div>
893            <p class="text-sm truncate">
894              Rock
895
896            </p>
897            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
898            </div>
899          </div>
900        </div>
901      </div>
902      <div class="group relative flex-grow">
903        <div class="w-full h-full relative">
904          <img alt="" class="max-w-full w-full h-full absolute object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMTE1OSwicHVyIjoiYmxvYl9pZCJ9fQ==--42e004e39ff65b41d09cc589807c94efafd3c2a8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls0MDAsNDAwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--7e6f7524c7ad63791f7f36a48bbf2298a2b59254/No%20Clean%20Exit%20-%20Cover.jpeg" />
905        </div>
906        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
907          <button
908            data-controller="playable"
909            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/25c2.json&quot;,&quot;path&quot;:&quot;/t/25c2&quot;}}"
910            data-action="playable#play"
911            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
912            <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/25c2.json&quot;,&quot;path&quot;:&quot;/t/25c2&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
913          </button>
914        </div>
915        
916        <div
917          data-controller="dropdown"
918          data-dropdown-show-class="show"
919          data-dropdown-hidden-class="hidden"
920          data-action="click@window->dropdown#hide"
921          class="absolute top-0 right-0">
922          <button
923            data-action="dropdown#toggle"
924            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
925            <span class="material-symbols-outlined font-bold">more_vert</span>
926          </button>
927
928          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
929            
930  <li class="relative cursor-pointer whitespace-nowrap">
931    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/tracks/25c2/download">Download</a>
932  </li>
933
934  <li class="relative cursor-pointer whitespace-nowrap">
935    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
936  </li>
937<li class="relative cursor-pointer whitespace-nowrap">
938  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
939    <a data-turbo-frame="_top" href="/t/25c2">Go to track page</a>
940  </div>
941</li>
942  <li class="relative cursor-pointer whitespace-nowrap">
943    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
944      <a data-turbo-frame="_top" href="/nickbetschart">Go to band page</a>
945    </div>
946  </li>
947
948
949
950
951
952
953          </ul>
954        </div>
955      </div>
956    </div>
957  </div>
958
959  <div 
960    data-track-id="496621"
961    class="snap-start audio-card flex-shrink-0 w-[194px] sm:w-[202px]  px-1 sm:px-2">
962    <div class="card h-[270px] rounded-xl bg-white dark:bg-gray-800 flex flex-col shadow-lg">
963      <div class="flex flex-row py-3 px-4 ">
964        <div class="w-full flex flex-row gap-4">
965          <div class="flex flex-col overflow-hidden">
966            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
967              <a data-turbo-frame="_top" class="card__target" href="/t/25c1">Ride with Us</a>
968            </div>
969            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
970                  <a data-turbo-frame="_top" href="/djgcruiser">G-Cruiser</a>
971    (feat. Kurt Schmid)
972
973            </div>
974            <p class="text-sm truncate">
975              Pop
976
977            </p>
978            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
979            </div>
980          </div>
981        </div>
982      </div>
983      <div class="group relative flex-grow">
984        <div class="w-full h-full relative">
985          <img alt="" class="max-w-full w-full h-full absolute object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMTE0NiwicHVyIjoiYmxvYl9pZCJ9fQ==--7a8c50ceb323dca971ab6fa09dc2952f79f92939/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/Cover%20-%20Ride%20with%20Us.png" />
986        </div>
987        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
988          <button
989            data-controller="playable"
990            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/25c1.json&quot;,&quot;path&quot;:&quot;/t/25c1&quot;}}"
991            data-action="playable#play"
992            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
993            <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/25c1.json&quot;,&quot;path&quot;:&quot;/t/25c1&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
994          </button>
995        </div>
996        
997        <div
998          data-controller="dropdown"
999          data-dropdown-show-class="show"
1000          data-dropdown-hidden-class="hidden"
1001          data-action="click@window->dropdown#hide"
1002          class="absolute top-0 right-0">
1003          <button
1004            data-action="dropdown#toggle"
1005            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
1006            <span class="material-symbols-outlined font-bold">more_vert</span>
1007          </button>
1008
1009          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
1010            
1011
1012  <li class="relative cursor-pointer whitespace-nowrap">
1013    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
1014  </li>
1015<li class="relative cursor-pointer whitespace-nowrap">
1016  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1017    <a data-turbo-frame="_top" href="/t/25c1">Go to track page</a>
1018  </div>
1019</li>
1020  <li class="relative cursor-pointer whitespace-nowrap">
1021    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1022      <a data-turbo-frame="_top" href="/djgcruiser">Go to band page</a>
1023    </div>
1024  </li>
1025
1026
1027
1028
1029
1030
1031          </ul>
1032        </div>
1033      </div>
1034    </div>
1035  </div>
1036
1037  <div 
1038    data-track-id="496620"
1039    class="snap-start audio-card flex-shrink-0 w-[194px] sm:w-[202px]  px-1 sm:px-2">
1040    <div class="card h-[270px] rounded-xl bg-white dark:bg-gray-800 flex flex-col shadow-lg">
1041      <div class="flex flex-row py-3 px-4 ">
1042        <div class="w-full flex flex-row gap-4">
1043          <div class="flex flex-col overflow-hidden">
1044            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
1045              <a data-turbo-frame="_top" class="card__target" href="/t/25c0">Summertime Is Over</a>
1046            </div>
1047            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1048                  <a data-turbo-frame="_top" href="/heidyhking">Heidy H King</a>
1049    (feat. <a data-turbo-frame="_top" class="" href="/heidyhking">Heidy H King</a>)
1050
1051            </div>
1052            <p class="text-sm truncate">
1053              Latin
1054
1055            </p>
1056            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1057            </div>
1058          </div>
1059        </div>
1060      </div>
1061      <div class="group relative flex-grow">
1062        <div class="w-full h-full relative">
1063          <img alt="" class="max-w-full w-full h-full absolute object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMTE0MSwicHVyIjoiYmxvYl9pZCJ9fQ==--d62c29705550ee8e94defec6c5b5f56998faecf5/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/Cover%20Summertime%20Is%20Over.jpg" />
1064        </div>
1065        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
1066          <button
1067            data-controller="playable"
1068            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/25c0.json&quot;,&quot;path&quot;:&quot;/t/25c0&quot;}}"
1069            data-action="playable#play"
1070            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
1071            <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/25c0.json&quot;,&quot;path&quot;:&quot;/t/25c0&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
1072          </button>
1073        </div>
1074        
1075        <div
1076          data-controller="dropdown"
1077          data-dropdown-show-class="show"
1078          data-dropdown-hidden-class="hidden"
1079          data-action="click@window->dropdown#hide"
1080          class="absolute top-0 right-0">
1081          <button
1082            data-action="dropdown#toggle"
1083            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
1084            <span class="material-symbols-outlined font-bold">more_vert</span>
1085          </button>
1086
1087          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
1088            
1089  <li class="relative cursor-pointer whitespace-nowrap">
1090    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/tracks/25c0/download">Download</a>
1091  </li>
1092
1093  <li class="relative cursor-pointer whitespace-nowrap">
1094    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
1095  </li>
1096<li class="relative cursor-pointer whitespace-nowrap">
1097  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1098    <a data-turbo-frame="_top" href="/t/25c0">Go to track page</a>
1099  </div>
1100</li>
1101  <li class="relative cursor-pointer whitespace-nowrap">
1102    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1103      <a data-turbo-frame="_top" href="/heidyhking">Go to band page</a>
1104    </div>
1105  </li>
1106
1107
1108
1109
1110
1111
1112          </ul>
1113        </div>
1114      </div>
1115    </div>
1116  </div>
1117
1118  <div 
1119    data-track-id="496619"
1120    class="snap-start audio-card flex-shrink-0 w-[194px] sm:w-[202px]  px-1 sm:px-2">
1121    <div class="card h-[270px] rounded-xl bg-white dark:bg-gray-800 flex flex-col shadow-lg">
1122      <div class="flex flex-row py-3 px-4 ">
1123        <div class="w-full flex flex-row gap-4">
1124          <div class="flex flex-col overflow-hidden">
1125            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
1126              <a data-turbo-frame="_top" class="card__target" href="/t/25bZ">Southern Sky</a>
1127            </div>
1128            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1129                  <a data-turbo-frame="_top" href="/nickbetschart">Nick Betschart</a>
1130    (feat. Dyeana)
1131
1132            </div>
1133            <p class="text-sm truncate">
1134              Rock
1135
1136            </p>
1137            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1138            </div>
1139          </div>
1140        </div>
1141      </div>
1142      <div class="group relative flex-grow">
1143        <div class="w-full h-full relative">
1144          <img alt="" class="max-w-full w-full h-full absolute object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMTEzOCwicHVyIjoiYmxvYl9pZCJ9fQ==--7fbb85ff3daf79586eb4255fdc64f976e1a2044b/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls0MDAsNDAwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--7e6f7524c7ad63791f7f36a48bbf2298a2b59254/No%20Clean%20Exit%20-%20Cover.jpeg" />
1145        </div>
1146        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
1147          <button
1148            data-controller="playable"
1149            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/25bZ.json&quot;,&quot;path&quot;:&quot;/t/25bZ&quot;}}"
1150            data-action="playable#play"
1151            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
1152            <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/25bZ.json&quot;,&quot;path&quot;:&quot;/t/25bZ&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
1153          </button>
1154        </div>
1155        
1156        <div
1157          data-controller="dropdown"
1158          data-dropdown-show-class="show"
1159          data-dropdown-hidden-class="hidden"
1160          data-action="click@window->dropdown#hide"
1161          class="absolute top-0 right-0">
1162          <button
1163            data-action="dropdown#toggle"
1164            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
1165            <span class="material-symbols-outlined font-bold">more_vert</span>
1166          </button>
1167
1168          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
1169            
1170  <li class="relative cursor-pointer whitespace-nowrap">
1171    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/tracks/25bZ/download">Download</a>
1172  </li>
1173
1174  <li class="relative cursor-pointer whitespace-nowrap">
1175    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
1176  </li>
1177<li class="relative cursor-pointer whitespace-nowrap">
1178  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1179    <a data-turbo-frame="_top" href="/t/25bZ">Go to track page</a>
1180  </div>
1181</li>
1182  <li class="relative cursor-pointer whitespace-nowrap">
1183    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1184      <a data-turbo-frame="_top" href="/nickbetschart">Go to band page</a>
1185    </div>
1186  </li>
1187
1188
1189
1190
1191
1192
1193          </ul>
1194        </div>
1195      </div>
1196    </div>
1197  </div>
1198
1199  <div 
1200    data-track-id="496618"
1201    class="snap-start audio-card flex-shrink-0 w-[194px] sm:w-[202px]  px-1 sm:px-2">
1202    <div class="card h-[270px] rounded-xl bg-white dark:bg-gray-800 flex flex-col shadow-lg">
1203      <div class="flex flex-row py-3 px-4 ">
1204        <div class="w-full flex flex-row gap-4">
1205          <div class="flex flex-col overflow-hidden">
1206            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
1207              <a data-turbo-frame="_top" class="card__target" href="/t/25bY">Paper Revolution</a>
1208            </div>
1209            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1210                  <a data-turbo-frame="_top" href="/nickbetschart">Nick Betschart</a>
1211    (feat. Dyeana)
1212
1213            </div>
1214            <p class="text-sm truncate">
1215              Rock
1216
1217            </p>
1218            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1219            </div>
1220          </div>
1221        </div>
1222      </div>
1223      <div class="group relative flex-grow">
1224        <div class="w-full h-full relative">
1225          <img alt="" class="max-w-full w-full h-full absolute object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMTEzMCwicHVyIjoiYmxvYl9pZCJ9fQ==--0f893167963299713c21a5e2fc04fc4378e16c96/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls0MDAsNDAwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--7e6f7524c7ad63791f7f36a48bbf2298a2b59254/No%20Clean%20Exit%20-%20Cover.jpeg" />
1226        </div>
1227        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
1228          <button
1229            data-controller="playable"
1230            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/25bY.json&quot;,&quot;path&quot;:&quot;/t/25bY&quot;}}"
1231            data-action="playable#play"
1232            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
1233            <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/25bY.json&quot;,&quot;path&quot;:&quot;/t/25bY&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
1234          </button>
1235        </div>
1236        
1237        <div
1238          data-controller="dropdown"
1239          data-dropdown-show-class="show"
1240          data-dropdown-hidden-class="hidden"
1241          data-action="click@window->dropdown#hide"
1242          class="absolute top-0 right-0">
1243          <button
1244            data-action="dropdown#toggle"
1245            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
1246            <span class="material-symbols-outlined font-bold">more_vert</span>
1247          </button>
1248
1249          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
1250            
1251
1252  <li class="relative cursor-pointer whitespace-nowrap">
1253    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
1254  </li>
1255<li class="relative cursor-pointer whitespace-nowrap">
1256  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1257    <a data-turbo-frame="_top" href="/t/25bY">Go to track page</a>
1258  </div>
1259</li>
1260  <li class="relative cursor-pointer whitespace-nowrap">
1261    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1262      <a data-turbo-frame="_top" href="/nickbetschart">Go to band page</a>
1263    </div>
1264  </li>
1265
1266
1267
1268
1269
1270
1271          </ul>
1272        </div>
1273      </div>
1274    </div>
1275  </div>
1276
1277  <div 
1278    data-track-id="496617"
1279    class="snap-start audio-card flex-shrink-0 w-[194px] sm:w-[202px]  px-1 sm:px-2">
1280    <div class="card h-[270px] rounded-xl bg-white dark:bg-gray-800 flex flex-col shadow-lg">
1281      <div class="flex flex-row py-3 px-4 ">
1282        <div class="w-full flex flex-row gap-4">
1283          <div class="flex flex-col overflow-hidden">
1284            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
1285              <a data-turbo-frame="_top" class="card__target" href="/t/25bX">Gravity of You</a>
1286            </div>
1287            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1288                  <a data-turbo-frame="_top" href="/nickbetschart">Nick Betschart</a>
1289    (feat. Dyeana)
1290
1291            </div>
1292            <p class="text-sm truncate">
1293              Rock
1294
1295            </p>
1296            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1297            </div>
1298          </div>
1299        </div>
1300      </div>
1301      <div class="group relative flex-grow">
1302        <div class="w-full h-full relative">
1303          <img alt="" class="max-w-full w-full h-full absolute object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMTExOSwicHVyIjoiYmxvYl9pZCJ9fQ==--b9169a4b031bf30b67a3496d769b4b6e541ddb7a/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls0MDAsNDAwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--7e6f7524c7ad63791f7f36a48bbf2298a2b59254/No%20Clean%20Exit%20-%20Cover.jpeg" />
1304        </div>
1305        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
1306          <button
1307            data-controller="playable"
1308            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/25bX.json&quot;,&quot;path&quot;:&quot;/t/25bX&quot;}}"
1309            data-action="playable#play"
1310            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
1311            <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/25bX.json&quot;,&quot;path&quot;:&quot;/t/25bX&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
1312          </button>
1313        </div>
1314        
1315        <div
1316          data-controller="dropdown"
1317          data-dropdown-show-class="show"
1318          data-dropdown-hidden-class="hidden"
1319          data-action="click@window->dropdown#hide"
1320          class="absolute top-0 right-0">
1321          <button
1322            data-action="dropdown#toggle"
1323            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
1324            <span class="material-symbols-outlined font-bold">more_vert</span>
1325          </button>
1326
1327          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
1328            
1329  <li class="relative cursor-pointer whitespace-nowrap">
1330    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/tracks/25bX/download">Download</a>
1331  </li>
1332
1333  <li class="relative cursor-pointer whitespace-nowrap">
1334    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
1335  </li>
1336<li class="relative cursor-pointer whitespace-nowrap">
1337  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1338    <a data-turbo-frame="_top" href="/t/25bX">Go to track page</a>
1339  </div>
1340</li>
1341  <li class="relative cursor-pointer whitespace-nowrap">
1342    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1343      <a data-turbo-frame="_top" href="/nickbetschart">Go to band page</a>
1344    </div>
1345  </li>
1346
1347
1348
1349
1350
1351
1352          </ul>
1353        </div>
1354      </div>
1355    </div>
1356  </div>
1357
1358  <div 
1359    data-track-id="496616"
1360    class="snap-start audio-card flex-shrink-0 w-[194px] sm:w-[202px]  px-1 sm:px-2">
1361    <div class="card h-[270px] rounded-xl bg-white dark:bg-gray-800 flex flex-col shadow-lg">
1362      <div class="flex flex-row py-3 px-4 ">
1363        <div class="w-full flex flex-row gap-4">
1364          <div class="flex flex-col overflow-hidden">
1365            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
1366              <a data-turbo-frame="_top" class="card__target" href="/t/25bW">Sanfte Fahrt</a>
1367            </div>
1368            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1369                  <a data-turbo-frame="_top" href="/djgcruiser">G-Cruiser</a>
1370
1371            </div>
1372            <p class="text-sm truncate">
1373              Pop
1374
1375            </p>
1376            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1377            </div>
1378          </div>
1379        </div>
1380      </div>
1381      <div class="group relative flex-grow">
1382        <div class="w-full h-full relative">
1383          <img alt="" class="max-w-full w-full h-full absolute object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMTExNiwicHVyIjoiYmxvYl9pZCJ9fQ==--049e91e94e16170fcdedf235c6b5e274f936cb0d/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls0MDAsNDAwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--7e6f7524c7ad63791f7f36a48bbf2298a2b59254/Cover-Sanfte%20Fahrt.jpeg" />
1384        </div>
1385        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
1386          <button
1387            data-controller="playable"
1388            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/25bW.json&quot;,&quot;path&quot;:&quot;/t/25bW&quot;}}"
1389            data-action="playable#play"
1390            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
1391            <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/25bW.json&quot;,&quot;path&quot;:&quot;/t/25bW&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
1392          </button>
1393        </div>
1394        
1395        <div
1396          data-controller="dropdown"
1397          data-dropdown-show-class="show"
1398          data-dropdown-hidden-class="hidden"
1399          data-action="click@window->dropdown#hide"
1400          class="absolute top-0 right-0">
1401          <button
1402            data-action="dropdown#toggle"
1403            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
1404            <span class="material-symbols-outlined font-bold">more_vert</span>
1405          </button>
1406
1407          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
1408            
1409
1410  <li class="relative cursor-pointer whitespace-nowrap">
1411    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
1412  </li>
1413<li class="relative cursor-pointer whitespace-nowrap">
1414  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1415    <a data-turbo-frame="_top" href="/t/25bW">Go to track page</a>
1416  </div>
1417</li>
1418  <li class="relative cursor-pointer whitespace-nowrap">
1419    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1420      <a data-turbo-frame="_top" href="/djgcruiser">Go to band page</a>
1421    </div>
1422  </li>
1423
1424
1425
1426
1427
1428
1429          </ul>
1430        </div>
1431      </div>
1432    </div>
1433  </div>
1434
1435  <div 
1436    data-track-id="496615"
1437    class="snap-start audio-card flex-shrink-0 w-[194px] sm:w-[202px]  px-1 sm:px-2">
1438    <div class="card h-[270px] rounded-xl bg-white dark:bg-gray-800 flex flex-col shadow-lg">
1439      <div class="flex flex-row py-3 px-4 ">
1440        <div class="w-full flex flex-row gap-4">
1441          <div class="flex flex-col overflow-hidden">
1442            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
1443              <a data-turbo-frame="_top" class="card__target" href="/t/25bV">Ember</a>
1444            </div>
1445            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1446                  <a data-turbo-frame="_top" href="/nickbetschart">Nick Betschart</a>
1447    (feat. Dyeana)
1448
1449            </div>
1450            <p class="text-sm truncate">
1451              Rock
1452
1453            </p>
1454            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1455            </div>
1456          </div>
1457        </div>
1458      </div>
1459      <div class="group relative flex-grow">
1460        <div class="w-full h-full relative">
1461          <img alt="" class="max-w-full w-full h-full absolute object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMTExMCwicHVyIjoiYmxvYl9pZCJ9fQ==--97b6cb2036eca55d02c5dfc4f30571643766b227/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls0MDAsNDAwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--7e6f7524c7ad63791f7f36a48bbf2298a2b59254/No%20Clean%20Exit%20-%20Cover.jpeg" />
1462        </div>
1463        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
1464          <button
1465            data-controller="playable"
1466            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/25bV.json&quot;,&quot;path&quot;:&quot;/t/25bV&quot;}}"
1467            data-action="playable#play"
1468            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
1469            <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/25bV.json&quot;,&quot;path&quot;:&quot;/t/25bV&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
1470          </button>
1471        </div>
1472        
1473        <div
1474          data-controller="dropdown"
1475          data-dropdown-show-class="show"
1476          data-dropdown-hidden-class="hidden"
1477          data-action="click@window->dropdown#hide"
1478          class="absolute top-0 right-0">
1479          <button
1480            data-action="dropdown#toggle"
1481            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
1482            <span class="material-symbols-outlined font-bold">more_vert</span>
1483          </button>
1484
1485          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
1486            
1487  <li class="relative cursor-pointer whitespace-nowrap">
1488    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/tracks/25bV/download">Download</a>
1489  </li>
1490
1491  <li class="relative cursor-pointer whitespace-nowrap">
1492    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
1493  </li>
1494<li class="relative cursor-pointer whitespace-nowrap">
1495  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1496    <a data-turbo-frame="_top" href="/t/25bV">Go to track page</a>
1497  </div>
1498</li>
1499  <li class="relative cursor-pointer whitespace-nowrap">
1500    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1501      <a data-turbo-frame="_top" href="/nickbetschart">Go to band page</a>
1502    </div>
1503  </li>
1504
1505
1506
1507
1508
1509
1510          </ul>
1511        </div>
1512      </div>
1513    </div>
1514  </div>
1515
1516  <div 
1517    data-track-id="496614"
1518    class="snap-start audio-card flex-shrink-0 w-[194px] sm:w-[202px]  px-1 sm:px-2">
1519    <div class="card h-[270px] rounded-xl bg-white dark:bg-gray-800 flex flex-col shadow-lg">
1520      <div class="flex flex-row py-3 px-4 ">
1521        <div class="w-full flex flex-row gap-4">
1522          <div class="flex flex-col overflow-hidden">
1523            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
1524              <a data-turbo-frame="_top" class="card__target" href="/t/25bU">First Quiet</a>
1525            </div>
1526            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1527                  <a data-turbo-frame="_top" href="/nickbetschart">Nick Betschart</a>
1528    (feat. Dyeana)
1529
1530            </div>
1531            <p class="text-sm truncate">
1532              Pop
1533
1534            </p>
1535            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1536            </div>
1537          </div>
1538        </div>
1539      </div>
1540      <div class="group relative flex-grow">
1541        <div class="w-full h-full relative">
1542          <img alt="" class="max-w-full w-full h-full absolute object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMTEwMywicHVyIjoiYmxvYl9pZCJ9fQ==--3689e632aca42d9bd44670956b1cba2bbe304b2d/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls0MDAsNDAwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--7e6f7524c7ad63791f7f36a48bbf2298a2b59254/No%20Clean%20Exit%20-%20Cover.jpeg" />
1543        </div>
1544        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
1545          <button
1546            data-controller="playable"
1547            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/25bU.json&quot;,&quot;path&quot;:&quot;/t/25bU&quot;}}"
1548            data-action="playable#play"
1549            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
1550            <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/25bU.json&quot;,&quot;path&quot;:&quot;/t/25bU&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
1551          </button>
1552        </div>
1553        
1554        <div
1555          data-controller="dropdown"
1556          data-dropdown-show-class="show"
1557          data-dropdown-hidden-class="hidden"
1558          data-action="click@window->dropdown#hide"
1559          class="absolute top-0 right-0">
1560          <button
1561            data-action="dropdown#toggle"
1562            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
1563            <span class="material-symbols-outlined font-bold">more_vert</span>
1564          </button>
1565
1566          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
1567            
1568
1569  <li class="relative cursor-pointer whitespace-nowrap">
1570    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
1571  </li>
1572<li class="relative cursor-pointer whitespace-nowrap">
1573  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1574    <a data-turbo-frame="_top" href="/t/25bU">Go to track page</a>
1575  </div>
1576</li>
1577  <li class="relative cursor-pointer whitespace-nowrap">
1578    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1579      <a data-turbo-frame="_top" href="/nickbetschart">Go to band page</a>
1580    </div>
1581  </li>
1582
1583
1584
1585
1586
1587
1588          </ul>
1589        </div>
1590      </div>
1591    </div>
1592  </div>
1593
1594        <a class="mx-2 place-self-center h-12 relative inline-flex flex-row items-center justify-center py-3 px-4 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium bg-black hover:bg-primary-900 text-white dark:bg-white dark:hover:bg-primary-200 dark:text-primary-800 uppercase" href="/home/advanced_search?models%5B%5D=Track&amp;order=age">
1595  <span class="material-symbols-outlined">expand_circle_right</span>
1596  <span class="ml-2">more</span>
1597</a>
1598      </div>
1599      <div data-tabs-target="tab" id="new-onair" role="tabpanel" class="[&.active]:flex hidden snap-x-mandatory overflow-x-auto scrollbar-hide pb-6 hidden">
1600        
1601  <div 
1602    data-track-id="456671"
1603    class="snap-start audio-card flex-shrink-0 w-[194px] sm:w-[202px]  px-1 sm:px-2">
1604    <div class="card h-[270px] rounded-xl bg-white dark:bg-gray-800 flex flex-col shadow-lg">
1605      <div class="flex flex-row py-3 px-4 ">
1606        <div class="w-full flex flex-row gap-4">
1607          <div class="flex flex-col overflow-hidden">
1608            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
1609              <a data-turbo-frame="_top" class="card__target" href="/t/1UNF">Closer (Remix)</a>
1610            </div>
1611            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1612                  <a data-turbo-frame="_top" href="/kaylortyrell">Kaylor Tyrell</a>
1613
1614            </div>
1615            <p class="text-sm truncate">
1616              Pop
1617
1618            </p>
1619            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1620            </div>
1621          </div>
1622        </div>
1623      </div>
1624      <div class="group relative flex-grow">
1625        <div class="w-full h-full relative">
1626          <img alt="" class="max-w-full w-full h-full absolute object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NzU5NjE4LCJwdXIiOiJibG9iX2lkIn19--009683e0e556dfbcff9fb09571d2593dc3007de2/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/Closer%20(Deluxe).png" />
1627        </div>
1628        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
1629          <button
1630            data-controller="playable"
1631            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/1UNF.json&quot;,&quot;path&quot;:&quot;/t/1UNF&quot;}}"
1632            data-action="playable#play"
1633            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
1634            <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/1UNF.json&quot;,&quot;path&quot;:&quot;/t/1UNF&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
1635          </button>
1636        </div>
1637        <div class="absolute left-0 top-0 pt-3 overflow-x-clip">
1638  <div class="transform -rotate-6 inline-block -ml-1 px-2 py-1 md:px-2.5 md:py-2 text-xs leading-none uppercase tracking-wide text-white bg-[#1c93a1] rounded-r-full shadow">
1639    <span>1 On air</span>
1640  </div>
1641</div>
1642
1643        <div
1644          data-controller="dropdown"
1645          data-dropdown-show-class="show"
1646          data-dropdown-hidden-class="hidden"
1647          data-action="click@window->dropdown#hide"
1648          class="absolute top-0 right-0">
1649          <button
1650            data-action="dropdown#toggle"
1651            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
1652            <span class="material-symbols-outlined font-bold">more_vert</span>
1653          </button>
1654
1655          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
1656            
1657
1658  <li class="relative cursor-pointer whitespace-nowrap">
1659    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
1660  </li>
1661<li class="relative cursor-pointer whitespace-nowrap">
1662  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1663    <a data-turbo-frame="_top" href="/t/1UNF">Go to track page</a>
1664  </div>
1665</li>
1666  <li class="relative cursor-pointer whitespace-nowrap">
1667    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1668      <a data-turbo-frame="_top" href="/kaylortyrell">Go to band page</a>
1669    </div>
1670  </li>
1671
1672
1673
1674
1675
1676
1677          </ul>
1678        </div>
1679      </div>
1680    </div>
1681  </div>
1682
1683
1684  <div 
1685    data-track-id="487188"
1686    class="snap-start video-card flex-shrink-0 w-[337px] sm:w-[345px] px-1 sm:px-2">
1687    <div class="card rounded-xl h-[270px] bg-white dark:bg-gray-800 flex flex-col shadow-lg">
1688      <div class="flex flex-row py-3 px-4 ">
1689        <div class="w-full flex flex-row gap-4">
1690          <div class="flex flex-col overflow-hidden">
1691            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
1692              <a data-turbo-frame="_top" class="card__target" href="/t/22JS">Walk</a>
1693            </div>
1694            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1695                  <a data-turbo-frame="_top" href="/sento">SENTO</a>
1696
1697            </div>
1698            <p class="text-sm truncate">
1699              Pop
1700
1701            </p>
1702            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1703            </div>
1704          </div>
1705        </div>
1706      </div>
1707      <div class="group relative flex-grow">
1708        <div class="w-full h-full relative">
1709          <img alt="" class="absolute top-0 left-0 w-full h-full object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTcxNTgxOCwicHVyIjoiYmxvYl9pZCJ9fQ==--888c4ffca9d7cdc9887d62329d8893f10bd64070/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg1NCw0ODBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--f7bfe7517e8d4f06b64a041
1709dbaae0a885ad62f5d/frame_0004.png" />
1710        </div>
1711        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
1712          <a data-turbo-frame="_top" href="/t/22JS#play">
1713            <button
1714              class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
1715              <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/22JS.json&quot;,&quot;path&quot;:&quot;/t/22JS&quot;,&quot;navigate_to_path&quot;:&quot;/t/22JS&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
1716            </button>
1717</a>        </div>
1718        <div class="absolute left-5 bottom-5 inline-flex flex-row items-center gap-2 h-6 py-1.5 px-3 bg-secondary-100 dark:bg-secondary-700 hover:bg-surface-200 dark:hover:bg-surfacedark-200 focus:bg-surface-400 dark:focus:bg-surfacedark-400 rounded-lg text-[13px] tracking-[.00714em]">
1719          <span class="material-symbols-outlined !text-[20px] pointer-events-none">smart_display</span> VIDEO
1720        </div>
1721        <div class="absolute left-0 top-0 pt-3 overflow-x-clip">
1722  <div class="transform -rotate-6 inline-block -ml-1 px-2 py-1 md:px-2.5 md:py-2 text-xs leading-none uppercase tracking-wide text-white bg-[#1c93a1] rounded-r-full shadow">
1723    <span>3 On air</span>
1724  </div>
1725</div>
1726
1727        <div
1728          data-controller="dropdown"
1729          data-dropdown-show-class="show"
1730          data-dropdown-hidden-class="hidden"
1731          data-action="click@window->dropdown#hide"
1732          class="absolute top-0 right-0">
1733          <button
1734            data-action="dropdown#toggle"
1735            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
1736            <span class="material-symbols-outlined font-bold">more_vert</span>
1737          </button>
1738
1739          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
1740            
1741
1742  <li class="relative cursor-pointer whitespace-nowrap">
1743    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
1744  </li>
1745<li class="relative cursor-pointer whitespace-nowrap">
1746  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1747    <a data-turbo-frame="_top" href="/t/22JS">Go to track page</a>
1748  </div>
1749</li>
1750  <li class="relative cursor-pointer whitespace-nowrap">
1751    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1752      <a data-turbo-frame="_top" href="/sento">Go to band page</a>
1753    </div>
1754  </li>
1755
1756
1757
1758
1759
1760
1761
1762          </ul>
1763        </div>
1764      </div>
1765    </div>
1766  </div>
1767
1768
1769  <div 
1770    data-track-id="496564"
1771    class="snap-start audio-card flex-shrink-0 w-[194px] sm:w-[202px]  px-1 sm:px-2">
1772    <div class="card h-[270px] rounded-xl bg-white dark:bg-gray-800 flex flex-col shadow-lg">
1773      <div class="flex flex-row py-3 px-4 ">
1774        <div class="w-full flex flex-row gap-4">
1775          <div class="flex flex-col overflow-hidden">
1776            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
1777              <a data-turbo-frame="_top" class="card__target" href="/t/25b6">LOSING GAME</a>
1778            </div>
1779            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1780                  <a data-turbo-frame="_top" href="/leawildhaber">Lea Wildhaber</a>
1781
1782            </div>
1783            <p class="text-sm truncate">
1784              Pop
1785
1786            </p>
1787            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1788            </div>
1789          </div>
1790        </div>
1791      </div>
1792      <div class="group relative flex-grow">
1793        <div class="w-full h-full relative">
1794          <img alt="" class="max-w-full w-full h-full absolute object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMDY2NywicHVyIjoiYmxvYl9pZCJ9fQ==--32e1228a60a45b795668cbfec1a8007670a8f58f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls0MDAsNDAwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--7e6f7524c7ad63791f7f36a48bbf2298a2b59254/Losing_Game-70.jpeg" />
1795        </div>
1796        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
1797          <button
1798            data-controller="playable"
1799            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/25b6.json&quot;,&quot;path&quot;:&quot;/t/25b6&quot;}}"
1800            data-action="playable#play"
1801            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
1802            <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/25b6.json&quot;,&quot;path&quot;:&quot;/t/25b6&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
1803          </button>
1804        </div>
1805        <div class="absolute left-0 top-0 pt-3 overflow-x-clip">
1806  <div class="transform -rotate-6 inline-block -ml-1 px-2 py-1 md:px-2.5 md:py-2 text-xs leading-none uppercase tracking-wide text-white bg-[#1c93a1] rounded-r-full shadow">
1807    <span>1 On air</span>
1808  </div>
1809</div>
1810
1811        <div
1812          data-controller="dropdown"
1813          data-dropdown-show-class="show"
1814          data-dropdown-hidden-class="hidden"
1815          data-action="click@window->dropdown#hide"
1816          class="absolute top-0 right-0">
1817          <button
1818            data-action="dropdown#toggle"
1819            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
1820            <span class="material-symbols-outlined font-bold">more_vert</span>
1821          </button>
1822
1823          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
1824            
1825  <li class="relative cursor-pointer whitespace-nowrap">
1826    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/tracks/25b6/download">Download</a>
1827  </li>
1828
1829  <li class="relative cursor-pointer whitespace-nowrap">
1830    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
1831  </li>
1832<li class="relative cursor-pointer whitespace-nowrap">
1833  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1834    <a data-turbo-frame="_top" href="/t/25b6">Go to track page</a>
1835  </div>
1836</li>
1837  <li class="relative cursor-pointer whitespace-nowrap">
1838    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1839      <a data-turbo-frame="_top" href="/leawildhaber">Go to band page</a>
1840    </div>
1841  </li>
1842
1843
1844
1845
1846
1847
1848          </ul>
1849        </div>
1850      </div>
1851    </div>
1852  </div>
1853
1854
1855  <div 
1856    data-track-id="492239"
1857    class="snap-start audio-card flex-shrink-0 w-[194px] sm:w-[202px]  px-1 sm:px-2">
1858    <div class="card h-[270px] rounded-xl bg-white dark:bg-gray-800 flex flex-col shadow-lg">
1859      <div class="flex flex-row py-3 px-4 ">
1860        <div class="w-full flex flex-row gap-4">
1861          <div class="flex flex-col overflow-hidden">
1862            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
1863              <a data-turbo-frame="_top" class="card__target" href="/t/243l">Fragile Friend</a>
1864            </div>
1865            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1866                  <a data-turbo-frame="_top" href="/terryblue">Terry Blue</a>
1867
1868            </div>
1869            <p class="text-sm truncate">
1870              Folk
1871
1872            </p>
1873            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1874            </div>
1875          </div>
1876        </div>
1877      </div>
1878      <div class="group relative flex-grow">
1879        <div class="w-full h-full relative">
1880          <img alt="" class="max-w-full w-full h-full absolute object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc2NjYzNCwicHVyIjoiYmxvYl9pZCJ9fQ==--c960699fac0cf61fdd0014000278257236e5901f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/copertina%20per%20stampa.jpg" />
1881        </div>
1882        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
1883          <button
1884            data-controller="playable"
1885            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/243l.json&quot;,&quot;path&quot;:&quot;/t/243l&quot;}}"
1886            data-action="playable#play"
1887            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
1888            <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/243l.json&quot;,&quot;path&quot;:&quot;/t/243l&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
1889          </button>
1890        </div>
1891        <div class="absolute left-0 top-0 pt-3 overflow-x-clip">
1892  <div class="transform -rotate-6 inline-block -ml-1 px-2 py-1 md:px-2.5 md:py-2 text-xs leading-none uppercase tracking-wide text-white bg-[#1c93a1] rounded-r-full shadow">
1893    <span>3 On air</span>
1894  </div>
1895</div>
1896
1897        <div
1898          data-controller="dropdown"
1899          data-dropdown-show-class="show"
1900          data-dropdown-hidden-class="hidden"
1901          data-action="click@window->dropdown#hide"
1902          class="absolute top-0 right-0">
1903          <button
1904            data-action="dropdown#toggle"
1905            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
1906            <span class="material-symbols-outlined font-bold">more_vert</span>
1907          </button>
1908
1909          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
1910            
1911
1912  <li class="relative cursor-pointer whitespace-nowrap">
1913    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
1914  </li>
1915<li class="relative cursor-pointer whitespace-nowrap">
1916  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1917    <a data-turbo-frame="_top" href="/t/243l">Go to track page</a>
1918  </div>
1919</li>
1920  <li class="relative cursor-pointer whitespace-nowrap">
1921    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
1922      <a data-turbo-frame="_top" href="/terryblue">Go to band page</a>
1923    </div>
1924  </li>
1925
1926
1927
1928
1929
1930
1931          </ul>
1932        </div>
1933      </div>
1934    </div>
1935  </div>
1936
1937
1938  <div 
1939    data-track-id="472996"
1940    class="snap-start audio-card flex-shrink-0 w-[194px] sm:w-[202px]  px-1 sm:px-2">
1941    <div class="card h-[270px] rounded-xl bg-white dark:bg-gray-800 flex flex-col shadow-lg">
1942      <div class="flex flex-row py-3 px-4 ">
1943        <div class="w-full flex flex-row gap-4">
1944          <div class="flex flex-col overflow-hidden">
1945            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
1946              <a data-turbo-frame="_top" class="card__target" href="/t/1Z2Y">Flatline</a>
1947            </div>
1948            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1949                  <a data-turbo-frame="_top" href="/lowdust">LowDust</a>
1950
1951            </div>
1952            <p class="text-sm truncate">
1953              Rock
1954
1955            </p>
1956            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
1957            </div>
1958          </div>
1959        </div>
1960      </div>
1961      <div class="group relative flex-grow">
1962        <div class="w-full h-full relative">
1963          <img alt="" class="max-w-full w-full h-full absolute object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU1NzA1NywicHVyIjoiYmxvYl9pZCJ9fQ==--b2aa1acd5f18c9e0bf22e9df73a7759692ad046a/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/Cover%20Unreleased.jpg" />
1964        </div>
1965        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
1966          <button
1967            data-controller="playable"
1968            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/1Z2Y.json&quot;,&quot;path&quot;:&quot;/t/1Z2Y&quot;}}"
1969            data-action="playable#play"
1970            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
1971            <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/1Z2Y.json&quot;,&quot;path&quot;:&quot;/t/1Z2Y&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
1972          </button>
1973        </div>
1974        <div class="absolute left-0 top-0 pt-3 overflow-x-clip">
1975  <div class="transform -rotate-6 inline-block -ml-1 px-2 py-1 md:px-2.5 md:py-2 text-xs leading-none uppercase tracking-wide text-white bg-[#1c93a1] rounded-r-full shadow">
1976    <span>1 On air</span>
1977  </div>
1978</div>
1979
1980        <div
1981          data-controller="dropdown"
1982          data-dropdown-show-class="show"
1983          data-dropdown-hidden-class="hidden"
1984          data-action="click@window->dropdown#hide"
1985          class="absolute top-0 right-0">
1986          <button
1987            data-action="dropdown#toggle"
1988            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
1989            <span class="material-symbols-outlined font-bold">more_vert</span>
1990          </button>
1991
1992          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
1993            
1994
1995  <li class="relative cursor-pointer whitespace-nowrap">
1996    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
1997  </li>
1998<li class="relative cursor-pointer whitespace-nowrap">
1999  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
2000    <a data-turbo-frame="_top" href="/t/1Z2Y">Go to track page</a>
2001  </div>
2002</li>
2003  <li class="relative cursor-pointer whitespace-nowrap">
2004    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
2005      <a data-turbo-frame="_top" href="/lowdust">Go to band page</a>
2006    </div>
2007  </li>
2008
2009
2010
2011
2012
2013
2014          </ul>
2015        </div>
2016      </div>
2017    </div>
2018  </div>
2019
2020
2021  <div 
2022    data-track-id="494540"
2023    class="snap-start audio-card flex-shrink-0 w-[194px] sm:w-[202px]  px-1 sm:px-2">
2024    <div class="card h-[270px] rounded-xl bg-white dark:bg-gray-800 flex flex-col shadow-lg">
2025      <div class="flex flex-row py-3 px-4 ">
2026        <div class="w-full flex flex-row gap-4">
2027          <div class="flex flex-col overflow-hidden">
2028            <div class="text-sm truncate text-gray-900 dark:text-gray-100 tracking-wide font-bold">
2029              <a data-turbo-frame="_top" class="card__target" href="/t/24Es">Good Enough</a>
2030            </div>
2031            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2032                  <a data-turbo-frame="_top" href="/lunatlas">LunAtlas</a>
2033
2034            </div>
2035            <p class="text-sm truncate">
2036              Rock
2037
2038            </p>
2039            <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2040            </div>
2041          </div>
2042        </div>
2043      </div>
2044      <div class="group relative flex-grow">
2045        <div class="w-full h-full relative">
2046          <img alt="" class="max-w-full w-full h-full absolute object-cover rounded-b-lg" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc5MDc1OSwicHVyIjoiYmxvYl9pZCJ9fQ==--dc22cf4cde9fb1be7c7e8ff554a6373e8e98100a/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/LunAtlas_EP%20Celeste.jpg" />
2047        </div>
2048        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 flex justify-center items-center transition-all duration-300 rounded-b-lg">
2049          <button
2050            data-controller="playable"
2051            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/t/24Es.json&quot;,&quot;path&quot;:&quot;/t/24Es&quot;}}"
2052            data-action="playable#play"
2053            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
2054            <span class="bi bi-play-circle-fill" data-playable="{&quot;json_path&quot;:&quot;/t/24Es.json&quot;,&quot;path&quot;:&quot;/t/24Es&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
2055          </button>
2056        </div>
2057        <div class="absolute left-0 top-0 pt-3 overflow-x-clip">
2058  <div class="transform -rotate-6 inline-block -ml-1 px-2 py-1 md:px-2.5 md:py-2 text-xs leading-none uppercase tracking-wide text-white bg-[#1c93a1] rounded-r-full shadow">
2059    <span>1 On air</span>
2060  </div>
2061</div>
2062
2063        <div
2064          data-controller="dropdown"
2065          data-dropdown-show-class="show"
2066          data-dropdown-hidden-class="hidden"
2067          data-action="click@window->dropdown#hide"
2068          class="absolute top-0 right-0">
2069          <button
2070            data-action="dropdown#toggle"
2071            class="relative flex flex-row justify-center w-5 h-5 gap-x-2 py-2.5 px-4 rounded-full text-xs tracking-[.00714em] font-medium text-primary-600 hover:text-primary-200 dark:text-primary-200 dark:hover:text-primary-600">
2072            <span class="material-symbols-outlined font-bold">more_vert</span>
2073          </button>
2074
2075          <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute z-[99] transition duration-400 ease-in-out max-h-[184px] max-w-[182px] overflow-y-auto right-0 top-full inline-flex flex-col py-1 rounded-xl [&.active]:bg-primary-100 dark:[&.active]:bg-primary-700 bg-white dark:bg-gray-900 dark:shadow-gray-50/10 w-auto text-xs font-medium shadow-lg">
2076            
2077
2078  <li class="relative cursor-pointer whitespace-nowrap">
2079    <a class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer" data-turbo="false" href="/sign_in">Add to a playlist</a>
2080  </li>
2081<li class="relative cursor-pointer whitespace-nowrap">
2082  <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
2083    <a data-turbo-frame="_top" href="/t/24Es">Go to track page</a>
2084  </div>
2085</li>
2086  <li class="relative cursor-pointer whitespace-nowrap">
2087    <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200">
2088      <a data-turbo-frame="_top" href="/lunatlas">Go to band page</a>
2089    </div>
2090  </li>
2091
2092
2093
2094
2095
2096
2097          </ul>
2098        </div>
2099      </div>
2100    </div>
2101  </div>
2102
2103
2104        <a class="mx-2 place-self-center h-12 relative inline-flex flex-row items-center justify-center py-3 px-4 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium bg-black hover:bg-primary-900 text-white dark:bg-white dark:hover:bg-primary-200 dark:text-primary-800 uppercase" href="/home/advanced_search?models%5B%5D=Track&amp;order=age&amp;radio_ids%5B%5D=107999&amp;radio_ids%5B%5D=101720&amp;radio_ids%5B%5D=116019&amp;radio_ids%5B%5D=19504&amp;radio_ids%5B%5D=12259&amp;radio_ids%5B%5D=118124&amp;radio_ids%5B%5D=109700&amp;radio_ids%5B%5D=101242&amp;radio_ids%5B%5D=127683&amp;radio_ids%5B%5D=108319&amp;radio_ids%5B%5D=121069&amp;radio_ids%5B%5D=19505&amp;radio_ids%5B%5D=107212&amp;radio_ids%5B%5D=131352&amp;radio_ids%5B%5D=104094&amp;radio_ids%5B%5D=102123&amp;radio_ids%5B%5D=107177&amp;radio_ids%5B%5D=108308&amp;radio_ids%5B%5D=102124&amp;radio_ids%5B%5D=107218&amp;radio_ids%5B%5D=108986&amp;radio_ids%5B%5D=48697&amp;radio_ids%5B%5D=117336&amp;radio_ids%5B%5D=109323&amp;radio_ids%5B%5D=47173&amp;radio_ids%5B%5D=115052&amp;radio_ids%5B%5D=101563&amp;radio_ids%5B%5D=12261&amp;radio_ids%5B%5D=102962&amp;radio_ids%5B%5D=32974&amp;radio_ids%5B%5D=131558&amp;radio_ids%5B%5D=12262&amp;radio_ids%5B%5D=107585&amp;radio_ids%5B%5D=114671&amp;radio_ids%5B%5D=12260&amp;radio_ids%5B%5D=109376&amp;radio_ids%5B%5D=50236&amp;radio_ids%5B%5D=123455&amp;radio_ids%5B%5D=127797&amp;radio_ids%5B%5D=102781&amp;radio_ids%5B%5D=12258">
2105  <span class="material-symbols-outlined">expand_circle_right</span>
2106  <span class="ml-2">more</span>
2107</a>
2108      </div>
2109      <div data-tabs-target="tab" id="new-bands" role="tabpanel" class="[&.active]:flex hidden snap-x-mandatory overflow-x-auto scrollbar-hide pb-6 hidden">
2110        <div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2111  <div class="card h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2112    <div class="flex flex-row justify-between items-center py-3 px-4">
2113      <div class="w-full flex flex-row items-center gap-4">
2114        <div class="flex flex-col overflow-hidden">
2115          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2116            <a data-turbo-frame="_top" class="card__target" href="/kimlemmi">Kim Lemmi</a>
2117          </div>
2118          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2119            Deutschpop
2120          </div>
2121        </div>
2122      </div>
2123    </div>
2124    <div class="group relative">
2125      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMDgyNiwicHVyIjoiYmxvYl9pZCJ9fQ==--2e210f595ee646cb851a8f3818b774295d53b97a/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/Pressefoto%20Kim%20Lemmi%201.jpg" />
2126
2127      <div class="absolute bg-black rounded bg-opacity-0 group-hover:bg-opacity-60 w-full h-full top-0 flex items-center group-hover:opacity-100 transition justify-evenly">
2128          <button
2129            data-controller="playable"
2130            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/p/1206mb.json&quot;,&quot;path&quot;:&quot;/p/1206mb&quot;}}"
2131            data-action="playable#play"
2132            class="hover:scale-110 text-white opacity-0 transform translate-y-3 group-hover:translate-y-0 group-hover:opacity-100 transition">
2133            <span class="play-button-class" data-playable="{&quot;json_path&quot;:&quot;/p/1206mb.json&quot;,&quot;path&quot;:&quot;/p/1206mb&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
2134          </button>
2135      </div>
2136    </div>
2137  </div>
2138</div>
2139<div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2140  <div class="card h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2141    <div class="flex flex-row justify-between items-center py-3 px-4">
2142      <div class="w-full flex flex-row items-center gap-4">
2143        <div class="flex flex-col overflow-hidden">
2144          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2145            <a data-turbo-frame="_top" class="card__target" href="/parapolar">parapolar</a>
2146          </div>
2147          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2148            Folk, Folkrock
2149          </div>
2150        </div>
2151      </div>
2152    </div>
2153    <div class="group relative">
2154      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMDQ1MywicHVyIjoiYmxvYl9pZCJ9fQ==--f8d8076188e8824adbede4be2714cb3c484786f3/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/1000014465.jpg" />
2155
2156      <div class="absolute bg-black rounded bg-opacity-0 group-hover:bg-opacity-60 w-full h-full top-0 flex items-center group-hover:opacity-100 transition justify-evenly">
2157          <button
2158            data-controller="playable"
2159            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/p/1206m7.json&quot;,&quot;path&quot;:&quot;/p/1206m7&quot;}}"
2160            data-action="playable#play"
2161            class="hover:scale-110 text-white opacity-0 transform translate-y-3 group-hover:translate-y-0 group-hover:opacity-100 transition">
2162            <span class="play-button-class" data-playable="{&quot;json_path&quot;:&quot;/p/1206m7.json&quot;,&quot;path&quot;:&quot;/p/1206m7&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
2163          </button>
2164      </div>
2165    </div>
2166  </div>
2167</div>
2168<div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2169  <div class="card h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2170    <div class="flex flex-row justify-between items-center py-3 px-4">
2171      <div class="w-full flex flex-row items-center gap-4">
2172        <div class="flex flex-col overflow-hidden">
2173          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2174            <a data-turbo-frame="_top" class="card__target" href="/orok">Örök</a>
2175          </div>
2176          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2177            punk rock italiano
2178          </div>
2179        </div>
2180      </div>
2181    </div>
2182    <div class="group relative">
2183      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMDM1NiwicHVyIjoiYmxvYl9pZCJ9fQ==--349678c3574aeae763ef1aac8d723cdf0c14f5f3/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/Untitled.jpg" />
2184
2185      <div class="absolute bg-black rounded bg-opacity-0 group-hover:bg-opacity-60 w-full h-full top-0 flex items-center group-hover:opacity-100 transition justify-evenly">
2186          <button
2187            data-controller="playable"
2188            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/p/1206m9.json&quot;,&quot;path&quot;:&quot;/p/1206m9&quot;}}"
2189            data-action="playable#play"
2190            class="hover:scale-110 text-white opacity-0 transform translate-y-3 group-hover:translate-y-0 group-hover:opacity-100 transition">
2191            <span class="play-button-class" data-playable="{&quot;json_path&quot;:&quot;/p/1206m9.json&quot;,&quot;path&quot;:&quot;/p/1206m9&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
2192          </button>
2193      </div>
2194    </div>
2195  </div>
2196</div>
2197<div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2198  <div class="card h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2199    <div class="flex flex-row justify-between items-center py-3 px-4">
2200      <div class="w-full flex flex-row items-center gap-4">
2201        <div class="flex flex-col overflow-hidden">
2202          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2203            <a data-turbo-frame="_top" class="card__target" href="/cashonly">CashOnly</a>
2204          </div>
2205          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2206            Folk country blues
2207          </div>
2208        </div>
2209      </div>
2210    </div>
2211    <div class="group relative">
2212      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMDI2OSwicHVyIjoiYmxvYl9pZCJ9fQ==--cfd99e21214a333892d8b7e5bc91f8bee380dc3f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/Insta%20Cash%20Only.jpg" />
2213
2214      <div class="absolute bg-black rounded bg-opacity-0 group-hover:bg-opacity-60 w-full h-full top-0 flex items-center group-hover:opacity-100 transition justify-evenly">
2215          <button
2216            data-controller="playable"
2217            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/p/1206m5.json&quot;,&quot;path&quot;:&quot;/p/1206m5&quot;}}"
2218            data-action="playable#play"
2219            class="hover:scale-110 text-white opacity-0 transform translate-y-3 group-hover:translate-y-0 group-hover:opacity-100 transition">
2220            <span class="play-button-class" data-playable="{&quot;json_path&quot;:&quot;/p/1206m5.json&quot;,&quot;path&quot;:&quot;/p/1206m5&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
2221          </button>
2222      </div>
2223    </div>
2224  </div>
2225</div>
2226<div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2227  <div class="card h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2228    <div class="flex flex-row justify-between items-center py-3 px-4">
2229      <div class="w-full flex flex-row items-center gap-4">
2230        <div class="flex flex-col overflow-hidden">
2231          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2232            <a data-turbo-frame="_top" class="card__target" href="/mickvena">Mick Vena</a>
2233          </div>
2234          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2235            Swiss German, Pop, Rock
2236          </div>
2237        </div>
2238      </div>
2239    </div>
2240    <div class="group relative">
2241      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgwOTk1MCwicHVyIjoiYmxvYl9pZCJ9fQ==--fd409ce2e3c8adb3cde05748901cb9e388633695/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/Musik.jpg" />
2242
2243      <div class="absolute bg-black rounded bg-opacity-0 group-hover:bg-opacity-60 w-full h-full top-0 flex items-center group-hover:opacity-100 transition justify-evenly">
2244          <button
2245            data-controller="playable"
2246            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/p/1206m4.json&quot;,&quot;path&quot;:&quot;/p/1206m4&quot;}}"
2247            data-action="playable#play"
2248            class="hover:scale-110 text-white opacity-0 transform translate-y-3 group-hover:translate-y-0 group-hover:opacity-100 transition">
2249            <span class="play-button-class" data-playable="{&quot;json_path&quot;:&quot;/p/1206m4.json&quot;,&quot;path&quot;:&quot;/p/1206m4&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
2250          </button>
2251      </div>
2252    </div>
2253  </div>
2254</div>
2255<div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2256  <div class="card h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2257    <div class="flex flex-row justify-between items-center py-3 px-4">
2258      <div class="w-full flex flex-row items-center gap-4">
2259        <div class="flex flex-col overflow-hidden">
2260          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2261            <a data-turbo-frame="_top" class="card__target" href="/maruskaimpera">Maruska Impera</a>
2262          </div>
2263          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2264            80's/Club/Pop/Sensual...
2265          </div>
2266        </div>
2267      </div>
2268    </div>
2269    <div class="group relative">
2270      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgwOTU1MiwicHVyIjoiYmxvYl9pZCJ9fQ==--340547cbbc78eaa56f8ee264eed7fdfe06ccb2b5/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/MARUSKA%20IMPERA.png" />
2271
2272      <div class="absolute bg-black rounded bg-opacity-0 group-hover:bg-opacity-60 w-full h-full top-0 flex items-center group-hover:opacity-100 transition justify-evenly">
2273          <button
2274            data-controller="playable"
2275            data-playable-attributes-value="{&quot;playable&quot;:{&quot;json_path&quot;:&quot;/p/1206lV.json&quot;,&quot;path&quot;:&quot;/p/1206lV&quot;}}"
2276            data-action="playable#play"
2277            class="hover:scale-110 text-white opacity-0 transform translate-y-3 group-hover:translate-y-0 group-hover:opacity-100 transition">
2278            <span class="play-button-class" data-playable="{&quot;json_path&quot;:&quot;/p/1206lV.json&quot;,&quot;path&quot;:&quot;/p/1206lV&quot;}" data-cy="play-button"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="white" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path></svg></span>
2279          </button>
2280      </div>
2281    </div>
2282  </div>
2283</div>
2284
2285        <a class="mx-2 place-self-center h-12 relative inline-flex flex-row items-center justify-center py-3 px-4 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium bg-black hover:bg-primary-900 text-white dark:bg-white dark:hover:bg-primary-200 dark:text-primary-800 uppercase" href="/home/advanced_search?models%5B%5D=Band&amp;order=age">
2286  <span class="material-symbols-outlined">expand_circle_right</span>
2287  <span class="ml-2">more</span>
2288</a>
2289      </div>
2290      <div data-tabs-target="tab" id="new-stages" role="tabpanel" class="[&.active]:flex hidden snap-x-mandatory overflow-x-auto scrollbar-hide pb-6 hidden">
2291        <div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2292  <div class="card w-full h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2293    <!-- header -->
2294    <div class="flex flex-row justify-between items-center py-3 px-4">
2295      <div class="w-full flex flex-row items-center gap-4">
2296        <div class="flex flex-col overflow-hidden">
2297          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2298            <a data-turbo-frame="_top" class="card__target" href="/stages/umfmrezpyotiopbtxppqi">uMFMREZPYotIopBTXPPqi</a>
2299          </div>
2300          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2301            Club, Appenzell Ausserrhoden
2302          </div>
2303        </div>
2304      </div>
2305    </div>
2306
2307    <!-- content -->
2308    <div>
2309      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/assets/missing/missing_user_square_large-c7eee8188202f7b7978900bae9f150521d965fffb65c6b3ffe03e24587bafd15.jpg" />
2310    </div>
2311  </div>
2312</div>
2313<div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2314  <div class="card w-full h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2315    <!-- header -->
2316    <div class="flex flex-row justify-between items-center py-3 px-4">
2317      <div class="w-full flex flex-row items-center gap-4">
2318        <div class="flex flex-col overflow-hidden">
2319          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2320            <a data-turbo-frame="_top" class="card__target" href="/stages/ccwwkwbcjfyvkjlexsjq">ccWWKwBcjFyVkjlEXsjq</a>
2321          </div>
2322          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2323            Club, Appenzell Ausserrhoden
2324          </div>
2325        </div>
2326      </div>
2327    </div>
2328
2329    <!-- content -->
2330    <div>
2331      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/assets/missing/missing_user_square_large-c7eee8188202f7b7978900bae9f150521d965fffb65c6b3ffe03e24587bafd15.jpg" />
2332    </div>
2333  </div>
2334</div>
2335<div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2336  <div class="card w-full h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2337    <!-- header -->
2338    <div class="flex flex-row justify-between items-center py-3 px-4">
2339      <div class="w-full flex flex-row items-center gap-4">
2340        <div class="flex flex-col overflow-hidden">
2341          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2342            <a data-turbo-frame="_top" class="card__target" href="/stages/ufdvyfhauclcabemee">UFdvYFhAUClcABEMee</a>
2343          </div>
2344          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2345            Festival, Appenzell Ausserrhoden
2346          </div>
2347        </div>
2348      </div>
2349    </div>
2350
2351    <!-- content -->
2352    <div>
2353      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/assets/missing/missing_user_square_large-c7eee8188202f7b7978900bae9f150521d965fffb65c6b3ffe03e24587bafd15.jpg" />
2354    </div>
2355  </div>
2356</div>
2357<div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2358  <div class="card w-full h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2359    <!-- header -->
2360    <div class="flex flex-row justify-between items-center py-3 px-4">
2361      <div class="w-full flex flex-row items-center gap-4">
2362        <div class="flex flex-col overflow-hidden">
2363          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2364            <a data-turbo-frame="_top" class="card__target" href="/stages/paleggofestival">Paleggo Festival</a>
2365          </div>
2366          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2367            Festival, St. Gallen
2368          </div>
2369        </div>
2370      </div>
2371    </div>
2372
2373    <!-- content -->
2374    <div>
2375      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/assets/missing/missing_user_square_large-c7eee8188202f7b7978900bae9f150521d965fffb65c6b3ffe03e24587bafd15.jpg" />
2376    </div>
2377  </div>
2378</div>
2379<div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2380  <div class="card w-full h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2381    <!-- header -->
2382    <div class="flex flex-row justify-between items-center py-3 px-4">
2383      <div class="w-full flex flex-row items-center gap-4">
2384        <div class="flex flex-col overflow-hidden">
2385          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2386            <a data-turbo-frame="_top" class="card__target" href="/stages/lfchonpipvfibfyo">lFChONpIpVFIbFYo</a>
2387          </div>
2388          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2389            Club, Appenzell Ausserrhoden
2390          </div>
2391        </div>
2392      </div>
2393    </div>
2394
2395    <!-- content -->
2396    <div>
2397      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/assets/missing/missing_user_square_large-c7eee8188202f7b7978900bae9f150521d965fffb65c6b3ffe03e24587bafd15.jpg" />
2398    </div>
2399  </div>
2400</div>
2401<div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2402  <div class="card w-full h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2403    <!-- header -->
2404    <div class="flex flex-row justify-between items-center py-3 px-4">
2405      <div class="w-full flex flex-row items-center gap-4">
2406        <div class="flex flex-col overflow-hidden">
2407          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2408            <a data-turbo-frame="_top" class="card__target" href="/stages/ionelizzie">IoneLizzie</a>
2409          </div>
2410          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2411            Club, Geneva
2412          </div>
2413        </div>
2414      </div>
2415    </div>
2416
2417    <!-- content -->
2418    <div>
2419      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgwMTEwNCwicHVyIjoiYmxvYl9pZCJ9fQ==--daa37185081716f5fa61d01391244b199aac7694/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/SnapInsta.to_804957243_18562827133079466_9003575867035461924_n_640.jpg" />
2420    </div>
2421  </div>
2422</div>
2423
2424        <a class="mx-2 place-self-center h-12 relative inline-flex flex-row items-center justify-center py-3 px-4 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium bg-black hover:bg-primary-900 text-white dark:bg-white dark:hover:bg-primary-200 dark:text-primary-800 uppercase" href="/home/advanced_search?models%5B%5D=Stage&amp;order=age">
2425  <span class="material-symbols-outlined">expand_circle_right</span>
2426  <span class="ml-2">more</span>
2427</a>
2428      </div>
2429      <div data-tabs-target="tab" id="new-labels" role="tabpanel" class="[&.active]:flex hidden snap-x-mandatory overflow-x-auto scrollbar-hide pb-6 hidden">
2430        <div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2431  <div class="card w-full h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2432    <!-- header -->
2433    <div class="flex flex-row justify-between items-center py-3 px-4">
2434      <div class="w-full flex flex-row items-center gap-4">
2435        <div class="flex flex-col overflow-hidden">
2436          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2437            <a data-turbo-frame="_top" class="card__target" href="/labels/hsbvxxqborzthtqtnm">HSBVxxQbOrzTHtqTNM</a>
2438          </div>
2439          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2440            Label, Appenzell Ausserrhoden
2441          </div>
2442        </div>
2443      </div>
2444    </div>
2445
2446    <!-- content -->
2447    <div>
2448      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/assets/missing/missing_user_square_large-c7eee8188202f7b7978900bae9f150521d965fffb65c6b3ffe03e24587bafd15.jpg" />
2449    </div>
2450  </div>
2451</div>
2452<div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2453  <div class="card w-full h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2454    <!-- header -->
2455    <div class="flex flex-row justify-between items-center py-3 px-4">
2456      <div class="w-full flex flex-row items-center gap-4">
2457        <div class="flex flex-col overflow-hidden">
2458          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2459            <a data-turbo-frame="_top" class="card__target" href="/labels/hqqgnanznopjyavx">HqQGNaNznOPjYAvx</a>
2460          </div>
2461          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2462            Label, Appenzell Ausserrhoden
2463          </div>
2464        </div>
2465      </div>
2466    </div>
2467
2468    <!-- content -->
2469    <div>
2470      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/assets/missing/missing_user_square_large-c7eee8188202f7b7978900bae9f150521d965fffb65c6b3ffe03e24587bafd15.jpg" />
2471    </div>
2472  </div>
2473</div>
2474<div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2475  <div class="card w-full h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2476    <!-- header -->
2477    <div class="flex flex-row justify-between items-center py-3 px-4">
2478      <div class="w-full flex flex-row items-center gap-4">
2479        <div class="flex flex-col overflow-hidden">
2480          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2481            <a data-turbo-frame="_top" class="card__target" href="/labels/emmanuellusianuvonza">EMMANUEL LUSIANU VONZA</a>
2482          </div>
2483          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2484            Label, Geneva
2485          </div>
2486        </div>
2487      </div>
2488    </div>
2489
2490    <!-- content -->
2491    <div>
2492      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/assets/missing/missing_user_square_large-c7eee8188202f7b7978900bae9f150521d965fffb65c6b3ffe03e24587bafd15.jpg" />
2493    </div>
2494  </div>
2495</div>
2496<div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2497  <div class="card w-full h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2498    <!-- header -->
2499    <div class="flex flex-row justify-between items-center py-3 px-4">
2500      <div class="w-full flex flex-row items-center gap-4">
2501        <div class="flex flex-col overflow-hidden">
2502          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2503            <a data-turbo-frame="_top" class="card__target" href="/labels/lantariusrecordszurich">Lantarius Records</a>
2504          </div>
2505          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2506            Label, Zürich
2507          </div>
2508        </div>
2509      </div>
2510    </div>
2511
2512    <!-- content -->
2513    <div>
2514      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc5NjYyNSwicHVyIjoiYmxvYl9pZCJ9fQ==--beba5e916e08d2c61e2aee04b36e1a144012b1e5/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/Lantarius-Records-Black.png" />
2515    </div>
2516  </div>
2517</div>
2518<div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2519  <div class="card w-full h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2520    <!-- header -->
2521    <div class="flex flex-row justify-between items-center py-3 px-4">
2522      <div class="w-full flex flex-row items-center gap-4">
2523        <div class="flex flex-col overflow-hidden">
2524          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2525            <a data-turbo-frame="_top" class="card__target" href="/labels/mangodragoninternational">Mango Dragon International</a>
2526          </div>
2527          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2528            Label, Geneva
2529          </div>
2530        </div>
2531      </div>
2532    </div>
2533
2534    <!-- content -->
2535    <div>
2536      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc5NDk5MiwicHVyIjoiYmxvYl9pZCJ9fQ==--cc87392a06db8a8e1dd31e2539714aebe37c6b66/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/MANGO%20DRAGON%20LOGO%20INSTA.jpg" />
2537    </div>
2538  </div>
2539</div>
2540<div class="snap-start flex-shrink-0 w-[180px] max-h-[270px] px-1 sm:px-2">
2541  <div class="card w-full h-full rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden">
2542    <!-- header -->
2543    <div class="flex flex-row justify-between items-center py-3 px-4">
2544      <div class="w-full flex flex-row items-center gap-4">
2545        <div class="flex flex-col overflow-hidden">
2546          <div class="text-base truncate text-gray-900 dark:text-gray-100">
2547            <a data-turbo-frame="_top" class="card__target" href="/labels/toscamusic">TOSCA Music</a>
2548          </div>
2549          <div class="text-sm truncate text-gray-900 dark:text-gray-100">
2550            Label, Zürich
2551          </div>
2552        </div>
2553      </div>
2554    </div>
2555
2556    <!-- content -->
2557    <div>
2558      <img alt="" class="max-w-full w-full aspect-square rounded-full" loading="lazy" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc5Mzc3NCwicHVyIjoiYmxvYl9pZCJ9fQ==--fb2cbd337b28bc7717a3e4ac740275510b5de8d3/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/Bild%2010.09.26%20um%2022.35.png" />
2559    </div>
2560  </div>
2561</div>
2562
2563        <a class="mx-2 place-self-center h-12 relative inline-flex flex-row items-center justify-center py-3 px-4 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium bg-black hover:bg-primary-900 text-white dark:bg-white dark:hover:bg-primary-200 dark:text-primary-800 uppercase" href="/home/advanced_search?models%5B%5D=Label&amp;order=age">
2564  <span class="material-symbols-outlined">expand_circle_right</span>
2565  <span class="ml-2">more</span>
2566</a>
2567      </div>
2568    </div>
2569  </div>
2570</section>
2571
2572          <section>
2573  <div
2574    data-controller="dropdown tabs"
2575    data-dropdown-show-class="show"
2576    data-dropdown-hidden-class="hidden"
2577    data-tabs-active-class="active"
2578    data-type="tabs-container"
2579    >
2580    <div class="relative">
2581      <h2 class="text-lg text-gray-800 dark:text-gray-200 mb-5 pt-5 uppercase">
2582        <button data-action="dropdown#toggle click@window->dropdown#hide" class="flex items-center">
2583          <span data-dropdown-target="label" class="uppercase">Next gigs</span>
2584          <span class="float material-symbols-outlined font-bold">expand_more</span>
2585        </button>
2586      </h2>
2587
2588      <ul data-dropdown-target="menu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute top-[3.1rem] z-30 transition duration-400 ease-in-out left-auto  min-w-[200px] inline-flex flex-col py-2 rounded-xl bg-white dark:bg-gray-900 shadow-md dark:shadow-gray-50/10 max-sm:mt-3 max-sm:left-4 max-sm:right-4">
2589          <li data-action="click->dropdown#select click->tabs#open" data-target-id="concerts-all" data-dropdown-label="All of Switzerland">
2590            <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer ">
2591              All of Switzerland
2592            </div>
2593          </li>
2594          <li data-action="click->dropdown#select click->tabs#open" data-target-id="concerts-chd" data-dropdown-label="German part">
2595            <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer ">
2596              German part
2597            </div>
2598          </li>
2599          <li data-action="click->dropdown#select click->tabs#open" data-target-id="concerts-chf" data-dropdown-label="French part">
2600            <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer ">
2601              French part
2602            </div>
2603          </li>
2604          <li data-action="click->dropdown#select click->tabs#open" data-target-id="concerts-gr" data-dropdown-label="Graubünden">
2605            <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer ">
2606              Graubünden
2607            </div>
2608          </li>
2609          <li data-action="click->dropdown#select click->tabs#open" data-target-id="concerts-it" data-dropdown-label="Tessin">
2610            <div class="flex flex-row items-center gap-3 py-2.5 px-6 hover-icon hover:bg-surface-200 dark:hover:bg-surfacedark-200 cursor-pointer ">
2611              Tessin
2612            </div>
2613          </li>
2614      </ul>
2615    </div>
2616
2617    <div class="relative w-full overflow-hidden">
2618        <div data-tabs-target="tab" id="concerts-all" role="tabpanel" class="active [&.active]:flex hidden snap-x-mandatory overflow-x-auto scrollbar-hide pb-6">
2619          
2620<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
2621  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
2622    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTY3NzAwOSwicHVyIjoiYmxvYl9pZCJ9fQ==--94360b569725d249b9c5e350d85571fa451415dc/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJKUEciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--dbd320c64c205deb2099b95310199922cdb882ab/Dominique-Hunziker_%C2%A9Eny-Roland_03.JPG" />
2623    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
2624    <div class="absolute inset-0">
2625      <div class="flex flex-row justify-between items-center py-2 px-4">
2626        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
2627          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
2628            <div class="text-base text-white px-2 truncate">
2629              02.10 Bienne
2630            </div>
2631          </div>
2632        </div>
2633      </div>
2634      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
2635        <div class="flex flex-col">
2636          <div class="text-lg text-white truncate">
2637            <a data-turbo-frame="_top" class="card__target" href="/c/15Jk">Dominique Hunziker</a>
2638          </div>
2639          <div class="text-sm text-white truncate">
2640            Alternative Folk
2641          </div>
2642        </div>
2643      </div>
2644    </div>
2645  </div>
2646</div>
2647
2648<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
2649  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
2650    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU2Nzc0MiwicHVyIjoiYmxvYl9pZCJ9fQ==--353c74027a15719bd14731bab5edbc00eedaedf3/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJKUEciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--dbd320c64c205deb2099b95310199922cdb882ab/Last%20Avenue4.JPG" />
2651    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
2652    <div class="absolute inset-0">
2653      <div class="flex flex-row justify-between items-center py-2 px-4">
2654        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
2655          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
2656            <div class="text-base text-white px-2 truncate">
2657              02.10 8853 Lachen
2658            </div>
2659          </div>
2660        </div>
2661      </div>
2662      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
2663        <div class="flex flex-col">
2664          <div class="text-lg text-white truncate">
2665            <a data-turbo-frame="_top" class="card__target" href="/c/15p5">Last Avenue</a>
2666          </div>
2667          <div class="text-sm text-white truncate">
2668            Classic Rock
2669          </div>
2670        </div>
2671      </div>
2672    </div>
2673  </div>
2674</div>
2675
2676<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
2677  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
2678    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTYzNDY1MCwicHVyIjoiYmxvYl9pZCJ9fQ==--c8354d84b10337994126e7a320d7b7ecb3111ba3/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/EliasD_giliancardaci_17carr%C3%A92.jpg" />
2679    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
2680    <div class="absolute inset-0">
2681      <div class="flex flex-row justify-between items-center py-2 px-4">
2682        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
2683          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
2684            <div class="text-base text-white px-2 truncate">
2685              02.10 Martigny
2686            </div>
2687          </div>
2688        </div>
2689      </div>
2690      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
2691        <div class="flex flex-col">
2692          <div class="text-lg text-white truncate">
2693            <a data-turbo-frame="_top" class="card__target" href="/c/15b3">Elias D</a>
2694          </div>
2695          <div class="text-sm text-white truncate">
2696            Hip Hop Instrumental Jazz Rap
2697          </div>
2698        </div>
2699      </div>
2700    </div>
2701  </div>
2702</div>
2703
2704<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
2705  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
2706    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU0NTE1OCwicHVyIjoiYmxvYl9pZCJ9fQ==--08a91dd42f51fa43d3888937f9e9e3abacb7c9ae/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/ALMA_logo_white.png" />
2707    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
2708    <div class="absolute inset-0">
2709      <div class="flex flex-row justify-between items-center py-2 px-4">
2710        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
2711          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
2712            <div class="text-base text-white px-2 truncate">
2713              02.10 Sementina
2714            </div>
2715          </div>
2716        </div>
2717      </div>
2718      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
2719        <div class="flex flex-col">
2720          <div class="text-lg text-white truncate">
2721            <a data-turbo-frame="_top" class="card__target" href="/c/15K8">ALMA Acoustic</a>
2722          </div>
2723          <div class="text-sm text-white truncate">
2724            Pop
2725          </div>
2726        </div>
2727      </div>
2728    </div>
2729  </div>
2730</div>
2731
2732<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
2733  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
2734    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc5ODYwOSwicHVyIjoiYmxvYl9pZCJ9fQ==--68b55ea360341f564c663eb3c5cb6daf0de98df7/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/Anna%20Mae%20Sole%20Traveller%20cover.jpg" />
2735    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
2736    <div class="absolute inset-0">
2737      <div class="flex flex-row justify-between items-center py-2 px-4">
2738        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
2739          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
2740            <div class="text-base text-white px-2 truncate">
2741              02.10 Solothurn
2742            </div>
2743          </div>
2744        </div>
2745      </div>
2746      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
2747        <div class="flex flex-col">
2748          <div class="text-lg text-white truncate">
2749            <a data-turbo-frame="_top" class="card__target" href="/c/15zY">Anna Mae</a>
2750          </div>
2751          <div class="text-sm text-white truncate">
2752            Singer-Songwriter
2753          </div>
2754        </div>
2755      </div>
2756    </div>
2757  </div>
2758</div>
2759
2760<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
2761  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
2762    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4Njk5NywicHVyIjoiYmxvYl9pZCJ9fQ==--90ac94cf3d00f8273a42b65a3335d444d24b0129/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/1EATSHOOT_@evolbeil_LoveLiebmann_horizontal.jpg" />
2763    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
2764    <div class="absolute inset-0">
2765      <div class="flex flex-row justify-between items-center py-2 px-4">
2766        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
2767          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
2768            <div class="text-base text-white px-2 truncate">
2769              02.10 Zürich
2770            </div>
2771          </div>
2772        </div>
2773      </div>
2774      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
2775        <div class="flex flex-col">
2776          <div class="text-lg text-white truncate">
2777            <a data-turbo-frame="_top" class="card__target" href="/c/15zJ">eggs and tiaras</a>
2778          </div>
2779          <div class="text-sm text-white truncate">
2780            electro clashpop
2781          </div>
2782        </div>
2783      </div>
2784    </div>
2785  </div>
2786</div>
2787
2788<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
2789  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
2790    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzIyNzg0LCJwdXIiOiJibG9iX2lkIn19--3593e1ae1dd693b4704ec27033ab534b86fd19f5/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls0MDAsNDAwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--7e6f7524c7ad63791f7f36a48bbf2298a2b59254/emptyname-1.jpeg" />
2791    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
2792    <div class="absolute inset-0">
2793      <div class="flex flex-row justify-between items-center py-2 px-4">
2794        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
2795          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
2796            <div class="text-base text-white px-2 truncate">
2797              02.10 Zürich
2798            </div>
2799          </div>
2800        </div>
2801      </div>
2802      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
2803        <div class="flex flex-col">
2804          <div class="text-lg text-white truncate">
2805            <a data-turbo-frame="_top" class="card__target" href="/c/151I">Lea Lustenberger</a>
2806          </div>
2807          <div class="text-sm text-white truncate">
2808            Singer-Songwriter
2809          </div>
2810        </div>
2811      </div>
2812    </div>
2813  </div>
2814</div>
2815
2816<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
2817  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
2818    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1NjM2OCwicHVyIjoiYmxvYl9pZCJ9fQ==--2805a3e55add7caf700c407f880cd90fc9e49091/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/_NIK2278BW.jpg" />
2819    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
2820    <div class="absolute inset-0">
2821      <div class="flex flex-row justify-between items-center py-2 px-4">
2822        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
2823          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
2824            <div class="text-base text-white px-2 truncate">
2825              02.10 Basel
2826            </div>
2827          </div>
2828        </div>
2829      </div>
2830      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
2831        <div class="flex flex-col">
2832          <div class="text-lg text-white truncate">
2833            <a data-turbo-frame="_top" class="card__target" href="/c/14Oz">The Midlandfuckers</a>
2834          </div>
2835          <div class="text-sm text-white truncate">
2836            Metal/Punk
2837          </div>
2838        </div>
2839      </div>
2840    </div>
2841  </div>
2842</div>
2843
2844<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
2845  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
2846    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzQxNzA4LCJwdXIiOiJibG9iX2lkIn19--0abe9a84293668be7c79e18a70fec81411084283/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/atelier_zwygart0702_23_byjence_0525_sw.jpg" />
2847    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
2848    <div class="absolute inset-0">
2849      <div class="flex flex-row justify-between items-center py-2 px-4">
2850        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
2851          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
2852            <div class="text-base text-white px-2 truncate">
2853              02.10 Tenniken
2854            </div>
2855          </div>
2856        </div>
2857      </div>
2858      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
2859        <div class="flex flex-col">
2860          <div class="text-lg text-white truncate">
2861            <a data-turbo-frame="_top" class="card__target" href="/c/15H3">Byjence</a>
2862          </div>
2863          <div class="text-sm text-white truncate">
2864            Singer-Songwriter
2865          </div>
2866        </div>
2867      </div>
2868    </div>
2869  </div>
2870</div>
2871
2872<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
2873  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
2874    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzAwMTA1LCJwdXIiOiJibG9iX2lkIn19--fcb625ad4e1abbdb24c2fe8384c2b398a49b3d46/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/frame-5spotify-gallery2.jpg" />
2875    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
2876    <div class="absolute inset-0">
2877      <div class="flex flex-row justify-between items-center py-2 px-4">
2878        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
2879          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
2880            <div class="text-base text-white px-2 truncate">
2881              02.10 Langstrasse 63, 8004 Zürich
2882            </div>
2883          </div>
2884        </div>
2885      </div>
2886      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
2887        <div class="flex flex-col">
2888          <div class="text-lg text-white truncate">
2889            <a data-turbo-frame="_top" class="card__target" href="/c/15GX">Twisted Smoke Band</a>
2890          </div>
2891          <div class="text-sm text-white truncate">
2892            Blues, Rhythm&#39;n&#39;Blues, Country, Pop &amp; more
2893          </div>
2894        </div>
2895      </div>
2896    </div>
2897  </div>
2898</div>
2899
2900          <a class="mx-2 place-self-center h-12 relative inline-flex flex-row items-center justify-center py-3 px-4 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium bg-black hover:bg-primary-900 text-white dark:bg-white dark:hover:bg-primary-200 dark:text-primary-800 uppercase" href="/performances?performance_filter%5Bregion%5D=all">
2901  <span class="material-symbols-outlined">expand_circle_right</span>
2902  <span class="ml-2">more</span>
2903</a>
2904        </div>
2905        <div data-tabs-target="tab" id="concerts-chd" role="tabpanel" class=" [&.active]:flex hidden snap-x-mandatory overflow-x-auto scrollbar-hide pb-6">
2906          
2907<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
2908  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
2909    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTY3NzAwOSwicHVyIjoiYmxvYl9pZCJ9fQ==--94360b569725d249b9c5e350d85571fa451415dc/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJKUEciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--dbd320c64c205deb2099b95310199922cdb882ab/Dominique-Hunziker_%C2%A9Eny-Roland_03.JPG" />
2910    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
2911    <div class="absolute inset-0">
2912      <div class="flex flex-row justify-between items-center py-2 px-4">
2913        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
2914          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
2915            <div class="text-base text-white px-2 truncate">
2916              02.10 Bienne
2917            </div>
2918          </div>
2919        </div>
2920      </div>
2921      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
2922        <div class="flex flex-col">
2923          <div class="text-lg text-white truncate">
2924            <a data-turbo-frame="_top" class="card__target" href="/c/15Jk">Dominique Hunziker</a>
2925          </div>
2926          <div class="text-sm text-white truncate">
2927            Alternative Folk
2928          </div>
2929        </div>
2930      </div>
2931    </div>
2932  </div>
2933</div>
2934
2935<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
2936  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
2937    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU2Nzc0MiwicHVyIjoiYmxvYl9pZCJ9fQ==--353c74027a15719bd14731bab5edbc00eedaedf3/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJKUEciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--dbd320c64c205deb2099b95310199922cdb882ab/Last%20Avenue4.JPG" />
2938    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
2939    <div class="absolute inset-0">
2940      <div class="flex flex-row justify-between items-center py-2 px-4">
2941        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
2942          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
2943            <div class="text-base text-white px-2 truncate">
2944              02.10 8853 Lachen
2945            </div>
2946          </div>
2947        </div>
2948      </div>
2949      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
2950        <div class="flex flex-col">
2951          <div class="text-lg text-white truncate">
2952            <a data-turbo-frame="_top" class="card__target" href="/c/15p5">Last Avenue</a>
2953          </div>
2954          <div class="text-sm text-white truncate">
2955            Classic Rock
2956          </div>
2957        </div>
2958      </div>
2959    </div>
2960  </div>
2961</div>
2962
2963<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
2964  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
2965    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTYzNDY1MCwicHVyIjoiYmxvYl9pZCJ9fQ==--c8354d84b10337994126e7a320d7b7ecb3111ba3/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/EliasD_giliancardaci_17carr%C3%A92.jpg" />
2966    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
2967    <div class="absolute inset-0">
2968      <div class="flex flex-row justify-between items-center py-2 px-4">
2969        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
2970          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
2971            <div class="text-base text-white px-2 truncate">
2972              02.10 Martigny
2973            </div>
2974          </div>
2975        </div>
2976      </div>
2977      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
2978        <div class="flex flex-col">
2979          <div class="text-lg text-white truncate">
2980            <a data-turbo-frame="_top" class="card__target" href="/c/15b3">Elias D</a>
2981          </div>
2982          <div class="text-sm text-white truncate">
2983            Hip Hop Instrumental Jazz Rap
2984          </div>
2985        </div>
2986      </div>
2987    </div>
2988  </div>
2989</div>
2990
2991<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
2992  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
2993    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc5ODYwOSwicHVyIjoiYmxvYl9pZCJ9fQ==--68b55ea360341f564c663eb3c5cb6daf0de98df7/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/Anna%20Mae%20Sole%20Traveller%20cover.jpg" />
2994    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
2995    <div class="absolute inset-0">
2996      <div class="flex flex-row justify-between items-center py-2 px-4">
2997        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
2998          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
2999            <div class="text-base text-white px-2 truncate">
3000              02.10 Solothurn
3001            </div>
3002          </div>
3003        </div>
3004      </div>
3005      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3006        <div class="flex flex-col">
3007          <div class="text-lg text-white truncate">
3008            <a data-turbo-frame="_top" class="card__target" href="/c/15zY">Anna Mae</a>
3009          </div>
3010          <div class="text-sm text-white truncate">
3011            Singer-Songwriter
3012          </div>
3013        </div>
3014      </div>
3015    </div>
3016  </div>
3017</div>
3018
3019<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3020  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3021    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4Njk5NywicHVyIjoiYmxvYl9pZCJ9fQ==--90ac94cf3d00f8273a42b65a3335d444d24b0129/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/1EATSHOOT_@evolbeil_LoveLiebmann_horizontal.jpg" />
3022    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3023    <div class="absolute inset-0">
3024      <div class="flex flex-row justify-between items-center py-2 px-4">
3025        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3026          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3027            <div class="text-base text-white px-2 truncate">
3028              02.10 Zürich
3029            </div>
3030          </div>
3031        </div>
3032      </div>
3033      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3034        <div class="flex flex-col">
3035          <div class="text-lg text-white truncate">
3036            <a data-turbo-frame="_top" class="card__target" href="/c/15zJ">eggs and tiaras</a>
3037          </div>
3038          <div class="text-sm text-white truncate">
3039            electro clashpop
3040          </div>
3041        </div>
3042      </div>
3043    </div>
3044  </div>
3045</div>
3046
3047<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3048  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3049    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzIyNzg0LCJwdXIiOiJibG9iX2lkIn19--3593e1ae1dd693b4704ec27033ab534b86fd19f5/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls0MDAsNDAwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--7e6f7524c7ad63791f7f36a48bbf2298a2b59254/emptyname-1.jpeg" />
3050    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3051    <div class="absolute inset-0">
3052      <div class="flex flex-row justify-between items-center py-2 px-4">
3053        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3054          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3055            <div class="text-base text-white px-2 truncate">
3056              02.10 Zürich
3057            </div>
3058          </div>
3059        </div>
3060      </div>
3061      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3062        <div class="flex flex-col">
3063          <div class="text-lg text-white truncate">
3064            <a data-turbo-frame="_top" class="card__target" href="/c/151I">Lea Lustenberger</a>
3065          </div>
3066          <div class="text-sm text-white truncate">
3067            Singer-Songwriter
3068          </div>
3069        </div>
3070      </div>
3071    </div>
3072  </div>
3073</div>
3074
3075<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3076  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3077    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1NjM2OCwicHVyIjoiYmxvYl9pZCJ9fQ==--2805a3e55add7caf700c407f880cd90fc9e49091/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/_NIK2278BW.jpg" />
3078    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3079    <div class="absolute inset-0">
3080      <div class="flex flex-row justify-between items-center py-2 px-4">
3081        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3082          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3083            <div class="text-base text-white px-2 truncate">
3084              02.10 Basel
3085            </div>
3086          </div>
3087        </div>
3088      </div>
3089      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3090        <div class="flex flex-col">
3091          <div class="text-lg text-white truncate">
3092            <a data-turbo-frame="_top" class="card__target" href="/c/14Oz">The Midlandfuckers</a>
3093          </div>
3094          <div class="text-sm text-white truncate">
3095            Metal/Punk
3096          </div>
3097        </div>
3098      </div>
3099    </div>
3100  </div>
3101</div>
3102
3103<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3104  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3105    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzQxNzA4LCJwdXIiOiJibG9iX2lkIn19--0abe9a84293668be7c79e18a70fec81411084283/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/atelier_zwygart0702_23_byjence_0525_sw.jpg" />
3106    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3107    <div class="absolute inset-0">
3108      <div class="flex flex-row justify-between items-center py-2 px-4">
3109        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3110          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3111            <div class="text-base text-white px-2 truncate">
3112              02.10 Tenniken
3113            </div>
3114          </div>
3115        </div>
3116      </div>
3117      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3118        <div class="flex flex-col">
3119          <div class="text-lg text-white truncate">
3120            <a data-turbo-frame="_top" class="card__target" href="/c/15H3">Byjence</a>
3121          </div>
3122          <div class="text-sm text-white truncate">
3123            Singer-Songwriter
3124          </div>
3125        </div>
3126      </div>
3127    </div>
3128  </div>
3129</div>
3130
3131<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3132  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3133    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzAwMTA1LCJwdXIiOiJibG9iX2lkIn19--fcb625ad4e1abbdb24c2fe8384c2b398a49b3d46/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/frame-5spotify-gallery2.jpg" />
3134    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3135    <div class="absolute inset-0">
3136      <div class="flex flex-row justify-between items-center py-2 px-4">
3137        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3138          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3139            <div class="text-base text-white px-2 truncate">
3140              02.10 Langstrasse 63, 8004 Zürich
3141            </div>
3142          </div>
3143        </div>
3144      </div>
3145      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3146        <div class="flex flex-col">
3147          <div class="text-lg text-white truncate">
3148            <a data-turbo-frame="_top" class="card__target" href="/c/15GX">Twisted Smoke Band</a>
3149          </div>
3150          <div class="text-sm text-white truncate">
3151            Blues, Rhythm&#39;n&#39;Blues, Country, Pop &amp; more
3152          </div>
3153        </div>
3154      </div>
3155    </div>
3156  </div>
3157</div>
3158
3159<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3160  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3161    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTM4MjMwNSwicHVyIjoiYmxvYl9pZCJ9fQ==--15ee196b4d49b3e994e3cb0280f051d39e6f412c/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls0MDAsNDAwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--7e6f7524c7ad63791f7f36a48bbf2298a2b59254/IMG_2424.jpeg" />
3162    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3163    <div class="absolute inset-0">
3164      <div class="flex flex-row justify-between items-center py-2 px-4">
3165        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3166          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3167            <div class="text-base text-white px-2 truncate">
3168              02.10 Valposchiavo
3169            </div>
3170          </div>
3171        </div>
3172      </div>
3173      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3174        <div class="flex flex-col">
3175          <div class="text-lg text-white truncate">
3176            <a data-turbo-frame="_top" class="card__target" href="/c/157I">Cinzia musica</a>
3177          </div>
3178          <div class="text-sm text-white truncate">
3179            Pop, Swing, Jazz
3180          </div>
3181        </div>
3182      </div>
3183    </div>
3184  </div>
3185</div>
3186
3187          <a class="mx-2 place-self-center h-12 relative inline-flex flex-row items-center justify-center py-3 px-4 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium bg-black hover:bg-primary-900 text-white dark:bg-white dark:hover:bg-primary-200 dark:text-primary-800 uppercase" href="/performances?performance_filter%5Bregion%5D=chd">
3188  <span class="material-symbols-outlined">expand_circle_right</span>
3189  <span class="ml-2">more</span>
3190</a>
3191        </div>
3192        <div data-tabs-target="tab" id="concerts-chf" role="tabpanel" class=" [&.active]:flex hidden snap-x-mandatory overflow-x-auto scrollbar-hide pb-6">
3193          
3194<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3195  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3196    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTY3NzAwOSwicHVyIjoiYmxvYl9pZCJ9fQ==--94360b569725d249b9c5e350d85571fa451415dc/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJKUEciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--dbd320c64c205deb2099b95310199922cdb882ab/Dominique-Hunziker_%C2%A9Eny-Roland_03.JPG" />
3197    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3198    <div class="absolute inset-0">
3199      <div class="flex flex-row justify-between items-center py-2 px-4">
3200        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3201          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3202            <div class="text-base text-white px-2 truncate">
3203              02.10 Bienne
3204            </div>
3205          </div>
3206        </div>
3207      </div>
3208      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3209        <div class="flex flex-col">
3210          <div class="text-lg text-white truncate">
3211            <a data-turbo-frame="_top" class="card__target" href="/c/15Jk">Dominique Hunziker</a>
3212          </div>
3213          <div class="text-sm text-white truncate">
3214            Alternative Folk
3215          </div>
3216        </div>
3217      </div>
3218    </div>
3219  </div>
3220</div>
3221
3222<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3223  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3224    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTYzNDY1MCwicHVyIjoiYmxvYl9pZCJ9fQ==--c8354d84b10337994126e7a320d7b7ecb3111ba3/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/EliasD_giliancardaci_17carr%C3%A92.jpg" />
3225    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3226    <div class="absolute inset-0">
3227      <div class="flex flex-row justify-between items-center py-2 px-4">
3228        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3229          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3230            <div class="text-base text-white px-2 truncate">
3231              02.10 Martigny
3232            </div>
3233          </div>
3234        </div>
3235      </div>
3236      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3237        <div class="flex flex-col">
3238          <div class="text-lg text-white truncate">
3239            <a data-turbo-frame="_top" class="card__target" href="/c/15b3">Elias D</a>
3240          </div>
3241          <div class="text-sm text-white truncate">
3242            Hip Hop Instrumental Jazz Rap
3243          </div>
3244        </div>
3245      </div>
3246    </div>
3247  </div>
3248</div>
3249
3250<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3251  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3252    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzE2MzU2LCJwdXIiOiJibG9iX2lkIn19--ec4482ea0df587dacf8225b3d86bf763360f1916/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/lyosun-ep-release-white.png" />
3253    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3254    <div class="absolute inset-0">
3255      <div class="flex flex-row justify-between items-center py-2 px-4">
3256        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3257          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3258            <div class="text-base text-white px-2 truncate">
3259              02.10 La Jonquille
3260            </div>
3261          </div>
3262        </div>
3263      </div>
3264      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3265        <div class="flex flex-col">
3266          <div class="text-lg text-white truncate">
3267            <a data-turbo-frame="_top" class="card__target" href="/c/15L1">LyOsun</a>
3268          </div>
3269          <div class="text-sm text-white truncate">
3270            Electro Mélodique
3271          </div>
3272        </div>
3273      </div>
3274    </div>
3275  </div>
3276</div>
3277
3278<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3279  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3280    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1MDkwMywicHVyIjoiYmxvYl9pZCJ9fQ==--d255961f3c59f1e28536c98e4031eca92c387cce/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/channels4_profile.jpg" />
3281    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3282    <div class="absolute inset-0">
3283      <div class="flex flex-row justify-between items-center py-2 px-4">
3284        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3285          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3286            <div class="text-base text-white px-2 truncate">
3287              02.10 Lausanne
3288            </div>
3289          </div>
3290        </div>
3291      </div>
3292      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3293        <div class="flex flex-col">
3294          <div class="text-lg text-white truncate">
3295            <a data-turbo-frame="_top" class="card__target" href="/c/15rc">Bounds of Silence</a>
3296          </div>
3297          <div class="text-sm text-white truncate">
3298            Pop / Rock
3299          </div>
3300        </div>
3301      </div>
3302    </div>
3303  </div>
3304</div>
3305
3306<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3307  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3308    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU0NzIwMiwicHVyIjoiYmxvYl9pZCJ9fQ==--e4120090073de8d61e15ee7e363424eec7e26dcc/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/FMR-logo-1_Square.jpg" />
3309    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3310    <div class="absolute inset-0">
3311      <div class="flex flex-row justify-between items-center py-2 px-4">
3312        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3313          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3314            <div class="text-base text-white px-2 truncate">
3315              02.10 1004 Lausanne
3316            </div>
3317          </div>
3318        </div>
3319      </div>
3320      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3321        <div class="flex flex-col">
3322          <div class="text-lg text-white truncate">
3323            <a data-turbo-frame="_top" class="card__target" href="/c/14
3323Xn">FMR</a>
3324          </div>
3325          <div class="text-sm text-white truncate">
3326            Reprises Blues &amp; Rock, parfois revisitées et de compositions
3327          </div>
3328        </div>
3329      </div>
3330    </div>
3331  </div>
3332</div>
3333
3334<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3335  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3336    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc3NTgwMCwicHVyIjoiYmxvYl9pZCJ9fQ==--11bae99d35afd11e2bc4ca19fc6927c08bf17e7e/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/IMG_5649.jpg" />
3337    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3338    <div class="absolute inset-0">
3339      <div class="flex flex-row justify-between items-center py-2 px-4">
3340        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3341          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3342            <div class="text-base text-white px-2 truncate">
3343              02.10 1004 Lausanne
3344            </div>
3345          </div>
3346        </div>
3347      </div>
3348      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3349        <div class="flex flex-col">
3350          <div class="text-lg text-white truncate">
3351            <a data-turbo-frame="_top" class="card__target" href="/c/14
3351Xr">HarmoBruce</a>
3352          </div>
3353          <div class="text-sm text-white truncate">
3354            Rock, folk, all musical genres where the harmonica can express its energy / Rock, folk, tous les genres musicaux où l&#39;harmonica peut exprimer son énergie / Rock, folk, tutti i generi musicali in cui l&#39;armonica può esprimere la sua energia
3355          </div>
3356        </div>
3357      </div>
3358    </div>
3359  </div>
3360</div>
3361
3362<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3363  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3364    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQxMTUxOCwicHVyIjoiYmxvYl9pZCJ9fQ==--7e9838d38c1138f97d27c55a0c4bd85b55f8d691/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/AMRB%20Photo%202025.jpg" />
3365    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3366    <div class="absolute inset-0">
3367      <div class="flex flex-row justify-between items-center py-2 px-4">
3368        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3369          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3370            <div class="text-base text-white px-2 truncate">
3371              02.10 Rue du collège 4, 2300 la Chaux-de-Fonds
3372            </div>
3373          </div>
3374        </div>
3375      </div>
3376      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3377        <div class="flex flex-col">
3378          <div class="text-lg text-white truncate">
3379            <a data-turbo-frame="_top" class="card__target" href="/c/150U">Al Michael Rock Band</a>
3380          </div>
3381          <div class="text-sm text-white truncate">
3382            Blues-Rock
3383          </div>
3384        </div>
3385      </div>
3386    </div>
3387  </div>
3388</div>
3389
3390<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3391  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3392    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6Mjk0ODQyLCJwdXIiOiJibG9iX2lkIn19--a6c770eaf433a7c3a73eec42c04382d0630710de/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/backeast_036-min.jpg" />
3393    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3394    <div class="absolute inset-0">
3395      <div class="flex flex-row justify-between items-center py-2 px-4">
3396        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3397          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3398            <div class="text-base text-white px-2 truncate">
3399              03.10 Bellwald
3400            </div>
3401          </div>
3402        </div>
3403      </div>
3404      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3405        <div class="flex flex-col">
3406          <div class="text-lg text-white truncate">
3407            <a data-turbo-frame="_top" class="card__target" href="/c/15Hg">Back East</a>
3408          </div>
3409          <div class="text-sm text-white truncate">
3410            Punk Rock
3411          </div>
3412        </div>
3413      </div>
3414    </div>
3415  </div>
3416</div>
3417
3418<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3419  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3420    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc5MTI2NSwicHVyIjoiYmxvYl9pZCJ9fQ==--2b8f1ce156c1ba389b5ea75b8a017b230c6fe14b/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/Logo%20(1).png" />
3421    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3422    <div class="absolute inset-0">
3423      <div class="flex flex-row justify-between items-center py-2 px-4">
3424        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3425          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3426            <div class="text-base text-white px-2 truncate">
3427              03.10 La Chaux-de-Fonds
3428            </div>
3429          </div>
3430        </div>
3431      </div>
3432      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3433        <div class="flex flex-col">
3434          <div class="text-lg text-white truncate">
3435            <a data-turbo-frame="_top" class="card__target" href="/c/15BJ">Attic Foundation</a>
3436          </div>
3437          <div class="text-sm text-white truncate">
3438            Reggae
3439          </div>
3440        </div>
3441      </div>
3442    </div>
3443  </div>
3444</div>
3445
3446<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3447  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3448    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzU1MDYxLCJwdXIiOiJibG9iX2lkIn19--0185ec7eda52e5271820712a998aa5351b66b034/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/capture-d-ecran-2024-11-04-a-15-19-36.png" />
3449    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3450    <div class="absolute inset-0">
3451      <div class="flex flex-row justify-between items-center py-2 px-4">
3452        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3453          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3454            <div class="text-base text-white px-2 truncate">
3455              03.10 Fribourg
3456            </div>
3457          </div>
3458        </div>
3459      </div>
3460      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3461        <div class="flex flex-col">
3462          <div class="text-lg text-white truncate">
3463            <a data-turbo-frame="_top" class="card__target" href="/c/15sI">ONCLE Pi</a>
3464          </div>
3465          <div class="text-sm text-white truncate">
3466            française humoristique mais pas que...
3467          </div>
3468        </div>
3469      </div>
3470    </div>
3471  </div>
3472</div>
3473
3474          <a class="mx-2 place-self-center h-12 relative inline-flex flex-row items-center justify-center py-3 px-4 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium bg-black hover:bg-primary-900 text-white dark:bg-white dark:hover:bg-primary-200 dark:text-primary-800 uppercase" href="/performances?performance_filter%5Bregion%5D=chf">
3475  <span class="material-symbols-outlined">expand_circle_right</span>
3476  <span class="ml-2">more</span>
3477</a>
3478        </div>
3479        <div data-tabs-target="tab" id="concerts-gr" role="tabpanel" class=" [&.active]:flex hidden snap-x-mandatory overflow-x-auto scrollbar-hide pb-6">
3480          
3481<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3482  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3483    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTM4MjMwNSwicHVyIjoiYmxvYl9pZCJ9fQ==--15ee196b4d49b3e994e3cb0280f051d39e6f412c/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls0MDAsNDAwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--7e6f7524c7ad63791f7f36a48bbf2298a2b59254/IMG_2424.jpeg" />
3484    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3485    <div class="absolute inset-0">
3486      <div class="flex flex-row justify-between items-center py-2 px-4">
3487        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3488          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3489            <div class="text-base text-white px-2 truncate">
3490              02.10 Valposchiavo
3491            </div>
3492          </div>
3493        </div>
3494      </div>
3495      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3496        <div class="flex flex-col">
3497          <div class="text-lg text-white truncate">
3498            <a data-turbo-frame="_top" class="card__target" href="/c/157I">Cinzia musica</a>
3499          </div>
3500          <div class="text-sm text-white truncate">
3501            Pop, Swing, Jazz
3502          </div>
3503        </div>
3504      </div>
3505    </div>
3506  </div>
3507</div>
3508
3509<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3510  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3511    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc5MzY3MSwicHVyIjoiYmxvYl9pZCJ9fQ==--596bbdede07c2fe0f406bdab1dcd952a7147cc67/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/Bildschirmfoto%202026-09-10%20um%2014.28.50.jpg" />
3512    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3513    <div class="absolute inset-0">
3514      <div class="flex flex-row justify-between items-center py-2 px-4">
3515        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3516          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3517            <div class="text-base text-white px-2 truncate">
3518              03.10 Scuol
3519            </div>
3520          </div>
3521        </div>
3522      </div>
3523      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3524        <div class="flex flex-col">
3525          <div class="text-lg text-white truncate">
3526            <a data-turbo-frame="_top" class="card__target" href="/c/15G6">Bibi Vaplan</a>
3527          </div>
3528          <div class="text-sm text-white truncate">
3529            Pop
3530          </div>
3531        </div>
3532      </div>
3533    </div>
3534  </div>
3535</div>
3536
3537<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3538  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3539    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1NjM2OCwicHVyIjoiYmxvYl9pZCJ9fQ==--2805a3e55add7caf700c407f880cd90fc9e49091/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/_NIK2278BW.jpg" />
3540    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3541    <div class="absolute inset-0">
3542      <div class="flex flex-row justify-between items-center py-2 px-4">
3543        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3544          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3545            <div class="text-base text-white px-2 truncate">
3546              03.10 Chur
3547            </div>
3548          </div>
3549        </div>
3550      </div>
3551      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3552        <div class="flex flex-col">
3553          <div class="text-lg text-white truncate">
3554            <a data-turbo-frame="_top" class="card__target" href="/c/15vr">The Midlandfuckers</a>
3555          </div>
3556          <div class="text-sm text-white truncate">
3557            Metal/Punk
3558          </div>
3559        </div>
3560      </div>
3561    </div>
3562  </div>
3563</div>
3564
3565<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3566  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3567    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTY4MzA4OCwicHVyIjoiYmxvYl9pZCJ9fQ==--45a96996e7eb919ff69d42067e362f7a2eb6c483/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJKUEciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--dbd320c64c205deb2099b95310199922cdb882ab/IMG_5761.JPG" />
3568    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3569    <div class="absolute inset-0">
3570      <div class="flex flex-row justify-between items-center py-2 px-4">
3571        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3572          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3573            <div class="text-base text-white px-2 truncate">
3574              03.10 Davos
3575            </div>
3576          </div>
3577        </div>
3578      </div>
3579      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3580        <div class="flex flex-col">
3581          <div class="text-lg text-white truncate">
3582            <a data-turbo-frame="_top" class="card__target" href="/c/148H">Carmen Cresta</a>
3583          </div>
3584          <div class="text-sm text-white truncate">
3585            Acoustic Blues/Bluesrock
3586          </div>
3587        </div>
3588      </div>
3589    </div>
3590  </div>
3591</div>
3592
3593<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3594  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3595    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc5MzY3MSwicHVyIjoiYmxvYl9pZCJ9fQ==--596bbdede07c2fe0f406bdab1dcd952a7147cc67/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/Bildschirmfoto%202026-09-10%20um%2014.28.50.jpg" />
3596    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3597    <div class="absolute inset-0">
3598      <div class="flex flex-row justify-between items-center py-2 px-4">
3599        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3600          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3601            <div class="text-base text-white px-2 truncate">
3602              10.10 Ilanz
3603            </div>
3604          </div>
3605        </div>
3606      </div>
3607      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3608        <div class="flex flex-col">
3609          <div class="text-lg text-white truncate">
3610            <a data-turbo-frame="_top" class="card__target" href="/c/15G8">Bibi Vaplan</a>
3611          </div>
3612          <div class="text-sm text-white truncate">
3613            Pop
3614          </div>
3615        </div>
3616      </div>
3617    </div>
3618  </div>
3619</div>
3620
3621<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3622  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3623    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzYyNDkxLCJwdXIiOiJibG9iX2lkIn19--85e22dd21f37fdf4e69a6298819f816aade250b0/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/okn-stairs-quadrat.jpg" />
3624    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3625    <div class="absolute inset-0">
3626      <div class="flex flex-row justify-between items-center py-2 px-4">
3627        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3628          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3629            <div class="text-base text-white px-2 truncate">
3630              10.10 Chur
3631            </div>
3632          </div>
3633        </div>
3634      </div>
3635      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3636        <div class="flex flex-col">
3637          <div class="text-lg text-white truncate">
3638            <a data-turbo-frame="_top" class="card__target" href="/c/15zQ">Old Kids Noise</a>
3639          </div>
3640          <div class="text-sm text-white truncate">
3641            Punkrock
3642          </div>
3643        </div>
3644      </div>
3645    </div>
3646  </div>
3647</div>
3648
3649<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3650  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3651    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTUxNTcyNSwicHVyIjoiYmxvYl9pZCJ9fQ==--dfac612ea083f00fc9813276482b8267894e963a/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/piclumen-1758879358889.png" />
3652    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3653    <div class="absolute inset-0">
3654      <div class="flex flex-row justify-between items-center py-2 px-4">
3655        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3656          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3657            <div class="text-base text-white px-2 truncate">
3658              16.10 Scuol
3659            </div>
3660          </div>
3661        </div>
3662      </div>
3663      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3664        <div class="flex flex-col">
3665          <div class="text-lg text-white truncate">
3666            <a data-turbo-frame="_top" class="card__target" href="/c/15Kc">Fanadura</a>
3667          </div>
3668          <div class="text-sm text-white truncate">
3669            Pop
3670          </div>
3671        </div>
3672      </div>
3673    </div>
3674  </div>
3675</div>
3676
3677<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3678  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3679    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTM4MjMwNSwicHVyIjoiYmxvYl9pZCJ9fQ==--15ee196b4d49b3e994e3cb0280f051d39e6f412c/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls0MDAsNDAwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--7e6f7524c7ad63791f7f36a48bbf2298a2b59254/IMG_2424.jpeg" />
3680    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3681    <div class="absolute inset-0">
3682      <div class="flex flex-row justify-between items-center py-2 px-4">
3683        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3684          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3685            <div class="text-base text-white px-2 truncate">
3686              18.10 Chur
3687            </div>
3688          </div>
3689        </div>
3690      </div>
3691      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3692        <div class="flex flex-col">
3693          <div class="text-lg text-white truncate">
3694            <a data-turbo-frame="_top" class="card__target" href="/c/157J">Cinzia musica</a>
3695          </div>
3696          <div class="text-sm text-white truncate">
3697            Pop, Swing, Jazz
3698          </div>
3699        </div>
3700      </div>
3701    </div>
3702  </div>
3703</div>
3704
3705<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3706  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3707    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTM4MjMwNSwicHVyIjoiYmxvYl9pZCJ9fQ==--15ee196b4d49b3e994e3cb0280f051d39e6f412c/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls0MDAsNDAwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--7e6f7524c7ad63791f7f36a48bbf2298a2b59254/IMG_2424.jpeg" />
3708    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3709    <div class="absolute inset-0">
3710      <div class="flex flex-row justify-between items-center py-2 px-4">
3711        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3712          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3713            <div class="text-base text-white px-2 truncate">
3714              22.10 Samedan
3715            </div>
3716          </div>
3717        </div>
3718      </div>
3719      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3720        <div class="flex flex-col">
3721          <div class="text-lg text-white truncate">
3722            <a data-turbo-frame="_top" class="card__target" href="/c/157K">Cinzia musica</a>
3723          </div>
3724          <div class="text-sm text-white truncate">
3725            Pop, Swing, Jazz
3726          </div>
3727        </div>
3728      </div>
3729    </div>
3730  </div>
3731</div>
3732
3733<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3734  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3735    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU1Nzc0OCwicHVyIjoiYmxvYl9pZCJ9fQ==--629982ac4ccdf48eb92c8c39e307993f918c1e67/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJKUEciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--dbd320c64c205deb2099b95310199922cdb882ab/DSCF0691.JPG" />
3736    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3737    <div class="absolute inset-0">
3738      <div class="flex flex-row justify-between items-center py-2 px-4">
3739        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3740          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3741            <div class="text-base text-white px-2 truncate">
3742              23.10 Chur
3743            </div>
3744          </div>
3745        </div>
3746      </div>
3747      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3748        <div class="flex flex-col">
3749          <div class="text-lg text-white truncate">
3750            <a data-turbo-frame="_top" class="card__target" href="/c/15tY">Zoe Hannah</a>
3751          </div>
3752          <div class="text-sm text-white truncate">
3753            Singer-Songwriterin / Melancholic Pop
3754          </div>
3755        </div>
3756      </div>
3757    </div>
3758  </div>
3759</div>
3760
3761          <a class="mx-2 place-self-center h-12 relative inline-flex flex-row items-center justify-center py-3 px-4 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium bg-black hover:bg-primary-900 text-white dark:bg-white dark:hover:bg-primary-200 dark:text-primary-800 uppercase" href="/performances?performance_filter%5Bregion%5D=gr">
3762  <span class="material-symbols-outlined">expand_circle_right</span>
3763  <span class="ml-2">more</span>
3764</a>
3765        </div>
3766        <div data-tabs-target="tab" id="concerts-it" role="tabpanel" class=" [&.active]:flex hidden snap-x-mandatory overflow-x-auto scrollbar-hide pb-6">
3767          
3768<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3769  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3770    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU0NTE1OCwicHVyIjoiYmxvYl9pZCJ9fQ==--08a91dd42f51fa43d3888937f9e9e3abacb7c9ae/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/ALMA_logo_white.png" />
3771    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3772    <div class="absolute inset-0">
3773      <div class="flex flex-row justify-between items-center py-2 px-4">
3774        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3775          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3776            <div class="text-base text-white px-2 truncate">
3777              02.10 Sementina
3778            </div>
3779          </div>
3780        </div>
3781      </div>
3782      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3783        <div class="flex flex-col">
3784          <div class="text-lg text-white truncate">
3785            <a data-turbo-frame="_top" class="card__target" href="/c/15K8">ALMA Acoustic</a>
3786          </div>
3787          <div class="text-sm text-white truncate">
3788            Pop
3789          </div>
3790        </div>
3791      </div>
3792    </div>
3793  </div>
3794</div>
3795
3796<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3797  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3798    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQyNjc5LCJwdXIiOiJibG9iX2lkIn19--e30fd6b7c864cbc16ff77920dd9d866b07369037/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/img_8626.jpg" />
3799    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3800    <div class="absolute inset-0">
3801      <div class="flex flex-row justify-between items-center py-2 px-4">
3802        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3803          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3804            <div class="text-base text-white px-2 truncate">
3805              03.10 Locarno, TI
3806            </div>
3807          </div>
3808        </div>
3809      </div>
3810      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3811        <div class="flex flex-col">
3812          <div class="text-lg text-white truncate">
3813            <a data-turbo-frame="_top" class="card__target" href="/c/15H5">SHIMES</a>
3814          </div>
3815          <div class="text-sm text-white truncate">
3816            Metal/Punk
3817          </div>
3818        </div>
3819      </div>
3820    </div>
3821  </div>
3822</div>
3823
3824<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3825  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3826    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1Njg4MCwicHVyIjoiYmxvYl9pZCJ9fQ==--3fe310dd5d39db0c0e3171629c481efd673d27cf/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/92801.jpg" />
3827    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3828    <div class="absolute inset-0">
3829      <div class="flex flex-row justify-between items-center py-2 px-4">
3830        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3831          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3832            <div class="text-base text-white px-2 truncate">
3833              17.10 Spazio Elle - Locarno
3834            </div>
3835          </div>
3836        </div>
3837      </div>
3838      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3839        <div class="flex flex-col">
3840          <div class="text-lg text-white truncate">
3841            <a data-turbo-frame="_top" class="card__target" href="/c/15JD">UNBRAINED</a>
3842          </div>
3843          <div class="text-sm text-white truncate">
3844            hardcore punk
3845          </div>
3846        </div>
3847      </div>
3848    </div>
3849  </div>
3850</div>
3851
3852<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3853  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3854    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU0NTE1OCwicHVyIjoiYmxvYl9pZCJ9fQ==--08a91dd42f51fa43d3888937f9e9e3abacb7c9ae/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/ALMA_logo_white.png" />
3855    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3856    <div class="absolute inset-0">
3857      <div class="flex flex-row justify-between items-center py-2 px-4">
3858        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3859          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3860            <div class="text-base text-white px-2 truncate">
3861              23.10 Lugano
3862            </div>
3863          </div>
3864        </div>
3865      </div>
3866      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3867        <div class="flex flex-col">
3868          <div class="text-lg text-white truncate">
3869            <a data-turbo-frame="_top" class="card__target" href="/c/15K9">ALMA Acoustic</a>
3870          </div>
3871          <div class="text-sm text-white truncate">
3872            Pop
3873          </div>
3874        </div>
3875      </div>
3876    </div>
3877  </div>
3878</div>
3879
3880<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3881  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3882    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzA3MDE4LCJwdXIiOiJibG9iX2lkIn19--3164fe46eca07f41425f6b95b6fb62fb275d7bc9/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/kiliradio_logo_epk-colors.png" />
3883    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3884    <div class="absolute inset-0">
3885      <div class="flex flex-row justify-between items-center py-2 px-4">
3886        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3887          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3888            <div class="text-base text-white px-2 truncate">
3889              24.10 BELLINZONA
3890            </div>
3891          </div>
3892        </div>
3893      </div>
3894      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3895        <div class="flex flex-col">
3896          <div class="text-lg text-white truncate">
3897            <a data-turbo-frame="_top" class="card__target" href="/c/15lm">KILIRADIO</a>
3898          </div>
3899          <div class="text-sm text-white truncate">
3900            Adult Alternative Rock
3901          </div>
3902        </div>
3903      </div>
3904    </div>
3905  </div>
3906</div>
3907
3908<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3909  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3910    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4OTk3NiwicHVyIjoiYmxvYl9pZCJ9fQ==--b405a0e0e9166f3a8742d35d1d6bf5bd012b86b3/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls0MDAsNDAwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--7e6f7524c7ad63791f7f36a48bbf2298a2b59254/IMG_8577.jpeg" />
3911    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3912    <div class="absolute inset-0">
3913      <div class="flex flex-row justify-between items-center py-2 px-4">
3914        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3915          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3916            <div class="text-base text-white px-2 truncate">
3917              05.11 Lugano
3918            </div>
3919          </div>
3920        </div>
3921      </div>
3922      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3923        <div class="flex flex-col">
3924          <div class="text-lg text-white truncate">
3925            <a data-turbo-frame="_top" class="card__target" href="/c/15L5">Ian Genini</a>
3926          </div>
3927          <div class="text-sm text-white truncate">
3928            Il progetto Ian Genini si colloca nell’ambito dell’indie pop italiano, con forti radici cantautorali e un’apertura sonora che attraversa jazz, rock, punk, funk, musica elettronica e rock argentino.
3929          </div>
3930        </div>
3931      </div>
3932    </div>
3933  </div>
3934</div>
3935
3936<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3937  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3938    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU0NTE1OCwicHVyIjoiYmxvYl9pZCJ9fQ==--08a91dd42f51fa43d3888937f9e9e3abacb7c9ae/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/ALMA_logo_white.png" />
3939    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3940    <div class="absolute inset-0">
3941      <div class="flex flex-row justify-between items-center py-2 px-4">
3942        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3943          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3944            <div class="text-base text-white px-2 truncate">
3945              12.11 Bellinzona
3946            </div>
3947          </div>
3948        </div>
3949      </div>
3950      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3951        <div class="flex flex-col">
3952          <div class="text-lg text-white truncate">
3953            <a data-turbo-frame="_top" class="card__target" href="/c/15Ka">ALMA Acoustic</a>
3954          </div>
3955          <div class="text-sm text-white truncate">
3956            Pop
3957          </div>
3958        </div>
3959      </div>
3960    </div>
3961  </div>
3962</div>
3963
3964<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3965  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3966    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzA3MDE4LCJwdXIiOiJibG9iX2lkIn19--3164fe46eca07f41425f6b95b6fb62fb275d7bc9/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/kiliradio_logo_epk-colors.png" />
3967    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3968    <div class="absolute inset-0">
3969      <div class="flex flex-row justify-between items-center py-2 px-4">
3970        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3971          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
3972            <div class="text-base text-white px-2 truncate">
3973              13.11 LOCARNO
3974            </div>
3975          </div>
3976        </div>
3977      </div>
3978      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
3979        <div class="flex flex-col">
3980          <div class="text-lg text-white truncate">
3981            <a data-turbo-frame="_top" class="card__target" href="/c/15xL">KILIRADIO</a>
3982          </div>
3983          <div class="text-sm text-white truncate">
3984            Adult Alternative Rock
3985          </div>
3986        </div>
3987      </div>
3988    </div>
3989  </div>
3990</div>
3991
3992<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
3993  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
3994    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6Mjk5NzU0LCJwdXIiOiJibG9iX2lkIn19--a7aa987ea21b27aa044d74d4472e8a299e3fa247/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/tbm_facebook_profile.jpg" />
3995    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
3996    <div class="absolute inset-0">
3997      <div class="flex flex-row justify-between items-center py-2 px-4">
3998        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
3999          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
4000            <div class="text-base text-white px-2 truncate">
4001              21.11 Castel San Pietro
4002            </div>
4003          </div>
4004        </div>
4005      </div>
4006      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
4007        <div class="flex flex-col">
4008          <div class="text-lg text-white truncate">
4009            <a data-turbo-frame="_top" class="card__target" href="/c/15jr">The Black Monarchs &amp; The Missing Girl</a>
4010          </div>
4011          <div class="text-sm text-white truncate">
4012            Rock
4013          </div>
4014        </div>
4015      </div>
4016    </div>
4017  </div>
4018</div>
4019
4020<div class="snap-start flex-shrink-0 w-[180px] px-1 sm:px-2">
4021  <div class="card relative w-full h-64 rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg gap-4 overflow-hidden">
4022    <img class="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg" alt="" loading="lazy" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU4MTgwMywicHVyIjoiYmxvYl9pZCJ9fQ==--9163ae3adcbe6f4cb1a57e69c41bec3525d93c78/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/over1.jpg" />
4023    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-2xl"></div>
4024    <div class="absolute inset-0">
4025      <div class="flex flex-row justify-between items-center py-2 px-4">
4026        <div class="max-w-full flex flex-row items-center gap-4 mt-5 ">
4027          <div class="max-w-full flex flex-col bg-black bg-opacity-50 rounded-lg p-1">
4028            <div class="text-base text-white px-2 truncate">
4029              21.11 Bellinzona
4030            </div>
4031          </div>
4032        </div>
4033      </div>
4034      <div class="p-4 flex flex-col gap-4 mt-24 rounded-br-lg rounded-bl-lg">
4035        <div class="flex flex-col">
4036          <div class="text-lg text-white truncate">
4037            <a data-turbo-frame="_top" class="card__target" href="/c/14W7">_ overdrive _</a>
4038          </div>
4039          <div class="text-sm text-white truncate">
4040            Alternative rock
4041          </div>
4042        </div>
4043      </div>
4044    </div>
4045  </div>
4046</div>
4047
4048          <a class="mx-2 place-self-center h-12 relative inline-flex flex-row items-center justify-center py-3 px-4 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium bg-black hover:bg-primary-900 text-white dark:bg-white dark:hover:bg-primary-200 dark:text-primary-800 uppercase" href="/performances?performance_filter%5Bregion%5D=it">
4049  <span class="material-symbols-outlined">expand_circle_right</span>
4050  <span class="ml-2">more</span>
4051</a>
4052        </div>
4053    </div>
4054  </div>
4055</section>
4056
4057          <section>
4058  <div class="relative">
4059    <h2 class="text-lg text-gray-800 dark:text-gray-200 mb-5 pt-5 uppercase">
4060      Playlists Radios
4061    </h2>
4062  </div>
4063
4064  <div class="relative w-full overflow-hidden ml-1 sm:ml-2">
4065    <div class="flex snap-x-mandatory overflow-x-auto scrollbar-hide pb-6 gap-4">
4066        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4067  <!-- Visual grid -->
4068  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4069      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzIwMjg1LCJwdXIiOiJibG9iX2lkIn19--c503672305b6a511fc395332ed95cdd3138bcfd6/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/zola-cover.jpg" />
4070      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzI3NDAwLCJwdXIiOiJibG9iX2lkIn19--1a7fb140652d4926749320499dd82e8bc1b5dfe9/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/oscillation.png" />
4071      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6Mjg0MTEyLCJwdXIiOiJibG9iX2lkIn19--d64553b1359b07af9eadb0e6303fc1fcdb0ed663/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/lunacy-milune-cover.jpg" />
4072      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6Mjk1MzU5LCJwdXIiOiJibG9iX2lkIn19--0914973f7381ce8a2eb5919a02a58430bdf11515/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/hollow-cover.jpg" />
4073      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzA4ODk5LCJwdXIiOiJibG9iX2lkIn19--7096e3da30a685197d27821991dea491df6eda90/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/photo-2023-10-08-19-07-39.jpg" />
4074      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6Mjk2OTM1LCJwdXIiOiJibG9iX2lkIn19--af10a052ab21845babea6491a0a409dfeab314ed/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/whatsapp-image-2023-10-08-at-19.jpg" />
4075  </div>
4076
4077  <!-- Gradient layer -->
4078  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4079
4080  <!-- Date layer -->
4081  <div class="absolute flex flex-row items-center mt-5 ml-4">
4082    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4083      <span class="text-[14px] text-white">
4084        225 tracks
4085      </span>
4086    </div>
4087  </div>
4088
4089
4090  <!-- Title layer -->
4091  <div class="absolute inset-0 px-4">
4092    <div class="mt-[70px]">
4093      <div class="w-[100px] h-[100px]">
4094            <img loading="lazy" alt="" class="h-full object-cover rounded-lg playlist-item-pic" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzIwMjg0LCJwdXIiOiJibG9iX2lkIn19--f99a5a3504defe57c3a9fc960f6bb68c88a7978f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/sea-salt-cover-02.jpg" />
4095      </div>
4096      <div class="mt-4 flex flex-col">
4097        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4098          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/rlB">SRF3 selection</a>
4099        </div>
4100        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4101          by <a href="/radios/srf3">SRF3</a>
4102        </div>
4103      </div>
4104    </div>
4105  </div>
4106</div>
4107
4108        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4109  <!-- Visual grid -->
4110  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4111      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4NjgxMSwicHVyIjoiYmxvYl9pZCJ9fQ==--d7f1970fa9c6408fb0d9d6fb29269a3012040112/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls4MCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--fc1cad899cc5e215dde949d48e32f41fc2cfbec2/IMG_5701.jpeg" />
4112      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1NjI4MCwicHVyIjoiYmxvYl9pZCJ9fQ==--d42e74afaa1665697dbe58aa145978881933e4a4/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJQTkciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--48e82312c407dc637aa45bec89db679479d0999d/Untitled%20design%202.PNG" />
4113      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQyNzY3NSwicHVyIjoiYmxvYl9pZCJ9fQ==--31aee138750aad24c13526583f1d8f0723ce38f7/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/Weird_Kid_Artwork_4000x4000.jpg" />
4114      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTcxNzU3NiwicHVyIjoiYmxvYl9pZCJ9fQ==--c85892fda9113168a912637fa367e0cb6a509af1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls4MCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--fc1cad899cc5e215dde949d48e32f41fc2cfbec2/Queens%20Disco%20Ennis.jpeg" />
4115      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTcyMjk3MCwicHVyIjoiYmxvYl9pZCJ9fQ==--9d74f1dc40d26efa0fe82ea2f555eaaff1d9e5af/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/7EMA_NosNos_Cover_Lay6_01.jpg" />
4116      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTcxNTE1OSwicHVyIjoiYmxvYl9pZCJ9fQ==--bb9ee388b852791466fd0899404cbc78936ab71c/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/cover%20i%20like%20you%207.png" />
4117  </div>
4118
4119  <!-- Gradient layer -->
4120  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4121
4122  <!-- Date layer -->
4123  <div class="absolute flex flex-row items-center mt-5 ml-4">
4124    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4125      <span class="text-[14px] text-white">
4126        497 tracks
4127      </span>
4128    </div>
4129  </div>
4130
4131
4132  <!-- Title layer -->
4133  <div class="absolute inset-0 px-4">
4134    <div class="mt-[70px]">
4135      <div class="w-[100px] h-[100px]">
4136          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjA0Mzc3LCJwdXIiOiJibG9iX2lkIn19--ba419b5f4aff3b30638cccdcf63a94b0ae8f81c8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/c3_vignette_playlist.jpg" />
4137      </div>
4138      <div class="mt-4 flex flex-col">
4139        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4140          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1ar">RTS Couleur 3 selection</a>
4141        </div>
4142        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4143          by <a href="/radios/couleur3">RTS Couleur 3</a>
4144        </div>
4145      </div>
4146    </div>
4147  </div>
4148</div>
4149
4150        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4151  <!-- Visual grid -->
4152  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4153      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4OTI5NywicHVyIjoiYmxvYl9pZCJ9fQ==--b4733f3f66c89e3265acb91f68f9cd3983926802/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/Peter%20Kernel%20Heartbreak.jpg" />
4154      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc2Mzg4MiwicHVyIjoiYmxvYl9pZCJ9fQ==--419a557d5b1523bb354a7878149118576f95835b/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/bien-lejos_spotify.jpg" />
4155      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTYzNjMyMywicHVyIjoiYmxvYl9pZCJ9fQ==--41f8eafd4e34ab8ce7d45f1aa66d65964f4886ec/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/FRONT.png" />
4156      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjkxMTc2LCJwdXIiOiJibG9iX2lkIn19--f5a65b2c8796f559dd98434869d810253d00a434/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--13e678cba49093f15ca654a07792de7388668b44/miniatura-youtube-1-copy.jpg" />
4157      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjUwOTkwLCJwdXIiOiJibG9iX2lkIn19--f2de79cf82dcf7dc205aab8b085c34d2b7edde35/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/definitivo-colore-intero.jpg" />
4158      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjgxNjc3LCJwdXIiOiJibG9iX2lkIn19--96588e11e6140f7ce456ce7d18590492f20f785a/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/frame_0003.png" />
4159  </div>
4160
4161  <!-- Gradient layer -->
4162  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4163
4164  <!-- Date layer -->
4165  <div class="absolute flex flex-row items-center mt-5 ml-4">
4166    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4167      <span class="text-[14px] text-white">
4168        85 tracks
4169      </span>
4170    </div>
4171  </div>
4172
4173
4174  <!-- Title layer -->
4175  <div class="absolute inset-0 px-4">
4176    <div class="mt-[70px]">
4177      <div class="w-[100px] h-[100px]">
4178          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQ5MDkyLCJwdXIiOiJibG9iX2lkIn19--9889da01c961a12f7cc780f13cbc7350b226d520/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/hnpmys_z_400x400-1.jpg" />
4179      </div>
4180      <div class="mt-4 flex flex-col">
4181        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4182          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1201an">Rete Tre selection</a>
4183        </div>
4184        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4185          by <a href="/radios/retetre">Rete Tre</a>
4186        </div>
4187      </div>
4188    </div>
4189  </div>
4190</div>
4191
4192        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4193  <!-- Visual grid -->
4194  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4195      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjkwNTc4LCJwdXIiOiJibG9iX2lkIn19--18cebb337161c06a9d4ef7aed5305ceb951777f3/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/frame_0004.png" />
4196      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6Mjc4MjUyLCJwdXIiOiJibG9iX2lkIn19--7c4091ebd63cc73fe187717b976c40e545c39bef/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/tpr50-anikk-tgi-eis-ti.png" />
4197      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjUyNzEzLCJwdXIiOiJibG9iX2lkIn19--66ec66fd299d09eeb09420f7c60c1f8915fca916/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/frontcover_nusessanin.jpg" />
4198      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjI2OTQ2LCJwdXIiOiJibG9iX2lkIn19--3362d66574bda5dd1b9323512aec0bc15a886873/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/cover.jpg" />
4199      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjI1NzM1LCJwdXIiOiJibG9iX2lkIn19--2f59af2182a33241abc8dd076222d59c682ca71f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/artwork43.jpg" />
4200      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjEwNTk2LCJwdXIiOiJibG9iX2lkIn19--19a6a42a960b501924ba94e3b1e3b71f60ffd59b/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/holding-on-v02.jpg" />
4201  </div>
4202
4203  <!-- Gradient layer -->
4204  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4205
4206  <!-- Date layer -->
4207  <div class="absolute flex flex-row items-center mt-5 ml-4">
4208    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4209      <span class="text-[14px] text-white">
4210        17 tracks
4211      </span>
4212    </div>
4213  </div>
4214
4215
4216  <!-- Title layer -->
4217  <div class="absolute inset-0 px-4">
4218    <div class="mt-[70px]">
4219      <div class="w-[100px] h-[100px]">
4220            <img loading="lazy" alt="" class="h-full object-cover rounded-lg playlist-item-pic" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzEyNzQyLCJwdXIiOiJibG9iX2lkIn19--629a6b6db8439dd3b7b7086c505eaa47c52f554a/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/saultacunmei_q_vdef.jpg" />
4221      </div>
4222      <div class="mt-4 flex flex-col">
4223        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4224          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/2ev">RTR selection</a>
4225        </div>
4226        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4227          by <a href="/radios/rtr">RTR</a>
4228        </div>
4229      </div>
4230    </div>
4231  </div>
4232</div>
4233
4234        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4235  <!-- Visual grid -->
4236  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4237      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQzNjQ0LCJwdXIiOiJibG9iX2lkIn19--28bed5faea73ad04c466c56ac97aa470ded760f1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/shuttle_cover.png" />
4238      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQyNjUyLCJwdXIiOiJibG9iX2lkIn19--a741272360b71642b37d3b7f931d245dc06fb8f2/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/3.jpg" />
4239      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTM1NTQ2LCJwdXIiOiJibG9iX2lkIn19--e95d3a9d68e5eec64f9ec6a57511ecc5730c9d5a/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/bildschirmfoto-2018-01-28-um-15-28-51.png" />
4240      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQzODM2LCJwdXIiOiJibG9iX2lkIn19--cc02ffc0a3f84777a395e83df229ac3de8ac6f24/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/bildschirmfoto_blackseadahu_video.png" />
4241      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTE5NTk0LCJw
4241dXIiOiJibG9iX2lkIn19--3af7a9ed3a7291876c4921b87282adc07335d6fa/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/screen-shot-2017-04-21-at-09-55-28.png" />
4242      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTM0NzUwLCJwdXIiOiJibG9iX2lkIn19--f70eaa30be394a3dfef07e2e07c0a189fb21008b/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/dragon-blood.jpg" />
4243  </div>
4244
4245  <!-- Gradient layer -->
4246  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4247
4248  <!-- Date layer -->
4249  <div class="absolute flex flex-row items-center mt-5 ml-4">
4250    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4251      <span class="text-[14px] text-white">
4252        23 tracks
4253      </span>
4254    </div>
4255  </div>
4256
4257
4258  <!-- Title layer -->
4259  <div class="absolute inset-0 px-4">
4260    <div class="mt-[70px]">
4261      <div class="w-[100px] h-[100px]">
4262            <img loading="lazy" alt="" class="h-full object-cover rounded-lg playlist-item-pic" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQ2OTY3LCJwdXIiOiJibG9iX2lkIn19--ed3ac3a3f7f091d9da2c601c8ea098fb2ef243e1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg1NCw0ODBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--f7bfe7517e8d4f06b64a041dbaae0a885ad62f5d/frame_0004.png" />
4263      </div>
4264      <div class="mt-4 flex flex-col">
4265        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4266          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/nKd">SRF Virus selection</a>
4267        </div>
4268        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4269          by <a href="/radios/srfvirus">SRF Virus</a>
4270        </div>
4271      </div>
4272    </div>
4273  </div>
4274</div>
4275
4276    </div>
4277  </div>
4278</section>
4279
4280          <section>
4281  <div class="relative">
4282    <h2 class="text-lg text-gray-800 dark:text-gray-200 mb-5 pt-5 uppercase">
4283      Other radio selections
4284    </h2>
4285  </div>
4286
4287  <div class="relative w-full overflow-hidden ml-1 sm:ml-2">
4288    <div class="flex snap-x-mandatory overflow-x-auto scrollbar-hide pb-6 gap-4">
4289        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4290  <!-- Visual grid -->
4291  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4292      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjkzMTczLCJwdXIiOiJibG9iX2lkIn19--25faa7b436b7d7171dd76a11116c80d2aebc6981/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/pdp-algorythme-cover-carre-3000x3000.jpg" />
4293      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzI5NjQ1LCJwdXIiOiJibG9iX2lkIn19--003b69b8c5be8517bfd4f185f90a6fce465ea386/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/sauvage-cover.jpg" />
4294      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzMwMzg1LCJwdXIiOiJibG9iX2lkIn19--1b07794b6e5191612bb81d951c251e41f124ff97/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/saintstacy_feellikemyself_artwork.jpg" />
4295      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzQwMzMxLCJwdXIiOiJibG9iX2lkIn19--190a461db8a724ab1437b387a26c64d94242ad59/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls4MCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--fc1cad899cc5e215dde949d48e32f41f
4295c2cfbec2/single-artwork-slot-machine-vf.jpeg" />
4296      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTY0Nzk1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--2475131aaaa22c157e5a0567e9670a5c982c5a44/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/Meimuna_c&#39;est%20demain%20que%20je%20meurs_Albumartworkcover.jpg" />
4297      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzQzNDExLCJwdXIiOiJibG9iX2lkIn19--3c5d80edd8df452cd336465b9e914812c170ff39/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/bnfo20.jpg" />
4298  </div>
4299
4300  <!-- Gradient layer -->
4301  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4302
4303  <!-- Date layer -->
4304  <div class="absolute flex flex-row items-center mt-5 ml-4">
4305    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4306      <span class="text-[14px] text-white">
4307        167 tracks
4308      </span>
4309    </div>
4310  </div>
4311
4312
4313  <!-- Title layer -->
4314  <div class="absolute inset-0 px-4">
4315    <div class="mt-[70px]">
4316      <div class="w-[100px] h-[100px]">
4317          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTIyNjIzLCJwdXIiOiJibG9iX2lkIn19--e368778f19646cedad7820f414b9d7a56e68db01/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/logo_lapremiere2017ok.png" />
4318      </div>
4319      <div class="mt-4 flex flex-col">
4320        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4321          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1200EP">Sélection La 1ère</a>
4322        </div>
4323        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4324          by <a href="/radios/lapremiere">RTS Première</a>
4325        </div>
4326      </div>
4327    </div>
4328  </div>
4329</div>
4330
4331        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4332  <!-- Visual grid -->
4333  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4334      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc5MzM3MSwicHVyIjoiYmxvYl9pZCJ9fQ==--47dc8e48e1f6149c3753a4a48158ac2a1edf97e0/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/TD_Projet_macaronA_web3.jpg" />
4335      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc5ODkzNCwicHVyIjoiYmxvYl9pZCJ9fQ==--8cbbe8671107d54f43a1673eb5fc42c3c1252a75/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/Cover_FuckingItUpV2.png" />
4336      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgwNDE0MCwicHVyIjoiYmxvYl9pZCJ9fQ==--fa968c606a9d1ac7815107e39b30a794d4b6ac90/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/COVER%20CUTE%20SONG%20single.jpg" />
4337      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc5MjM5OCwicHVyIjoiYmxvYl9pZCJ9fQ==--7111a5234d3f0535b87353879c762948d789d404/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/Francois-Ve-Le-slow.jpg" />
4338      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1MzAxMywicHVyIjoiYmxvYl9pZCJ9fQ==--706e146187671a2f991a0782ec0c4d6a477a5f0c/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/naveni-malavika-emotional-wreck%20(1).jpg" />
4339      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTYzMDQwMywicHVyIjoiYmxvYl9pZCJ9fQ==--52e45bebf7a6afee547261c81ef746d31f3b5abc
4339/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/art%20cover%20another%20one%20.png" />
4340  </div>
4341
4342  <!-- Gradient layer -->
4343  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4344
4345  <!-- Date layer -->
4346  <div class="absolute flex flex-row items-center mt-5 ml-4">
4347    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4348      <span class="text-[14px] text-white">
4349        41 tracks
4350      </span>
4351    </div>
4352  </div>
4353
4354
4355  <!-- Title layer -->
4356  <div class="absolute inset-0 px-4">
4357    <div class="mt-[70px]">
4358      <div class="w-[100px] h-[100px]">
4359          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTIyNzIwLCJwdXIiOiJibG9iX2lkIn19--47cad0b992a091b11425f4d58beea34956cc80c3/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/logo200-option-musique-2017.jpg" />
4360      </div>
4361      <div class="mt-4 flex flex-col">
4362        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4363          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1200F0">La sélection d&#39;Option</a>
4364        </div>
4365        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4366          by <a href="/radios/optionmusique">RTS Option Musique</a>
4367        </div>
4368      </div>
4369    </div>
4370  </div>
4371</div>
4372
4373        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4374  <!-- Visual grid -->
4375  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4376      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6Nzc0ODYwLCJwdXIiOiJibG9iX2lkIn19--741d4fee8f25f821193efc2c1100c58f2177dbb8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/PaperThinCover.jpg" />
4377      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTA1Mzc0MCwicHVyIjoiYmxvYl9pZCJ9fQ==--3883e4e17f80d01bad7426e1e062733708584991/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/cover_final_SH-08.png" />
4378      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTM3MzU4MiwicHVyIjoiYmxvYl9pZCJ9fQ==--1eb444f858da3c4b369bd398322783bbf3120aff/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/CAUGHT%20IN%20THE%20RAIN%20cover.png" />
4379      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQzNDc4NCwicHVyIjoiYmxvYl9pZCJ9fQ==--5226b2a039ab791a39abb54a2035a6219c7e2c39/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJKUEciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--416e600a58b54a72dcc6b3e2cdd63433d211f7a4/Of_Light_and_Heaviness_Cover.JPG" />
4380      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQ3Mjc2OCwicHVyIjoiYmxvYl9pZCJ9fQ==--9416e7bd388637ada177a42f257581d119bb2617/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/Cover_Come-Around-3000x3000%202.jpg" />
4381      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTM3OTgxNSwicHVyIjoiYmxvYl9pZCJ9fQ==--d3768fd4d0f3ab4bed9eb37773abeda5a03e2957/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls4MCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--fc1cad899cc5e215dde949d48e32f41f
4381c2cfbec2/_NRNT-artwork_VF.jpeg" />
4382  </div>
4383
4384  <!-- Gradient layer -->
4385  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4386
4387  <!-- Date layer -->
4388  <div class="absolute flex flex-row items-center mt-5 ml-4">
4389    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4390      <span class="text-[14px] text-white">
4391        67 tracks
4392      </span>
4393    </div>
4394  </div>
4395
4396
4397  <!-- Title layer -->
4398  <div class="absolute inset-0 px-4">
4399    <div class="mt-[70px]">
4400      <div class="w-[100px] h-[100px]">
4401          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTMyOTg2LCJwdXIiOiJibG9iX2lkIn19--66a04c5319cfe3d9d754ad8d02b638e3c823aa86/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/c175.png" />
4402      </div>
4403      <div class="mt-4 flex flex-col">
4404        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4405          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1200Ob">Selezione RETE UNO</a>
4406        </div>
4407        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4408          by <a href="/radios/reteuno">RETE UNO</a>
4409        </div>
4410      </div>
4411    </div>
4412  </div>
4413</div>
4414
4415        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4416  <!-- Visual grid -->
4417  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4418      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzMwNTM0LCJwdXIiOiJibG9iX2lkIn19--9d04d64bfd4a5867af3bbc400cd2dae62dc32430/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/julie-meletta-que-des-vibes-glue-valley-rmx-_coverart_corr.jpg" />
4419      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzE5OTk4LCJwdXIiOiJibG9iX2lkIn19--e51b603ce221208d08a0fc42beb39be23babfc32/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/cover_1200.jpg" />
4420      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzE5MzE5LCJwdXIiOiJibG9iX2lkIn19--8ec58e8805e217895476af260bfaf4ccf7fe874e/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/lovesong_cover-kopie.jpg" />
4421      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzE0MDE5LCJwdXIiOiJibG9iX2lkIn19--9ec382d97b3fcb0abc7faaad486bf55c1b4cdbe4/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/3_fendoi_brighternow_cover_1zu1_ohnegrafik-komprimiert.png" />
4422      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzAwMzgyLCJwdXIiOiJibG9iX2lkIn19--b663d80a4fe9f253e6cd0cad6a7dc486883c0799/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/going-under-cover.jpg" />
4423      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzE1MDQwLCJwdXIiOiJibG9iX2lkIn19--7f65e1409a25431e6dac2dae3ed719785b24a991/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls4MCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--fc1cad899cc5e215dde949d48e32f41f
4423c2cfbec2/love.jpeg" />
4424  </div>
4425
4426  <!-- Gradient layer -->
4427  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4428
4429  <!-- Date layer -->
4430  <div class="absolute flex flex-row items-center mt-5 ml-4">
4431    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4432      <span class="text-[14px] text-white">
4433        65 tracks
4434      </span>
4435    </div>
4436  </div>
4437
4438
4439  <!-- Title layer -->
4440  <div class="absolute inset-0 px-4">
4441    <div class="mt-[70px]">
4442      <div class="w-[100px] h-[100px]">
4443          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjYwMDY2LCJwdXIiOiJibG9iX2lkIn19--9d806145dad53ba464de94f6527b5d274c896744/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/favicon.png" />
4444      </div>
4445      <div class="mt-4 flex flex-col">
4446        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4447          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1203jY">Radio4TNG-Selektion</a>
4448        </div>
4449        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4450          by <a href="/radios/radio4tng">Radio 4 TNG</a>
4451        </div>
4452      </div>
4453    </div>
4454  </div>
4455</div>
4456
4457        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4458  <!-- Visual grid -->
4459  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4460      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc3NzI4MSwicHVyIjoiYmxvYl9pZCJ9fQ==--4ae166dca4538c930e2d9e553f2a93747c8e6e9e/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/Neuling_Cover_Final.jpg" />
4461      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU2MzI1NCwicHVyIjoiYmxvYl9pZCJ9fQ==--2a5c18f8c942357d166224d220b3ee7ed26bfc4d/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/Cover%20The%20Killer%202.0.png" />
4462      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc3NjI5OCwicHVyIjoiYmxvYl9pZCJ9fQ==--fc44f38c0617d8e1fc2f44d30d460aecd769c172/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJKUEciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--416e600a58b54a72dcc6b3e2cdd63433d211f7a4/IMG_2396.JPG" />
4463      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjM5MjM5LCJwdXIiOiJibG9iX2lkIn19--241e3f01d1cf268ea9731415cd9f1ab27e88a602/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/belle-affaire-frontcover-huit-heures-du-matin.jpg" />
4464      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc3OTgwNCwicHVyIjoiYmxvYl9pZCJ9fQ==--4ef8a6ee5ae074146fb8f2879e3affd5a6e3ac6f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJQTkciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--48e82312c407dc637aa45bec89db679479d0999d/50549EB6-AB3A-40B1-9107-8D3C7FD75C40.PNG" />
4465      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTcwNTYyOCwicHVyIjoiYmxvYl9pZCJ9fQ==--184b5da20e1883f33d8585c7d743c2a6a8ddf730/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/CD-Cover%20Interesting%20Times.jpg" />
4466  </div>
4467
4468  <!-- Gradient layer -->
4469  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4470
4471  <!-- Date layer -->
4472  <div class="absolute flex flex-row items-center mt-5 ml-4">
4473    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4474      <span class="text-[14px] text-white">
4475        51 tracks
4476      </span>
4477    </div>
4478  </div>
4479
4480
4481  <!-- Title layer -->
4482  <div class="absolute inset-0 px-4">
4483    <div class="mt-[70px]">
4484      <div class="w-[100px] h-[100px]">
4485          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1OTY2NSwicHVyIjoiYmxvYl9pZCJ9fQ==--40388a578a2fae6b481240eee7e4a6897842edfa/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/Vignettes%20Aou%CC%82t.jpg" />
4486      </div>
4487      <div class="mt-4 flex flex-col">
4488        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4489          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1206ch">Août 2026</a>
4490        </div>
4491        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4492          by <a href="/radios/radiorocher">Radio Rocher</a>
4493        </div>
4494      </div>
4495    </div>
4496  </div>
4497</div>
4498
4499        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4500  <!-- Visual grid -->
4501  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4502      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU0NzEyMSwicHVyIjoiYmxvYl9pZCJ9fQ==--2b452abaaa82a7612ce46b553f3af7fb32e6918e/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/J.NUNN_GREENLAND_20250908_master.png" />
4503      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTIxMzU5MiwicHVyIjoiYmxvYl9pZCJ9fQ==--b3ec32dcd8f165ac2be7ff89f5118407fad95321/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/cover-3000x3000.jpg" />
4504      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTYxMDQwMiwicHVyIjoiYmxvYl9pZCJ9fQ==--24a24cc0a96ff5adcfff0aeaf59d21901988cff6/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/2025_04_26_Lua_Tanzhaus__MIK5673.jpg" />
4505      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTY1NjI2OSwicHVyIjoiYmxvYl9pZCJ9fQ==--47a979f3fba13bc13bd28464696a0dba59954498/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/real%20raw%20music%20.%20(12)_page-0001.jpg" />
4506      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjM4NTgxLCJw
4506dXIiOiJibG9iX2lkIn19--aff8044d860f727d1cb8cd2340a6e8a94bfcb4fe/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/e-a-rueger-11.jpg" />
4507      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTYwOTQ3NSwicHVyIjoiYmxvYl9pZCJ9fQ==--5f5cbb75092742c34bd36f5eabeedd8e797ae4a6/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/ID14.png" />
4508  </div>
4509
4510  <!-- Gradient layer -->
4511  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4512
4513  <!-- Date layer -->
4514  <div class="absolute flex flex-row items-center mt-5 ml-4">
4515    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4516      <span class="text-[14px] text-white">
4517        26 tracks
4518      </span>
4519    </div>
4520  </div>
4521
4522
4523  <!-- Title layer -->
4524  <div class="absolute inset-0 px-4">
4525    <div class="mt-[70px]">
4526      <div class="w-[100px] h-[100px]">
4527          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTY4NzE4OSwicHVyIjoiYmxvYl9pZCJ9fQ==--5889e8489162cbc81c7434a313790a60f1a01de1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/2026_K-Tracks-NEW%20ENTRIES-1zu1.jpg" />
4528      </div>
4529      <div class="mt-4 flex flex-col">
4530        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4531          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1205Yx">Demotape Clinic 2026 x Kanal K</a>
4532        </div>
4533        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4534          by <a href="/radios/kanalk">Kanal K</a>
4535        </div>
4536      </div>
4537    </div>
4538  </div>
4539</div>
4540
4541    </div>
4542  </div>
4543</section>
4544
4545          <section>
4546  <div class="relative">
4547    <h2 class="text-lg text-gray-800 dark:text-gray-200 mb-5 pt-5 uppercase">
4548      20 years of mx3
4549    </h2>
4550  </div>
4551
4552  <div class="relative w-full overflow-hidden ml-1 sm:ml-2">
4553    <div class="flex snap-x-mandatory overflow-x-auto scrollbar-hide pb-6 gap-4">
4554        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4555  <!-- Visual grid -->
4556  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4557      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NjkwOTAsInB1ciI6ImJsb2JfaWQifX0=--2a8ece8ba074c28338341c57e19c5d3afedf8218/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/dance2.jpg" />
4558      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjAwOTg5LCJwdXIiOiJibG9iX2lkIn19--a95dd6e1dc7140ff0fdeccd8328a916befb8e53c/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/final_blue.jpg" />
4559      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTM4MjU3LCJwdXIiOiJibG9iX2lkIn19--62df085547109513ee83024cdf2e3c8304d0648b/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/nobody-single-cover-final.jpg" />
4560      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjM0NDE3LCJwdXIiOiJibG9iX2lkIn19--65406dbdf0f44112d0650cf37d956ad509631bef/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/smaller-file-artwork.png" />
4561      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6Mjk2OTM1LCJwdXIiOiJibG9iX2lkIn19--af10a052ab21845babea6491a0a409dfeab314ed/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/whatsapp-image-2023-10-08-at-19.jpg" />
4562      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjYyNDIsInB1ciI6ImJsb2JfaWQifX0=--6b41f840da7319ed0bf3f642dfbdcdfd063e1226/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/cover_annabelle_600x600.jpg" />
4563  </div>
4564
4565  <!-- Gradient layer -->
4566  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4567
4568  <!-- Date layer -->
4569  <div class="absolute flex flex-row items-center mt-5 ml-4">
4570    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4571      <span class="text-[14px] text-white">
4572        15 tracks
4573      </span>
4574    </div>
4575  </div>
4576
4577
4578  <!-- Title layer -->
4579  <div class="absolute inset-0 px-4">
4580    <div class="mt-[70px]">
4581      <div class="w-[100px] h-[100px]">
4582          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4Mjk5NywicHVyIjoiYmxvYl9pZCJ9fQ==--268ff2e0e0429aeb7d0e54764fc91f3b2d56c378/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/20_mx3_2.jpg" />
4583      </div>
4584      <div class="mt-4 flex flex-col">
4585        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4586          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1206gB">20 Jahre mx3</a>
4587        </div>
4588        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4589          by <a href="/radios/srf3">SRF3</a>
4590        </div>
4591      </div>
4592    </div>
4593  </div>
4594</div>
4595
4596        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4597  <!-- Visual grid -->
4598  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4599      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjA2MzQsInB1ciI6ImJsb2JfaWQifX0=--5f8b95d6f9a410b96cc638bd71a352dafda3d8dc/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/swinger_pt.jpg" />
4600      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTAyMjksInB1ciI6ImJsb2JfaWQifX0=--df491de05411157808239ae260ac3ab499aaa9a1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/favezbigger.jpg" />
4601      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NjI0LCJwdXIiOiJibG9iX2lkIn19--d52bc1290b024f46df5747f47fe558bd9d8ee3f8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/human__booklet.jpg" />
4602      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTYyNjYsInB1ciI6ImJsb2JfaWQifX0=--fbabc5b630a122010af474f429141afc0299a562/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/hunger_monday.jpg" />
4603      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTkzNjYsInB1ciI6ImJsb2JfaWQifX0=--d5c1ffcc72a1da43641784b48096c0506048904d/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/crystallized.jpg" />
4604      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NDM5NTgsInB1ciI6ImJsb2JfaWQifX0=--ed829d9c888da4c3bce650099007c4e8f54f3dc0/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/THE_GREAT_BIG_HEAVY_1400x1400.jpg" />
4605  </div>
4606
4607  <!-- Gradient layer -->
4608  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4609
4610  <!-- Date layer -->
4611  <div class="absolute flex flex-row items-center mt-5 ml-4">
4612    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4613      <span class="text-[14px] text-white">
4614        27 tracks
4615      </span>
4616    </div>
4617  </div>
4618
4619
4620  <!-- Title layer -->
4621  <div class="absolute inset-0 px-4">
4622    <div class="mt-[70px]">
4623      <div class="w-[100px] h-[100px]">
4624          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4NzIwNywicHVyIjoiYmxvYl9pZCJ9fQ==--8bedd8fcbf14522e7f1db22154d3b7897e9f5da3/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/20_mx3_2.jpg" />
4625      </div>
4626      <div class="mt-4 flex flex-col">
4627        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4628          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1206hA">20 ans d&#39;mx3</a>
4629        </div>
4630        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4631          by <a href="/radios/couleur3">RTS Couleur 3</a>
4632        </div>
4633      </div>
4634    </div>
4635  </div>
4636</div>
4637
4638        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4639  <!-- Visual grid -->
4640  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4641      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6ODg5NiwicHVyIjoiYmxvYl9pZCJ9fQ==--44ca24736e845d5f6b9532863adf0942a157c61c/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/copertina-web.jpg" />
4642      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjE4NywicHVyIjoiYmxvYl9pZCJ9fQ==--9fc2662aa3de12f77c980e3cee3bac7afad82390/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/specchietto.jpg" />
4643      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6OTgyNTMsInB1ciI6ImJsb2JfaWQifX0=--be9d5d109e870352b5af6a2cc5ed30bfe85973f1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/frame_0002.png" />
4644      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTE0MjQsInB1ciI6ImJsb2JfaWQifX0=--550b3cd824501496241a182fca90c40be2479c26/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/pillowtalk_disco.jpg" />
4645      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NTA1MzcsInB1ciI6ImJsb2JfaWQifX0=--28a5092740d0567c81ddfb2c161be25d897f2248/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/spinning1.jpg" />
4646      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjUxNTU5LCJwdXIiOiJibG9iX2lkIn19--67826522520e40e1e8fab88d84093c7d6644a19f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/220422-tatum-rush-cover-scansioni0227-copia.jpg" />
4647  </div>
4648
4649  <!-- Gradient layer -->
4650  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4651
4652  <!-- Date layer -->
4653  <div class="absolute flex flex-row items-center mt-5 ml-4">
4654    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4655      <span class="text-[14px] text-white">
4656        24 tracks
4657      </span>
4658    </div>
4659  </div>
4660
4661
4662  <!-- Title layer -->
4663  <div class="absolute inset-0 px-4">
4664    <div class="mt-[70px]">
4665      <div class="w-[100px] h-[100px]">
4666          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4Mjk4NiwicHVyIjoiYmxvYl9pZCJ9fQ==--5303bf915c4170b1fdc8e91f5d6d03c70e899ab9/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/20_mx3_2.jpg" />
4667      </div>
4668      <div class="mt-4 flex flex-col">
4669        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4670          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1206gA">20 anni di mx3</a>
4671        </div>
4672        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4673          by <a href="/radios/retetre">Rete Tre</a>
4674        </div>
4675      </div>
4676    </div>
4677  </div>
4678</div>
4679
4680        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4681  <!-- Visual grid -->
4682  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4683      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzM0NDU2LCJwdXIiOiJibG9iX2lkIn19--a6785eefda4642677ed69840a6c1353e0b662abf/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/toppoprumantsch_51_ladunna.jpg" />
4684      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTUxMjk1LCJwdXIiOiJibG9iX2lkIn19--3eafb26b2bf9dd0ab4483fa23c65eb079ac8bffb/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/frame_0004.png" />
4685      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTMyODc2NSwicHVyIjoiYmxvYl9pZCJ9fQ==--3a2e0f9760ea774121e9b95279bd4172646a1021/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/Group%2052.jpg" />
4686      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTk5LCJwdXIiOiJibG9iX2lkIn19--0add712b10f81810bec54186d64975bfe2ce0dbf/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/Liricas_Analas_2.jpg" />
4687      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NDY2ODYsInB1ciI6ImJsb2JfaWQifX0=--006f5fb34790eff0994ba9811d92cf5de8dbc2cf/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/P1060798.jpg" />
4688      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjE5MjE4LCJwdXIiOiJibG9iX2lkIn19--9b05039762212313f79d3d0e51ebe7b80dde623a/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/digital_4000x4000px_ursina.jpg" />
4689  </div>
4690
4691  <!-- Gradient layer -->
4692  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4693
4694  <!-- Date layer -->
4695  <div class="absolute flex flex-row items-center mt-5 ml-4">
4696    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4697      <span class="text-[14px] text-white">
4698        19 tracks
4699      </span>
4700    </div>
4701  </div>
4702
4703
4704  <!-- Title layer -->
4705  <div class="absolute inset-0 px-4">
4706    <div class="mt-[70px]">
4707      <div class="w-[100px] h-[100px]">
4708          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4NTg5MiwicHVyIjoiYmxvYl9pZCJ9fQ==--a77becf4818ad7581e958a2bb2ac41eeb32627d2/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/20_mx3_2.jpg" />
4709      </div>
4710      <div class="mt-4 flex flex-col">
4711        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4712          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1206hj">20 onns mx3</a>
4713        </div>
4714        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4715          by <a href="/radios/rtr">RTR</a>
4716        </div>
4717      </div>
4718    </div>
4719  </div>
4720</div>
4721
4722        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4723  <!-- Visual grid -->
4724  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4725      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTI0OTQ2NiwicHVyIjoiYmxvYl9pZCJ9fQ==--38a58b467ea0d2d06f3654ceb464db2290cf0f7c/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/cover_Noir&amp;Gerber_Partout-Partout.jpg" />
4726      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NzYxMDQ5LCJwdXIiOiJibG9iX2lkIn19--73f147621b05cc31fb79006f5006ac18aaef0994/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/BB_LES%20SILENCES_artwork2.jpg" />
4727      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzA3ODY3LCJwdXIiOiJibG9iX2lkIn19--f81f07ed54b1cdb161d0652c5a56c381a0af72d6/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/milla-image-13.jpg" />
4728      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjkxMTA1LCJwdXIiOiJibG9iX2lkIn19--fc34167733fad789612fcb4246b5d0758c72dbc8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/frame_0004.png" />
4729      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6Mjg1MTE3LCJwdXIiOiJibG9iX2lkIn19--b9e71bc8785ddad7b5904a2cc8967d5e660bed2d/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/3-petits-points.jpg" />
4730      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU5ODEyLCJwdXIiOiJibG9iX2lkIn19--3404311be087bd2bf83a713540956e336a144ea8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/djf-photo-youtube-red.jpg" />
4731  </div>
4732
4733  <!-- Gradient layer -->
4734  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4735
4736  <!-- Date layer -->
4737  <div class="absolute flex flex-row items-center mt-5 ml-4">
4738    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4739      <span class="text-[14px] text-white">
4740        20 tracks
4741      </span>
4742    </div>
4743  </div>
4744
4745
4746  <!-- Title layer -->
4747  <div class="absolute inset-0 px-4">
4748    <div class="mt-[70px]">
4749      <div class="w-[100px] h-[100px]">
4750          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4MzAxMCwicHVyIjoiYmxvYl9pZCJ9fQ==--40b29990badffa342d25c99341d3423c343e1c36/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/20_mx3_2.jpg" />
4751      </div>
4752      <div class="mt-4 flex flex-col">
4753        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4754          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1206gD">20 ans d&#39;mx3</a>
4755        </div>
4756        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4757          by <a href="/radios/lapremiere">RTS Première</a>
4758        </div>
4759      </div>
4760    </div>
4761  </div>
4762</div>
4763
4764        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4765  <!-- Visual grid -->
4766  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4767      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6Mzc0MjgsInB1ciI6ImJsb2JfaWQifX0=--a9ae97d3bf37cee3b397c683d21d688fb1ec8d89/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/gael_ponywhite_2.jpg" />
4768      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6OTEwODIsInB1ciI6ImJsb2JfaWQifX0=--fd35e496dbe8b38ad7c30e0951855cb95f61e63f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/151107_ep_cover.jpg" />
4769      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTE4MzQzLCJwdXIiOiJibG9iX2lkIn19--d4721c2a4a62d4575aa30a3ad9e693e6efa418d2/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/miniature.jpg" />
4770      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTEyODI4LCJwdXIiOiJibG9iX2lkIn19--8fe7374e9f25f8a77bd4a7f5c215ab5c26f1a8aa/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/pdp_2.jpg" />
4771      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTkwODcsInB1ciI6ImJsb2JfaWQifX0=--fac88702358aae74bc3d3e74252aa76aa0a988cf/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/l_aad47c9889a74665b1eae353be1f9b44.jpg" />
4772      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc2MzEyLCJwdXIiOiJibG9iX2lkIn19--00be16bf3fe00837bb85248eebec334bd6500bf6/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/frame_0004.png" />
4773  </div>
4774
4775  <!-- Gradient layer -->
4776  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4777
4778  <!-- Date layer -->
4779  <div class="absolute flex flex-row items-center mt-5 ml-4">
4780    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4781      <span class="text-[14px] text-white">
4782        10 tracks
4783      </span>
4784    </div>
4785  </div>
4786
4787
4788  <!-- Title layer -->
4789  <div class="absolute inset-0 px-4">
4790    <div class="mt-[70px]">
4791      <div class="w-[100px] h-[100px]">
4792          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4MzAyNywicHVyIjoiYmxvYl9pZCJ9fQ==--5fbdc2afccba1f8940d8c3d8babd2bbd593e5ba5/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/20_mx3_2.jpg" />
4793      </div>
4794      <div class="mt-4 flex flex-col">
4795        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4796          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1206gE">20 ans d&#39;mx3</a>
4797        </div>
4798        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4799          by <a href="/radios/optionmusique">RTS Option Musique</a>
4800        </div>
4801      </div>
4802    </div>
4803  </div>
4804</div>
4805
4806    </div>
4807  </div>
4808</section>
4809
4810          <section>
4811  <div class="relative">
4812    <h2 class="text-lg text-gray-800 dark:text-gray-200 mb-5 pt-5 uppercase">
4813      Hand-picked Playlists
4814    </h2>
4815  </div>
4816
4817  <div class="relative w-full overflow-hidden ml-1 sm:ml-2">
4818    <div class="flex snap-x-mandatory overflow-x-auto scrollbar-hide pb-6 gap-4">
4819        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4820  <!-- Visual grid -->
4821  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4822      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6Mjg1NjQ1LCJwdXIiOiJibG9iX2lkIn19--9e9f972a0271ff1b08799219d5f3b9c2c453ebbb/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/img_8617-2.jpg" />
4823      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjQ3MDg4LCJwdXIiOiJibG9iX2lkIn19--03a52bcaeb53faa82738470e99807f13eeb425f5/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/caroline-alves_kerosene_rgb_1500px.jpg" />
4824      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjU1MTYxLCJwdXIiOiJibG9iX2lkIn19--2296c0bba284ec1c49b8362ea687bb3ad798d7bc/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls4MCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--fc1cad899cc5e215dde949d48e32f41fc2cfbec2/pochette_ysittto_finale_digitale.jpeg" />
4825      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjQ0NTgyLCJwdXIiOiJibG9iX2lkIn19--4de0491b7dc814974e8af7dd3aff80d1da7de1d8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/secret.jpg" />
4826      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjMxNTYzLCJwdXIiOiJibG9iX2lkIn19--186e0ba77927715b0cf09997968935c02f7f145e/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/mount-yeast_sidea_2-1.jpg" />
4827      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTg0MzE1LCJw
4827dXIiOiJibG9iX2lkIn19--e777b24862ba30cbdae6eeaf53e8f88e12f00f81/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/04042019-session-studio-giulia-312-copy.jpg" />
4828  </div>
4829
4830  <!-- Gradient layer -->
4831  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4832
4833  <!-- Date layer -->
4834  <div class="absolute flex flex-row items-center mt-5 ml-4">
4835    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4836      <span class="text-[14px] text-white">
4837        100 tracks
4838      </span>
4839    </div>
4840  </div>
4841
4842
4843  <!-- Title layer -->
4844  <div class="absolute inset-0 px-4">
4845    <div class="mt-[70px]">
4846      <div class="w-[100px] h-[100px]">
4847            <img loading="lazy" alt="" class="h-full object-cover rounded-lg playlist-item-pic" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTMwODAwLCJwdXIiOiJibG9iX2lkIn19--d5378c2d64ff07cccbcb0738e017e141de57bf2a/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/ego_cover_1440x1440_56.jpg" />
4848      </div>
4849      <div class="mt-4 flex flex-col">
4850        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4851          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1206i8">TOP 100 most played ON AIR SONGS since 2006</a>
4852        </div>
4853        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4854          by <a href="/mx3">mx3</a>
4855        </div>
4856      </div>
4857    </div>
4858  </div>
4859</div>
4860
4861        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4862  <!-- Visual grid -->
4863  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4864      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTk0NjU4LCJwdXIiOiJibG9iX2lkIn19--87f5eaec2e61f8753145a4e96b84f8388677a481/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/joyamarleen_nightmare_cover.jpg" />
4865      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzI3MzEsInB1ciI6ImJsb2JfaWQifX0=--0571d4171c9b43a1c422d887323bbd8cc70d8de8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/cover_77bombaystreet.jpg" />
4866      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjE4NzgyLCJwdXIiOiJibG9iX2lkIn19--48b3786a1024c0c428c8900b7ca016303bb98d6b/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/joya-marleen_driver-und-ep-covers-3000x3000.jpg" />
4867      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NDk1ODUsInB1ciI6ImJsb2JfaWQifX0=--1210bdea247c57ef25ffb9d14456f2404c24308f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/JG_Cover_Itunes.jpg" />
4868      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NzY2NzMsInB1ciI6ImJsb2JfaWQifX0=--ebf18e
4868c3a647836de4e13ae4acbf7596e8916457/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/IMG_1633anschnitt.jpg" />
4869      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTczMjA2LCJwdXIiOiJibG9iX2lkIn19--89a1d32cf5f44892a5d634beb9cf5c766162d441/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/333-rollercoaster-cover_neu.jpg" />
4870  </div>
4871
4872  <!-- Gradient layer -->
4873  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4874
4875  <!-- Date layer -->
4876  <div class="absolute flex flex-row items-center mt-5 ml-4">
4877    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4878      <span class="text-[14px] text-white">
4879        155 tracks
4880      </span>
4881    </div>
4882  </div>
4883
4884
4885  <!-- Title layer -->
4886  <div class="absolute inset-0 px-4">
4887    <div class="mt-[70px]">
4888      <div class="w-[100px] h-[100px]">
4889            <img loading="lazy" alt="" class="h-full object-cover rounded-lg playlist-item-pic" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTcxNzkwNywicHVyIjoiYmxvYl9pZCJ9fQ==--cfd20d0fe1de3633e7ff821837b93820ab8d1811/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/Damage_def.jpg" />
4890      </div>
4891      <div class="mt-4 flex flex-col">
4892        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4893          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1206hX">Consensus Songs</a>
4894        </div>
4895        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4896          by <a href="/mx3">mx3</a>
4897        </div>
4898      </div>
4899    </div>
4900  </div>
4901</div>
4902
4903        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4904  <!-- Visual grid -->
4905  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4906      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQyNzY3NSwicHVyIjoiYmxvYl9pZCJ9fQ==--31aee138750aad24c13526583f1d8f0723ce38f7/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/Weird_Kid_Artwork_4000x4000.jpg" />
4907      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTM5Mzg4NSwicHVyIjoiYmxvYl9pZCJ9fQ==--0ac966fcca4781e5fdfbbe8363fd4e3960716852/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/Artwork_%20Something%20New_klein.jpg" />
4908      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTM3OTgxNSwicHVyIjoiYmxvYl9pZCJ9fQ==--d3768fd4d0f3ab4bed9eb37773abeda5a03e2957/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOls4MCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--fc1cad899cc5e215dde949d48e32f41fc2cfbec2/_NRNT-artwork_VF.jpeg" />
4909      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NzY4NDE5LCJwdXIiOiJibG9iX2lkIn19--a4d7c378da238c643c61ab0291cabb30854f1fd8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/final-Artwork-Jealousy-VF-small.jpg" />
4910      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NzY0MTMyLCJwdXIiOiJibG9iX2lkIn19--4caa80aca070ea38cf6e6b064a2d1d6f1d396c73/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/Paperhearts_Cover%20(2).jpg" />
4911      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU5NDUyOSwicHVyIjoiYmxvYl9pZCJ9fQ==--9f012ff7424da103fc5eb2be80c45921b647f0a8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/rabbit%20holes%20cover.jpg" />
4912  </div>
4913
4914  <!-- Gradient layer -->
4915  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4916
4917  <!-- Date layer -->
4918  <div class="absolute flex flex-row items-center mt-5 ml-4">
4919    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4920      <span class="text-[14px] text-white">
4921        120 tracks
4922      </span>
4923    </div>
4924  </div>
4925
4926
4927  <!-- Title layer -->
4928  <div class="absolute inset-0 px-4">
4929    <div class="mt-[70px]">
4930      <div class="w-[100px] h-[100px]">
4931            <img loading="lazy" alt="" class="h-full object-cover rounded-lg playlist-item-pic" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU3OTM4OCwicHVyIjoiYmxvYl9pZCJ9fQ==--6d774282d48ba21fc87823dd05914a4ae7e07b24/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/Stacy%20Cover.jpg" />
4932      </div>
4933      <div class="mt-4 flex flex-col">
4934        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4935          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1206j4">Top ON AIR founding Radios - by year</a>
4936        </div>
4937        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4938          by <a href="/mx3">mx3</a>
4939        </div>
4940      </div>
4941    </div>
4942  </div>
4943</div>
4944
4945        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4946  <!-- Visual grid -->
4947  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4948      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4NjU1MywicHVyIjoiYmxvYl9pZCJ9fQ==--825f012ebc341a867c1ea1091310afb2d49a92a6/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/WRONG_THINGS_6000x6000px.png" />
4949      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTczNjA4NCwicHVyIjoiYmxvYl9pZCJ9fQ==--44d1d806d89e4b6fea6d142dca9e8368c05e858d/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/Artwork.jpg" />
4950      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTY5NjYxNSwicHVyIjoiYmxvYl9pZCJ9fQ==--c00c65c8121f0a9089f1f20e71ce7daa6917cad6/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--1b46e06028c7f83b9770a9e95d38a862630e75c4/painkiller_4.png" />
4951      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTY2MzQ1OCwicHVyIjoiYmxvYl9pZCJ9fQ==--afeff2908e91cc1e94cb1f4cc3ffce98dc4cd847/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/frame_0004.png" />
4952      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTU4NTkwNiwicHVyIjoiYmxvYl9pZCJ9fQ==--9bb3853e0f18368fcc4b776d7dd2de65d1c7a54d/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/GV-B&amp;B-COVER%20def.jpg" />
4953      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTY0MTg3NywicHVyIjoiYmxvYl9pZCJ9fQ==--5c41abf0ead9748c211b1bcf7fa7de36d6582653/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/To%20The%20End%20Cover.jpg" />
4954  </div>
4955
4956  <!-- Gradient layer -->
4957  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
4958
4959  <!-- Date layer -->
4960  <div class="absolute flex flex-row items-center mt-5 ml-4">
4961    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
4962      <span class="text-[14px] text-white">
4963        116 tracks
4964      </span>
4965    </div>
4966  </div>
4967
4968
4969  <!-- Title layer -->
4970  <div class="absolute inset-0 px-4">
4971    <div class="mt-[70px]">
4972      <div class="w-[100px] h-[100px]">
4973          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6Mjg3NDkyLCJwdXIiOiJibG9iX2lkIn19--f59297dd418435a470a13f7cb7825c4e953ae98a/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/mx3-all-for-one.png" />
4974      </div>
4975      <div class="mt-4 flex flex-col">
4976        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
4977          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1200GN">TUTS ON AIR</a>
4978        </div>
4979        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
4980          by <a href="/allfor1">Alle für 1 - Tous pour 1 - Tutti per 1 - Tuts per 1</a>
4981        </div>
4982      </div>
4983    </div>
4984  </div>
4985</div>
4986
4987        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
4988  <!-- Visual grid -->
4989  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
4990      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4OTYzNCwicHVyIjoiYmxvYl9pZCJ9fQ==--063f374238f36292454f87c9c4e18de3f23c5ff2/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/frame_0002.png" />
4991      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc5NzQ3NiwicHVyIjoiYmxvYl9pZCJ9fQ==--fef7cfe43574a969b1fe2389160fbf41864cb400/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/frame_0004.png" />
4992      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTczODA0NiwicHVyIjoiYmxvYl9pZCJ9fQ==--19994b4dc60065f5503d4c57d068fe98bb7b4b70/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/frame_0002.png" />
4993      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTY5MzE2NiwicHVyIjoiYmxvYl9pZCJ9fQ==--86bcc0a141bdcc77a1f3b2499b656dbf138797df/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/frame_0004.png" />
4994      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQzMjEyMCwicHVyIjoiYmxvYl9pZCJ9fQ==--77820a394ea296e07ccab5c71d15d3b13bfcfd2e/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/frame_0002.png" />
4995      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc3NjA1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--bee687c7ff2097226fbeecb0c99abe81719a983a/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/frame_0004.png" />
4996  </div>
4997
4998  <!-- Gradient layer -->
4999  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
5000
5001  <!-- Date layer -->
5002  <div class="absolute flex flex-row items-center mt-5 ml-4">
5003    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
5004      <span class="text-[14px] text-white">
5005        399 tracks
5006      </span>
5007    </div>
5008  </div>
5009
5010
5011  <!-- Title layer -->
5012  <div class="absolute inset-0 px-4">
5013    <div class="mt-[70px]">
5014      <div class="w-[100px] h-[100px]">
5015          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6OTg3OTMsInB1ciI6ImJsb2JfaWQifX0=--213184e239ba801a2cf0ab62553c6dd27d21ad02/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/selectionquadrat.jpg" />
5016      </div>
5017      <div class="mt-4 flex flex-col">
5018        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
5019          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1200e5">ON TV</a>
5020        </div>
5021        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
5022          by <a href="/partners/musicnight">Musicnight / SRF Selection Musik</a>
5023        </div>
5024      </div>
5025    </div>
5026  </div>
5027</div>
5028
5029        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
5030  <!-- Visual grid -->
5031  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
5032      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NDg1NSwicHVyIjoiYmxvYl9pZCJ9fQ==--7df4f2bdf4b60ad19f274210a98a8081bd71f7f6/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/cover_the_passengers_small_edited.jpg.jpg" />
5033      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NjE1OSwicHVyIjoiYmxvYl9pZCJ9fQ==--1a03ab22cf5c5650c0b6e7f737ad1b9b37a65966/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/cover_backtogether_copy.jpg" />
5034      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6ODE0NSwicHVyIjoiYmxvYl9pZCJ9fQ==--77acab92bf124b6ee19e02ee0efb8560eb52004e/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/myspacecover.jpg" />
5035      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NjkwOTAsInB1ciI6ImJsb2JfaWQifX0=--2a8ece8ba074c28338341c57e19c5d3afedf8218/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/dance2.jpg" />
5036      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzAzNSwicHVyIjoiYmxvYl9pZCJ9fQ==--e5e776c0e8121b0d910633de04ccf01e3fd5d0fd/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/india.jpg" />
5037      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NjkxODksInB1ciI6ImJsb2JfaWQifX0=--490973af82c3e0b02a6ed6fc85f950d4a94b523e/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzgwLDgwXSwic3RyaXAiOnRydWV9LCJwdXIiOiJ2YXJpYXRpb24ifX0=--8ed4dbe7f815c468914de1f08301ea38f97a6385/cover_front.jpg" />
5038  </div>
5039
5040  <!-- Gradient layer -->
5041  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
5042
5043  <!-- Date layer -->
5044  <div class="absolute flex flex-row items-center mt-5 ml-4">
5045    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
5046      <span class="text-[14px] text-white">
5047        15 tracks
5048      </span>
5049    </div>
5050  </div>
5051
5052
5053  <!-- Title layer -->
5054  <div class="absolute inset-0 px-4">
5055    <div class="mt-[70px]">
5056      <div class="w-[100px] h-[100px]">
5057          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6ODkyNTAsInB1ciI6ImJsb2JfaWQifX0=--79ce86d667b4416194e49a022bba952e99ace9f9/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--ea24e3fe096cfbc72f22570438b8826307cae5b8/mx3_compil_N1.jpg" />
5058      </div>
5059      <div class="mt-4 flex flex-col">
5060        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
5061          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/8rx">COMPILATION MX3 N°1</a>
5062        </div>
5063        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
5064          by <a href="/mx3">mx3</a>
5065        </div>
5066      </div>
5067    </div>
5068  </div>
5069</div>
5070
5071        <div data-spinner-target="playlistCard" data-action="click->spinner#handleCardClick" class="card flex-shrink-0 w-[181px] max-w-full h-[272px] rounded-xl bg-surface-100 dark:bg-surfacedark-100 flex flex-col shadow-lg overflow-hidden relative snap-start">
5072  <!-- Visual grid -->
5073  <div class="grid grid-cols-2 overflow-hidden rounded-2xl h-full">
5074      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQ5OTIyNywicHVyIjoiYmxvYl9pZCJ9fQ==--7e6f5d10f4d6c11ad40517c221f31e4bc46d5697/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/Malummi_16x9_PLAY.png" />
5075      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQ5ODg0NiwicHVyIjoiYmxvYl9pZCJ9fQ==--faaa0e1c6d8f51b55c633d467a8e1ceaf64e6f51/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/SMT_SCOPAMARE_PLAY.png" />
5076      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQ5NzU1MiwicHVyIjoiYmxvYl9pZCJ9fQ==--a6c316451a45b7b5dfd04dfa09bb64b125431a76/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/SMT_Nnavy_PLAY.png" />
5077      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQ5NzUzMCwicHVyIjoiYmxvYl9pZCJ9fQ==--d09c665e49348ccbe7a1e0f4ab96ed99c66db5df/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/SMT_Arthur_PLAY_01_26.png" />
5078      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQ2ODU4NiwicHVyIjoiYmxvYl9pZCJ9fQ==--0165e418195099ca3eea2080ace9cd2cb07aacf1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/SMT-2025_Vancouver_PLAY-2.png" />
5079      <img loading="lazy" alt="" class="flex aspect-square object-cover w-full max-w-none h-full" src="https://mx3.ch/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQ0MzYxOSwicHVyIjoiYmxvYl9pZCJ9fQ==--c1c301cf39d0e39319039bb71f9e4869fc4918dd/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCw4MF0sInN0cmlwIjp0cnVlfSwicHVyIjoidmFyaWF0aW9uIn19--26623c5fa31d6c265ea0c0b97cfc184156b16d39/SMT-Bandit%2
50790Voyage_PLAY.png" />
5080  </div>
5081
5082  <!-- Gradient layer -->
5083  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 rounded-2xl"></div>
5084
5085  <!-- Date layer -->
5086  <div class="absolute flex flex-row items-center mt-5 ml-4">
5087    <div class="flex flex-col bg-black rounded-lg py-1 px-2">
5088      <span class="text-[14px] text-white">
5089        19 tracks
5090      </span>
5091    </div>
5092  </div>
5093
5094
5095  <!-- Title layer -->
5096  <div class="absolute inset-0 px-4">
5097    <div class="mt-[70px]">
5098      <div class="w-[100px] h-[100px]">
5099          <img loading="lazy" class="h-full object-cover rounded-lg playlist-item-pic" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzMyODMwLCJwdXIiOiJibG9iX2lkIn19--1c10d0e0974ce25a4816af33c23cac6c0216712e/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzQwMCw0MDBdLCJzdHJpcCI6dHJ1ZX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--9d16704587ed04b54385155e23a992905e150b46/musiktag2024background.png" />
5100      </div>
5101      <div class="mt-4 flex flex-col">
5102        <div class="text-[19px] leading-[1.2] flex items-end font-bold text-white">
5103          <a data-turbo-frame="_top" class="line-clamp-2 card__target" href="/p/1204HL">Musiktag Video Series - Seasons 1 &amp; 2</a>
5104        </div>
5105        <div class="text-[14px] mt-1 leading-[1.2] text-white line-clamp-1">
5106          by <a href="/mx3">mx3</a>
5107        </div>
5108      </div>
5109    </div>
5110  </div>
5111</div>
5112
5113    </div>
5114  </div>
5115</section>
5116
5117    </div>
5118  </div>
5119</div>
5120
5121
5122      </div>
5123    </main>
5124
5125    <footer role="contentinfo" class="footer px-6 lg:px-8 left-0 lg:pl-[19.5rem] relative bottom-0 right-0">
5126  <div class="text-left py-6">
5127    <p>&copy; 2006-2026 SRG SSR • <a href="mailto:[email protected]">Contact</a> • <a target="_blank" href="https://developer.srgssr.ch/apis/srgssr-mx3#overview">API</a> • <a target="_blank" href="/home/legal">Legal terms</a> •  <a target="_blank" href="/home/privacy">Privacy settings</a></p>
5128  </div>
5129</footer>
5130
5131    
5132    
5133    
5134    
5135    
5136    <div
5137  id="player"
5138  data-turbo-permanent
5139  data-controller="player"
5140  data-player-show-class="show"
5141  data-player-hidden-class="hidden"
5142  data-player-active-class="active"
5143  data-action="
5144    playable:play@window->player#play
5145    playable:playShow@window->player#playShow
5146  "
5147  class="[&.show_.sheet]:translate-y-0 [&.show]:h-24">
5148
5149  <!-- Video element -->
5150  <div class="hidden lg:left-72 max-w-[1200px] w-[calc(100%-2rem)] lg:w-[calc(100vw-18rem-44px)] bg-black rounded-lg overflow-hidden">
5151    <video
5152  data-player-target="player"
5153  data-action="
5154    playing->player#playing
5155    pause->player#paused
5156    durationchange->player#durationchange
5157    timeupdate->player#timeupdate
5158    ended->player#ended
5159    touchstart@window->player#unlockPlayback:once
5160    playable:play@window->player#play
5161    playable:resume@window->player#resume
5162    playable:skipToTrack@window->player#skipToTrack
5163    playlist:pause@window->player#pause
5164    playlist:next@window->player#next
5165    playlist:prev@window->player#previous
5166    mouseenter->player#showControls
5167    mouseleave->player#hideControls
5168    click->player#togglePlay
5169    resize@window->player#repositionVideo
5170    scroll@window->player#scroll
5171    fullscreenchange@document->player#fullscreenChange
5172    webkitfullscreenchange@document->player#fullscreenChange
5173    MSFullscreenChange@document->player#fullscreenChange
5174    mozfullscreenchange@document->player#fullscreenChange
5175    canplay->player#loaded
5176    keydown.space@document->player#spaceDown
5177    playing-now-indicator:set@document->player#playingIndicatorSet
5178    playable:loadTrackInfo@window->player#loadTrackInfo
5179  "
5180  preload="metadata"
5181  controlsList="nodownload"
5182  oncontextmenu="return false;"
5183  playsinline
5184  class="w-full h-full object-center bg-center bg-contain bg-no-repeat">
5185  <!-- silent audio -->
5186  <source src="data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA">
5187</video>
5188
5189    <div data-player-target="controls" data-action="mouseenter->player#showControls mouseleave->player#hideControls" data-player-controls-show-class="show" data-player-controls-hidden-class="hidden"
5190  class="controls flex flex-wrap items-center absolute bottom-0 left-0 right-0 pl-3 pr-3 sm:px-5 sm:py-3 py-2 rounded-b-lg hidden">
5191  <div class="w-0 h-0 before:block before:absolute before:pointer-events-none before:w-full before:h-[calc(100%+30px)] before:top-[-30px] before:left-0 before:bg-gradient-to-b before:from-transparent before:to-zinc-800">&nbsp;</div>
5192  <div class="progress w-full pb-3 pt-3 relative cursor-pointer group-[.playlist:not(.started)]/embed-wrapper:!hidden" data-player-target="progressFull" data-action="click->player#seeked">
5193    <div class="flex bg-white dark:bg-gray-700 h-1 w-full bg-opacity-50">
5194      <div data-player-target="progress" class="flex bg-primary-600 dark:bg-primary-200 bg-opacity-100" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Playback progress" aria-valuetext="0:00 of 0:00">
5195      </div>
5196    </div>
5197  </div>
5198  <div class="flex flex-wrap w-full h-[44px]">
5199    <div class="flex h-[44px] group-[.playlist:not(.started)]/embed-wrapper:opacity-0 flex-grow mr-3">
5200      <button data-player-target="playButton" data-action="player#resume" id="play-bt-whitecircle" class="z-20 duration-500 text-white opacity-100 transform group-hover:opacity-100 hover:scale-110" aria-label="Play">
5201        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-play-circle-fill" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
5202          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path>
5203        </svg>
5204      </button>
5205      <button data-player-target="pauseButton" data-action="player#pause" id="pause-bt-whitecircle" class="z-20 duration-500 text-white opacity-100 transform group-hover:opacity-100 hidden hover:scale-110 group-[.playlist:not(.started)]/embed-wrapper:!hidden" aria-label="Pause">
5206        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-pause-circle-fill" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
5207          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.25 5C5.56 5 5 5.56 5 6.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C7.5 5.56 6.94 5 6.25 5m3.5 0c-.69 0-1.25.56-1.25 1.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C11 5.56 10.44 5 9.75 5" />
5208        </svg>
5209      </button>
5210      <div class="text-center p-0 relative z-1 ml-3">
5211        <button class="peer z-[5] relative hover:text-[#ffffff] hover:no-underline hover:scale-110 h-[44px] w-[44px] flex items-center justify-center pointer-events-auto " data-action="click->player#toggleVolume" data-player-target="volume" aria-label="Toggle volume controls" aria-expanded="false" aria-controls="volume-slider">
5212          <svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
5213    <path d="M4.65503 4.25L10.655 0.5V15.5L4.65503 11.75V4.25ZM0.155029 11.75H3.15503V4.25H0.155029V11.75ZM15.353 1.802L14.2303 2.92475C15.6155 4.262 16.4675 6.0425 16.4675 8C16.4675 9.9575 15.6163 11.738 14.2303 13.0745L15.3538 14.198C17.0825 12.5832 18.155 10.4067 18.155 8C18.155 5.59325 17.0825 3.4175 15.353 1.802ZM14.9863 8C14.9863 6.437 14.3 5.02475 13.1983 3.95675L12.071 5.084C12.8293 5.87075 13.2988 6.88475 13.2988 8C13.2988 9.116 12.8315 10.1307 12.0733 10.9182L13.2005 12.0455C14.3015 10.9775 14.9863 9.56375 14.9863 8Z" fill="white"/>
5214</svg>
5215
5216        </button>
5217        <div id="volume-slider" class="peer-[.active]:!flex hidden pr-[10px] bg-black h-[44px] pl-[40px] volume pointer-events-auto absolute bottom-[-22px] left-[20px] origin-left -rotate-90 rounded-[20px]" data-player-target="volumeMenu" aria-hidden="true">
5218          <input type="range" value="100" min="0" max="100" step="1" data-action="input->player#changeVolume change->player#changeVolume" class="accent-gray-100 w-[65px]" aria-label="Volume level" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
5219        </div>
5220      </div>
5221      <div class="h-[44px] leading-[44px] flex-grow text-white z-1 relative pl-2 sm:pl-2 pointer-events-none flex-shrink basis-1 flex flex-wrap text-[14px]">
5222        <span data-player-target="currentTime"></span>&nbsp;<span class="light text-[rgba(255, 255, 255, 0.6)] flex">/&nbsp;<span class="" data-player-target="duration"></span></span>
5223      </div>
5224      <button type="button" class="hover:no-underline hover:text-[#ffffff] hover:scale-110 z-1 relative w-[44px] text-white leading-[40px] p-0 text-center pointer-events-auto focus:text-[#ffffff] border-b-2 pt-[2px] border-[transparent] [&.active]:border-white" data-player-target="hd" data-action="click->
5224player#toggleHd" aria-pressed="false" aria-label="Toggle HD playback">HD</button>
5225      <button type="button" class="hover:no-underline hover:text-[#ffffff] hover:scale-110 z-1 relative text-white pointer-events-auto h-[44px] w-[44px] p-0 flex items-center justify-center color-white" data-player-target="fullsize" data-action="click->player#toggleFullsize" aria-label="Open fullscreen">
5226        <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" id="entypo-resize-full-screen" width="20" height="20"><g><path d="M6.987 10.987l-2.931 3.031L2 11.589V18h6.387l-2.43-2.081 3.03-2.932-2-2zM11.613 2l2.43 2.081-3.03 2.932 2 2 2.931-3.031L18 8.411V2h-6.387z"></path></g></svg>
5227
5228      </button>
5229      <button type="button" class="hover:no-underline hover:text-[#ffffff] hover:scale-110 z-1 relative text-white pointer-events-auto h-[44px] w-[44px] p-0 flex items-center justify-center color-white hidden" data-player-target="smallsize" data-action="click->player#toggleFullsize" aria-label="Close fullscreen">
5230        <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" id="entypo-resize-100%" width="20" height="20"><g><path d="M4.1 14.1L1 17l2 2 2.9-3.1L8 18v-6H2l2.1 2.1zM19 3l-2-2-2.9 3.1L12 2v6h6l-2.1-2.1L19 3z"></path></g></svg>
5231
5232      </button>
5233    </div>
5234    <a href="https://mx3.ch" target="_blank" class="h-[44px] watermark sm:mt-[-2px] z-1 hover:no-underline hover:scale-110 hover:text-[#ffffff] relative text-white float-right relative h-[44px] w-[35px] sm:w-[60px] group-[.was-started]/cpw:w-[44px] top-[-50px] group-[.was-started]/cpw:top-0 ml-auto static top-auto pointer-events-auto" title="https://mx3.ch">
5235      <svg class="fill-current block w-full h-full" viewBox="0 0 109 46">
5236  <title>Mx3</title>
5237  <path d="M32.0045 16.8083C33.205 17.6956 33.8102 18.8856 34.0495 20.3947L36.2344 41.6665L42.246 41.0542L40.0524 19.896C39.7049 16.6583 38.3959 14.0411 36.0028 12.1521C33.6181 10.1487 30.5738 9.36204 27.3438 9.59591C23.7548 10.033 21.1141 11.685 19.2913 14.7716C16.8324 12.189 13.9264 11.0672 10.3454 11.391C7.10762 11.7385 4.36048 13.2679 2.47123 15.6613C0.468337 18.0466 -0.188609 20.8699 0.0449713 24.1002L2.35272 45.2658L8.25777 44.531L5.94974 23.3651C5.94 21.8723 6.26375 20.5175 7.15142 19.317C8.03851 18.1161 9.34295 17.5193 10.958 17.4025C12.5736 17.2857 13.9278 17.6103 15.1283 18.4977C16.2147 19.3771 16.8124 20.6812 17.0508 22.19L19.2366 43.4627L25.2556 42.7356L23.0626 21.5775C22.9375 20.0767 23.2621 18.7221 24.1412 17.6355C25.0289 16.435 26.3333 15.8379 27.9564 15.6069C29.5714 15.4904 30.9262 15.8144 32.0045 16.8083Z"></path>
5238  <path d="M48.6798 6.49628L41.833 15.7739L52.7354 23.997L44.2845 34.884L53.5544 41.845L61.7855 30.8272L72.8021 39.0584L79.6495 29.781L68.7465 21.5582L68.6234 21.6647L76.8549 10.6472L67.7 3.69417L59.4689 14.7117L48.6798 6.49628Z"></path>
5239  <path d="M105.146 -5.55189e-06L79.7142 2.58283L80.3772 9.5158L92.8726 8.094L86.6266 20.2831C89.538 19.6837 91.747 19.2643 93.2398 19.254C98.0774 19.0182 100.683 21.1513 101.172 25.662C101.378 27.6277 100.916 29.3169 99.6699 30.7223C98.6597 32.0294 96.9971 32.8309 94.9095 33.1434C91.0912 33.566 88.5365 32.3537 87.3414 29.7448L80.0577 30.4988C80.7636 33.5322 82.5381 36.0672 85.3966 37.8734C88.2379 39.909 91.7382 40.7276 95.6701 40.3134C99.8299 39.9158 103.042 38.3037 105.428 35.3722C107.813 32.4396 108.755 28.8322 108.348 24.7867C108.009 21.4344 106.815 18.8255 104.886 16.8541C102.958 14.883 100.501 13.9077 97.4174 13.6922L105.146 -5.55189e-06Z"></path>
5240</svg>
5241
5242    </a>
5243  </div>
5244</div>
5245
5246  </div>
5247
5248  <!-- bottom sheets content -->
5249  <div class="sheet bottom-0 fixed h-24 left-0 right-0 z-[90]  flex flex-col items-center w-full sm:w-11/12 lg:w-11/12 gap-4 sm:mx-auto sm:rounded-[28px] transition-transform translate-y-full duration-[400ms] bg-gradient-to-b from-stone-300 via-surface-800 to-surface-100 dark:bg-gradient-to-t dark:from-stone-800 dark:to-stone-700 shadow-xl">
5250    <!-- content -->
5251    <div class="h-24 justify-between w-full relative  overflow-hidden p-2 sm:rounded-[28px]">
5252      <div id="trigger-maxi-player-mobile" class="z-0 absolute top-0 left-0  w-full h-full sm:invisible">
5253        <button
5254          data-type="dialogs"
5255          data-target="#sheets_track"
5256          class="z-10 w-full h-full hover:scale-110 opacity-10 hover:bg-primary-100 translate-y-0 group-hover:translate-y-3 transition hover:text-black dark:hover:text-white"
5257          type="button"
5258          aria-label="Expand player"
5259        ></button>
5260      </div>
5261      <div class="justify-left z-30 " data-action="click->
5261player#toggleExpand">
5262        <img data-player-target="artistImage" class="z-30 absolute -top-8 -left-6 w-40 h-40 rounded-full shadow dark:shadow-lg" src="">
5263        <img data-player-target="trackCover" class="z-20 hover:z-40 absolute  top-0 left-28 w-24 h-24 rounded shadow dark:shadow-lg hidden lg:flex opacity-70 hover:opacity-100" src="">
5264      </div>
5265
5266      <div id="track-infos" class="absolute left-36 lg:left-56 top-6 justify-left  w-[calc(100%-9rem)] pointer-events-none">
5267        <div class="flex-initial w-[calc(100%-125px)] sm:w-[calc(100%-160px)] md:w-[calc(50%-7rem)] lg:w-[calc(50%-12rem)] xl:w-[calc(50%-14rem)] pointer-events-auto">
5268          <div>
5269            <h2 data-player-target="title" data-action="click->player#toggleExpand" class="whitespace-nowrap overflow-hidden text-ellipsis w-full text-title-md text-gray-900 dark:text-gray-100 ml-2 font-bold"></h2>
5270          </div>
5271          <div class="flex items-center pt-1 pl-2">
5272            <img data-player-target="showVendorLogo" class="w-[24px] h-auto mr-1" src="">
5273            <h3 data-player-target="artist" data-action="click->player#toggleExpand" class="whitespace-nowrap overflow-hidden text-ellipsis w-full text-title-md text-gray-900 dark:text-gray-100 "></h3>
5274          </div>
5275        </div>
5276        <div class="flex gap-4 mt-3 hidden">
5277          <span aria-label="Favorite" data-microtip-position="top" role="tooltip"><div class="invisible xl:visible material-symbols-outlined  hover:scale-110   transition duration-500 select-none cursor-pointer">favorite</div> </span>
5278          <!-- trigger dialog -->
5279          <button class="invisible xl:visible inline-flex flex-row items-center justify-center gap-x-2 py-0 px-0 h-6 w-12 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium bg-secondary-100 text-primary-900 dark:bg-secondary-700 dark:text-secondary-100 hover:bg-surface-200 dark:hover:bg-surfacedark-200">
5280            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
5281              <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path>
5282            </svg>
5283          </button>
5284        </div>
5285      </div>
5286
5287
5288      <div id="buttons-player" class="md:w-auto flex md:justify-center items-center pt-3 justify-end ">
5289        <button
5290          type="button"
5291          data-type="dialogs"
5292          data-player-target="expandToggle"
5293          data-action="player#toggleExpand"
5294          data-player-expanded-label="Collapse player"
5295          data-player-collapsed-label="Expand player"
5296          aria-controls="player-expanded-dialog"
5297          aria-expanded="false"
5298          aria-label="Expand player"
5299          class="md:absolute md:right-4 md:h-[36px] transform w-10 sm:w-20 lg:hidden rounded-full z-30 mt-2 mr-3 h-full pt-1 pb-1 flex items-center justify-center hover:scale-110 opacity-100 bg-primary-100 hover:bg-primary-300 dark:bg-black dark:hover:bg-primary-700 group-hover:translate-y-3 transition hover:text-black dark:hover:text-white"><span class="float material-symbols-outlined font-bold text-xl" aria-hidden="true">expand_circle_up</span></button>
5300
5301        <button
5302          type="button"
5303          data-player-target="previousButton"
5304          data-action="player#previous"
5305          aria-label="Previous track"
5306          class="hover:scale-110 duration-500 transition">
5307          <div class="mt-2 mr-2 hidden xl:flex">
5308            <span class="text-3xl hover:text-black dark:hover:text-white material-symbols-outlined" aria-hidden="true">skip_previous</span>
5309          </div>
5310        </button>
5311
5312        <button
5313          type="button"
5314          data-player-target="playButton"
5315          data-action="player#resume"
5316          id="play-bt-whitecircle"
5317          aria-label="Play"
5318          class="z-20 mt-2 hover:scale-110 duration-500 text-black dark:text-white opacity-100 transform group-hover:opacity-100 transition">
5319          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-play-circle-fill" viewBox="0 0 16 16" aria-hidden="true">
5320            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path>
5321          </svg>
5322        </button>
5323
5324        <button
5325          type="button"
5326          data-player-target="pauseButton"
5327          data-action="player#pause"
5328          id="pause-bt-whitecircle"
5329          aria-label="Pause"
5330          class="z-20 mt-2 hover:scale-110 duration-500 text-black dark:text-white opacity-100 transform group-hover:opacity-100 transition hidden">
5331          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-pause-circle-fill" viewBox="0 0 16 16" aria-hidden="true">
5332            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.25 5C5.56 5 5 5.56 5 6.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C7.5 5.56 6.94 5 6.25 5m3.5 0c-.69 0-1.25.56-1.25 1.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C11 5.56 10.44 5 9.75 5" />
5333          </svg>
5334        </button>
5335
5336        <button
5337          type="button"
5338          data-player-target="nextButton"
5339          data-action="player#next"
5340          aria-label="Next track"
5341          class="ml-2 hover:scale-110  duration-500 transition">
5342          <div class="mt-2 hidden xl:flex">
5343            <span class="text-3xl hover:text-black dark:hover:text-white material-symbols-outlined" aria-hidden="true">skip_next</span>
5344          </div>
5345        </button>
5346      </div>
5347
5348      <div id="controls-player" class="absolute right-6 top-6  hidden lg:flex grid grid-cols-4 gap-5 pt-2 justify-end ">
5349        <div class="invisible xl:visible pt-4 pb-4 flex w-60" data-player-target="progressFull" data-action="click->player#seeked">
5350          <div class="bg-white h-1 w-full">
5351            <div data-player-target="progress" class=" flex bg-primary-600 dark:bg-primary-200 h-1" role="progressbar" aria-label="Playback progress" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-valuetext="0:00 of 0:00"></div>
5352          </div>
5353        </div>
5354
5355        <button
5356          type="button"
5357          data-type="dialogs"
5358          data-player-target="expandToggle"
5359          data-action="player#toggleExpand"
5360          data-player-expanded-label="Collapse player"
5361          data-player-collapsed-label="Expand player"
5362          aria-controls="player-expanded-dialog"
5363          aria-expanded="false"
5364          aria-label="Expand player"
5365          class="transform w-10 sm:w-20 hidden md:flex rounded-full z-30 mr-3 h-full pt-1 pb-1 flex items-center justify-center hover:scale-110 opacity-100 bg-primary-100 hover:bg-primary-300 dark:bg-black dark:hover:bg-primary-700 group-hover:translate-y-3 transition hover:text-black dark:hover:text-white"><span class="float material-symbols-outlined font-bold text-xl" aria-hidden="true">expand_circle_up</span></button>
5366
5367        <button
5368          type="button"
5369          data-type="sheets"
5370          data-target="#sheets_playlist"
5371          aria-label="Open playlist"
5372          aria-controls="sheets_playlist"
5373          class="hover:scale-110  translate-y-0 group-hover:translate-y-3 transition hover:text-black dark:hover:text-white hidden">
5374          <span aria-hidden="true" data-microtip-position="top" role="presentation"><div class="-mt-2 material-symbols-outlined icon-active float-left">list</div></span></button>
5375
5376        <div id="volume">
5377          <button
5378            type="button"
5379            class="text-base icon  icon-volume hover:text-black dark:hover:text-white "
5380            data-role="volume"
5381            aria-label="Toggle volume controls"></button>
5382        </div>
5383        <div></div>
5384      </div>
5385
5386    </div>
5387  </div>
5388
5389  <div
5390    id="player-expanded-dialog"
5391    data-player-target="expandDialog"
5392    class="sm:max-w-[500px] overflow-hidden px-5 pb-5 overflow-y-auto max-h-[70%] bottom-0 fixed left-0 right-0 z-[60] transition-transform translate-y-full duration-[400ms] flex flex-col sm:mx-auto w-full lg:w-1/2 rounded-t-[28px] bg-surface-100 dark:bg-surfacedark-100 shadow-xl [&.sheet]:bottom-[96px] bg-gradient-to-t from-stone-300 via-surface-800 to-surface-100 dark:bg-gradient-to-t dark:from-stone-800 dark:to-stone-700"
5393    role="dialog"
5394    aria-modal="true"
5395    aria-hidden="true"
5396    aria-labelledby="player-expanded-title"
5397    aria-describedby="player-expanded-description"
5398    tabindex="-1">
5399    <p id="player-expanded-description" class="sr-only">Expanded player view with additional controls and information</p>
5400    <div class="flex flex-col w-full items-center justify-center mt-10">
5401      <a href="#" data-player-target="titleLink" class="relative origin-left hover:scale-105">
5402        <img data-player-target="trackCover" class="block h-[200px]" src="">
5403        <img data-player-target="showVendorLogo" class="absolute left-3 top-3 w-[48px] h-auto" src="">
5404      </a>
5405      <div class="flex flex-row-reverse text-[13px] mt-1 mb-1">
5406        <a href="#" class="peer font-semibold hover:scale-105" data-player-target="playlistName playlistLink"></a>
5407        <span class="peer-empty:hidden pr-1">From the playlist</span>
5408      </div>
5409      <div class="flex items-center w-[calc(100%+15px)] ml-[15px]">
5410        <div class="flex flex-col">
5411          <a href="#" data-player-target="title titleLink"  class="origin-left text-xl sm:text-2xl hover:scale-105 text-gray-900 dark:text-gray-100 font-bold flex-grow pr-1 sm:pr-3 mb-1 sm:mb-2" id="player-expanded-title"></a>
5412        </div>
5413        <button
5414          type="button"
5415          data-player-target="previousButton"
5416          data-action="player#previous"
5417          aria-label="Previous track"
5418          class="hover:scale-110 duration-500 transition w-[44px] h-[44px] flex items-center justify-center">
5419          <div class="flex">
5420            <span class="text-3xl hover:text-black dark:hover:text-white material-symbols-outlined" aria-hidden="true">skip_previous</span>
5421          </div>
5422        </button>
5423        <button
5424          type="button"
5425          data-player-target="nextButton"
5426          data-action="player#next"
5427          aria-label="Next track"
5428          class="hover:scale-110  duration-500 transition w-[44px] h-[44px] flex items-center justify-center">
5429          <div class="flex">
5430            <span class="text-3xl hover:text-black dark:hover:text-white material-symbols-outlined" aria-hidden="true">skip_next</span>
5431          </div>
5432        </button>
5433      </div>
5434    </div>
5435    <div class="flex items-center mt-1 mb-3">
5436      <a href="" class="flex items-center hover:scale-105 flex-grow origin-left block" class="artistLink" data-player-target="artistLink">
5437        <img data-player-target="artistImage" class="z-20 hover:z-40 w-10 h-10 rounded-full mr-3" src="">
5438        <span data-player-target="artist" class="text-title-md text-gray-900 dark:text-gray-100 flex-grow"></span>
5439      </a>
5440      <span class="peer" data-player-target="playlistIndex"></span><span class="peer-empty:hidden">/</span><span data-player-target="playlistLength"></span>
5441    </div>
5442    <div class="flex items-center gap-3">
5443      <span data-player-target="currentTime"></span>
5444      <div class="progress w-full pb-3 pt-3 relative cursor-pointer" data-player-target="progressFull" data-action="click->player#seeked">
5445        <div class="flex bg-white dark:bg-gray-700 h-1 w-full bg-opacity-50">
5446          <div data-player-target="progress" class="flex bg-primary-600 dark:bg-primary-200 bg-opacity-100" role="progressbar" aria-label="Playback progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-valuetext="0:00 of 0:00"></div>
5447        </div>
5448      </div>
5449      <span data-player-target="duration"></span>
5450    </div>
5451    <button
5452      type="button"
5453      data-player-target="expandClose"
5454      data-action="player#toggleExpand"
5455      aria-label="Collapse player"
5456      class="absolute right-6 top-3 hover:scale-110">
5457      <span class="material-symbols-outlined ml-auto icon-active" aria-hidden="true">close</span>
5458    </button>
5459  </div>
5460</div>
5461
5462    <!-- Mobile search -->
5463<div data-controller="dialog" data-dialog-show-class="show" data-dialog-target-id-value="#dialog_search" id="dialog_search"
5464  data-dialog-opened-text="opened"
5465  data-dialog-closed-message="Dialog closed"
5466  role="dialog" aria-modal="true" aria-labelledby="search-dialog-title" class="[&.show]:opacity-100 [&.show]:h-full [&.show]:inset-0 [&.show_.dialog]:!block opacity-0 w-full h-0 z-[70] overflow-auto fixed left-0 top-0 flex items-center justify-center">
5467  <!-- dialogs -->
5468  <div class="dialog hidden fixed inset-0 z-50 flex-col gap-2 bg-neutral-10 dark:bg-neutral-900" role="dialog" aria-modal="true" aria-labelledby="dialog_search_title" aria-describedby="dialog_search_help" tabindex="-1">
5469    <!-- header -->
5470    <div class="min-h-[56px] flex flex-row items-center justify-between gap-4 pl-4 pr-2 pt-4 pb-2">
5471      <h3 id="search-dialog-title" class="flex flex-grow text-title-md">Search</h3>
5472
5473      <button type="button" data-action="dialog#close" class="relative flex flex-row items-center justify-center gap-x-2 p-2 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium text-primary-600 dark:bg-surfacedark-100 hover:bg-surface-200 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-200 dark:focus:bg-surfacedark-400" aria-label="Close">
5474        <span class="material-symbols-outlined" aria-hidden="true">close</span>
5475      </button>
5476    </div>
5477    <hr class="w-full border-surface-100 dark:border-surfacedark-100">
5478    <div class="relative p-4">
5479      <div class="relative">
5480        <form action="/home/search" role="search" aria-labelledby="dialog_search_title">
5481          <label for="dialog-search-input" class="sr-only">Search the site</label>
5482          <button type="submit" class="absolute left-1 top-1 inline-flex !items-center justify-center w-10 h-10 gap-x-2 p-2.5 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-primary-600/[0.08] focus:bg-primary-600/[0.08] dark:hover:bg-primary-200/[0.08] dark:focus:bg-primary-200/[0.08]" aria-label="Submit search">
5483            <span class="material-symbols-outlined !text-2xl">search</span>
5484          </button>
5485          <input id="dialog-search-input" name="q" type="search" placeholder="Search keywords..." class="block w-full px-14 h-12 rounded-full bg-surface-200 dark:bg-surfacedark-200 focus:bg-white dark:focus:bg-gray-900 py-2 ring-0 focus:outline-none focus:shadow">
5486        </form>
5487      </div>
5488    </div>
5489    <!-- body -->
5490    <div class="relative px-4 h-screen overflow-y-scroll scrollbars">
5491      <p class="mt-1" id="dialog_search_help">
5492        <a class="text-primary-600 dark:text-primary-400 hover:underline" href="/home/advanced_search">Advanced search</a>
5493      </p>
5494    </div>
5495  </div>
5496</div>
5497
5498      <div data-controller="dialog" data-dialog-show-class="show" data-dialog-target-id-value="#add-to-playlist-dialog" id="add-to-playlist-dialog"
5499  data-dialog-opened-text="opened"
5500  data-dialog-closed-message="Dialog closed"
5501  role="dialog"
5502  aria-modal="true"
5503  aria-labelledby="add-to-playlist-dialog-title"
5504  class="[&.show_.bgDialog]:opacity-60 [&.show]:opacity-100 [&.show]:h-full [&.show_.bgDialog]:block [&.show_.bgDialog]:inset-0 [&.show]:inset-0 duration-[400ms] ease-[cubic-bezier(0, 0, 0, 1)] opacity-0 w-full h-0 z-[9999] overflow-auto fixed left-0 top-0 flex items-center justify-center">
5505  <div data-action="click->dialog#close" class="bgDialog fixed z-[60] opacity-0 -top-full bg-neutral-900"></div>
5506  <div class="z-[150] flex flex-col w-4/5 sm:w-11/12 sm:w-[480px] h-4/5 overflow-auto bg-surface-300 dark:bg-surfacedark-300 rounded-[28px]">
5507    <div class="min-h-[56px] flex flex-row items-center gap-3 px-6 pt-6">
5508      <h3 id="add-to-playlist-dialog-title" class="flex flex-grow text-base tracking-[.009375em]">Add to a playlist</h3>
5509      <button type="button" data-action="dialog#close" class="flex items-center justify-center" aria-label="Close">
5510        <span class="material-symbols-outlined" aria-hidden="true">close</span>
5511      </button>
5512    </div>
5513    <div class="relative text-left px-6 py-6">
5514      
5515    <turbo-frame id="add-to-playlist" data-url-template="/admin/playlists/add_track_popup?track_id=__ITEM_ID__" src="">
5516    </turbo-frame>
5517
5518    </div>
5519  </div>
5520</div>
5521
5522  </body>
5523</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.