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's theme" 131 data-theme-label-template-value="Change theme, current selection: Use device's theme"> 132 <span class="sr-only" data-theme-target="label">Use device'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'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="account-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 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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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&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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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&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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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&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 [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-primary-600/[0.08] dark:[&.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 & 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="{"json_path":"/t/2516.json","path":"/t/2516","navigate_to_path":"/t/2516"}" 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="{"playable":{"json_path":"/t/24xQ.json","path":"/t/24xQ"}}" 447 data-action="playable#play" 448 class="hover:scale-110 text-white transition"> 449 <span class="bi bi-play-circle-fill" data-playable="{"json_path":"/t/24xQ.json","path":"/t/24xQ"}" 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="{"playable":{"json_path":"/p/rjN.json","path":"/p/rjN"}}" 477 data-action="playable#play" 478 class="hover:scale-110 text-white transition"> 479 <span class="bi bi-play-circle-fill" data-playable="{"json_path":"/p/rjN.json","path":"/p/rjN"}" 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="{"playable":{"json_path":"/p/dEs.json","path":"/p/dEs"}}" 505 data-action="playable#play" 506 class="hover:scale-110 text-white transition"> 507 <span class="bi bi-play-circle-fill" data-playable="{"json_path":"/p/dEs.json","path":"/p/dEs"}" 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="{"json_path":"/t/23VS.json","path":"/t/23VS","navigate_to_path":"/t/23VS"}" 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="{"playable":{"json_path":"/p/1201nq.json","path":"/p/1201nq"}}" 562 data-action="playable#play" 563 class="hover:scale-110 text-white transition"> 564 <span class="bi bi-play-circle-fill" data-playable="{"json_path":"/p/1201nq.json","path":"/p/1201nq"}" 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'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="{"playable":{"json_path":"/p/1201tH.json","path":"/p/1201tH"}}" 592 data-action="playable#play" 593 class="hover:scale-110 text-white transition"> 594 <span class="bi bi-play-circle-fill" data-playable="{"json_path":"/p/1201tH.json","path":"/p/1201tH"}" 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="{"playable":{"json_path":"/p/cnq.json","path":"/p/cnq"}}" 622 data-action="playable#play" 623 class="hover:scale-110 text-white transition"> 624 <span class="bi bi-play-circle-fill" data-playable="{"json_path":"/p/cnq.json","path":"/p/cnq"}" 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="{"playable":{"json_path":"/p/ry6.json","path":"/p/ry6"}}" 652 data-action="playable#play" 653 class="hover:scale-110 text-white transition"> 654 <span class="bi bi-play-circle-fill" data-playable="{"json_path":"/p/ry6.json","path":"/p/ry6"}" 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="{"playable":{"json_path":"/t/25c3.json","path":"/t/25c3"}}" 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="{"json_path":"/t/25c3.json","path":"/t/25c3"}" 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="{"playable":{"json_path":"/t/25c2.json","path":"/t/25c2"}}" 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="{"json_path":"/t/25c2.json","path":"/t/25c2"}" 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="{"playable":{"json_path":"/t/25c1.json","path":"/t/25c1"}}" 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="{"json_path":"/t/25c1.json","path":"/t/25c1"}" 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="{"playable":{"json_path":"/t/25c0.json","path":"/t/25c0"}}" 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="{"json_path":"/t/25c0.json","path":"/t/25c0"}" 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="{"playable":{"json_path":"/t/25bZ.json","path":"/t/25bZ"}}" 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="{"json_path":"/t/25bZ.json","path":"/t/25bZ"}" 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="{"playable":{"json_path":"/t/25bY.json","path":"/t/25bY"}}" 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="{"json_path":"/t/25bY.json","path":"/t/25bY"}" 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="{"playable":{"json_path":"/t/25bX.json","path":"/t/25bX"}}" 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="{"json_path":"/t/25bX.json","path":"/t/25bX"}" 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="{"playable":{"json_path":"/t/25bW.json","path":"/t/25bW"}}" 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="{"json_path":"/t/25bW.json","path":"/t/25bW"}" 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="{"playable":{"json_path":"/t/25bV.json","path":"/t/25bV"}}" 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="{"json_path":"/t/25bV.json","path":"/t/25bV"}" 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="{"playable":{"json_path":"/t/25bU.json","path":"/t/25bU"}}" 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="{"json_path":"/t/25bU.json","path":"/t/25bU"}" 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&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="{"playable":{"json_path":"/t/1UNF.json","path":"/t/1UNF"}}" 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="{"json_path":"/t/1UNF.json","path":"/t/1UNF"}" 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="{"json_path":"/t/22JS.json","path":"/t/22JS","navigate_to_path":"/t/22JS"}" 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="{"playable":{"json_path":"/t/25b6.json","path":"/t/25b6"}}" 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="{"json_path":"/t/25b6.json","path":"/t/25b6"}" 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="{"playable":{"json_path":"/t/243l.json","path":"/t/243l"}}" 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="{"json_path":"/t/243l.json","path":"/t/243l"}" 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="{"playable":{"json_path":"/t/1Z2Y.json","path":"/t/1Z2Y"}}" 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="{"json_path":"/t/1Z2Y.json","path":"/t/1Z2Y"}" 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="{"playable":{"json_path":"/t/24Es.json","path":"/t/24Es"}}" 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="{"json_path":"/t/24Es.json","path":"/t/24Es"}" 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&order=age&radio_ids%5B%5D=107999&radio_ids%5B%5D=101720&radio_ids%5B%5D=116019&radio_ids%5B%5D=19504&radio_ids%5B%5D=12259&radio_ids%5B%5D=118124&radio_ids%5B%5D=109700&radio_ids%5B%5D=101242&radio_ids%5B%5D=127683&radio_ids%5B%5D=108319&radio_ids%5B%5D=121069&radio_ids%5B%5D=19505&radio_ids%5B%5D=107212&radio_ids%5B%5D=131352&radio_ids%5B%5D=104094&radio_ids%5B%5D=102123&radio_ids%5B%5D=107177&radio_ids%5B%5D=108308&radio_ids%5B%5D=102124&radio_ids%5B%5D=107218&radio_ids%5B%5D=108986&radio_ids%5B%5D=48697&radio_ids%5B%5D=117336&radio_ids%5B%5D=109323&radio_ids%5B%5D=47173&radio_ids%5B%5D=115052&radio_ids%5B%5D=101563&radio_ids%5B%5D=12261&radio_ids%5B%5D=102962&radio_ids%5B%5D=32974&radio_ids%5B%5D=131558&radio_ids%5B%5D=12262&radio_ids%5B%5D=107585&radio_ids%5B%5D=114671&radio_ids%5B%5D=12260&radio_ids%5B%5D=109376&radio_ids%5B%5D=50236&radio_ids%5B%5D=123455&radio_ids%5B%5D=127797&radio_ids%5B%5D=102781&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="{"playable":{"json_path":"/p/1206mb.json","path":"/p/1206mb"}}" 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="{"json_path":"/p/1206mb.json","path":"/p/1206mb"}" 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="{"playable":{"json_path":"/p/1206m7.json","path":"/p/1206m7"}}" 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="{"json_path":"/p/1206m7.json","path":"/p/1206m7"}" 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="{"playable":{"json_path":"/p/1206m9.json","path":"/p/1206m9"}}" 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="{"json_path":"/p/1206m9.json","path":"/p/1206m9"}" 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="{"playable":{"json_path":"/p/1206m5.json","path":"/p/1206m5"}}" 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="{"json_path":"/p/1206m5.json","path":"/p/1206m5"}" 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="{"playable":{"json_path":"/p/1206m4.json","path":"/p/1206m4"}}" 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="{"json_path":"/p/1206m4.json","path":"/p/1206m4"}" 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="{"playable":{"json_path":"/p/1206lV.json","path":"/p/1206lV"}}" 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="{"json_path":"/p/1206lV.json","path":"/p/1206lV"}" 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&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&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&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'n'Blues, Country, Pop & 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'n'Blues, Country, Pop & 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 & 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'harmonica peut exprimer son énergie / Rock, folk, tutti i generi musicali in cui l'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 & 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'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'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'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&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'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'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&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 & 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>© 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"> </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> <span class="light text-[rgba(255, 255, 255, 0.6)] flex">/ <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.