@ozdao/martyrs 0.2.570 → 0.2.572

package/src/modules/music/components/cards/PlaylistCard.vue

@@ -9,10 +9,10 @@
         :url="playlist.coverUrl || '/logo/logo-placeholder.jpg'" 
         class="w-100 aspect-1x1 object-fit-cover"
       />
-      <div v-if="playlist.tracks && playlist.tracks.length > 0" class="playlist-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out">
+      <div v-if="playlist.tracks && playlist.tracks.length > 0" class="playlist-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex ease-cubic-in-out">
         <Button 
           @click.stop.prevent="playPlaylist(playlist)" 
-          class="play-button bg-main radius-round flex-center flex aspect-1x1"
+          class="play-button bg-main radius-extra flex-center flex aspect-1x1"
           :showLoader="false"
           :showSucces="false"
         >
@@ -21,8 +21,8 @@
       </div>
     </div>
     <div class="playlist-info pd-small bg-light">
-      <h3 class=" t-medium mn-b-small t-truncate">{{ playlist.title }}</h3>
-      <p class="t-transp t-small t-truncate">{{ playlistInfo }}</p>
+      <h3 class=" fw-medium mn-b-small truncate">{{ playlist.title }}</h3>
+      <p class="t-transp t-small truncate">{{ playlistInfo }}</p>
     </div>
   </router-link>
 </template>

package/src/modules/music/components/cards/TrackListCard.vue

@@ -1,7 +1,7 @@
 <!-- components/cards/TrackListCard.vue -->
 <template>
   <div 
-    class="track-item pd-small hover-bg-white-transp-25 flex-v-center flex cursor-pointer"
+    class="track-item pd-small hover:bg-white-transp-25 flex-v-center flex cursor-pointer"
     :class="{'bg-main-transp-10': isPlaying(track)}"
     @click="playTrack(track)"
     @dblclick="playTrack(track, true)"
@@ -43,7 +43,7 @@
           <router-link
             v-if="track.url"
             :to="'/music/tracks/' + track.url"
-            class="hover-t-main hover-t-underline"
+            class="hover:t-main hover:underline"
             :class="{'t-main': isPlaying(track)}"
             @click.stop
           >
@@ -55,7 +55,7 @@
           <router-link
             v-if="track.artist && track.artist._id"
             :to="'/music/artists/' + track.artist.url"
-            class="t-transp hover-t-underline"
+            class="t-transp hover:underline"
             @click.stop
           >
             {{ getArtistName(track) }}
@@ -65,11 +65,11 @@
       </div>
     </div>
     
-    <div v-if="showAlbum" class="track-album  w-15r mobile:w-0 mobile:hidden t-transp t-truncate">
+    <div v-if="showAlbum" class="track-album  w-15r mobile:w-0 mobile:hidden t-transp truncate">
       <router-link
         v-if="track.album && track.album._id"
         :to="'/music/albums/' + track.album.url"
-        class="t-transp hover-t-underline"
+        class="t-transp hover:underline"
         @click.stop
       >
         {{ track.album.title }}

package/src/modules/music/components/forms/AlbumForm.vue

@@ -99,16 +99,16 @@
           classSearch="bg-white radius-small"
           classSelected="bg-white pd-small radius-small"
           classDropdown="bg-white pd-small radius-medium bs-small"
-          classItem="pd-small radius-small hover-bg-light cursor-pointer"
+          classItem="pd-small radius-small hover:bg-light cursor-pointer"
           classFeed="h-max-30r gap-thin flex-column flex o-scroll"
         >
           <!-- Слот для выбранных артистов -->
           <template #selected="{ item, clear }">
             <div class="flex-nowrap flex-v-center flex gap-thin">
-              <span class="t-medium">{{ item?.name || item }}</span>
+              <span class="fw-medium">{{ item?.name || item }}</span>
               <button 
                 @click.stop="clear"
-                class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
               >
                 <IconCross class="i-micro fill-white" />
               </button>
@@ -119,7 +119,7 @@
           <template #item="{ item }">
             <div class="flex-nowrap flex-v-center flex">
               <div class="w-100">
-                <p class="t-medium">{{ item.name }}</p>
+                <p class="fw-medium">{{ item.name }}</p>
                 <p v-if="item.bio" class="t-small t-transp">{{ item.bio }}</p>
               </div>
             </div>
@@ -163,16 +163,16 @@
           classSearch="bg-white radius-small"
           classSelected="bg-white pd-small radius-small"
           classDropdown="bg-white pd-small radius-medium bs-small"
-          classItem="pd-small radius-small hover-bg-light cursor-pointer"
+          classItem="pd-small radius-small hover:bg-light cursor-pointer"
           classFeed="h-max-30r gap-thin flex-column flex o-scroll"
         >
           <!-- Слот для выбранных жанров -->
           <template #selected="{ item, clear }">
             <div class="flex-nowrap flex-v-center flex gap-thin">
-              <span class="t-medium">{{ item?.name || item }}</span>
+              <span class="fw-medium">{{ item?.name || item }}</span>
               <button 
                 @click.stop="clear"
-                class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
               >
                 <IconCross class="i-micro fill-white" />
               </button>
@@ -183,7 +183,7 @@
           <template #item="{ item }">
             <div class="flex-nowrap flex-v-center flex">
               <div class="w-100">
-                <p class="t-medium">{{ item.name }}</p>
+                <p class="fw-medium">{{ item.name }}</p>
                 <p v-if="item.description" class="t-small t-transp">{{ item.description }}</p>
               </div>
             </div>

package/src/modules/music/components/forms/ArtistForm.vue

@@ -151,16 +151,16 @@
           classSearch="bg-white radius-small"
           classSelected="bg-white pd-small radius-small"
           classDropdown="bg-white pd-small radius-medium bs-small"
-          classItem="pd-small radius-small hover-bg-light cursor-pointer"
+          classItem="pd-small radius-small hover:bg-light cursor-pointer"
           classFeed="h-max-30r gap-thin flex-column flex o-scroll"
         >
           <!-- Слот для выбранных жанров -->
           <template #selected="{ item, clear }">
             <div class="flex-nowrap flex-v-center flex gap-thin">
-              <span class="t-medium">{{ item?.name || item }}</span>
+              <span class="fw-medium">{{ item?.name || item }}</span>
               <button 
                 @click.stop="clear"
-                class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
               >
                 <IconCross class="i-micro fill-white" />
               </button>
@@ -171,7 +171,7 @@
           <template #item="{ item }">
             <div class="flex-nowrap flex-v-center flex">
               <div class="w-100">
-                <p class="t-medium">{{ item.name }}</p>
+                <p class="fw-medium">{{ item.name }}</p>
                 <p v-if="item.description" class="t-small t-transp">{{ item.description }}</p>
               </div>
             </div>

package/src/modules/music/components/forms/PlaylistForm.vue

@@ -88,7 +88,7 @@
           classSearch="bg-white radius-small"
           classSelected="bg-white pd-small radius-small"
           classDropdown="bg-white pd-small radius-medium bs-small"
-          classItem="pd-small radius-small hover-bg-light cursor-pointer"
+          classItem="pd-small radius-small hover:bg-light cursor-pointer"
           classFeed="h-max-30r gap-thin flex-column flex o-scroll"
         >
           <!-- Selected tracks with reorder support -->
@@ -98,7 +98,7 @@
                 v-if="playlist.tracks.length > 1"
                 @click.stop="moveTrack(index, 'up')"
                 :disabled="index === 0"
-                class="i-small pd-micro bg-grey-nano radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                class="i-small pd-micro bg-grey-nano radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
               >
                 <IconArrowUp class="i-micro" />
               </button>
@@ -107,13 +107,13 @@
                 v-if="playlist.tracks.length > 1"
                 @click.stop="moveTrack(index, 'down')"
                 :disabled="index === playlist.tracks.length - 1"
-                class="i-small pd-micro bg-grey-nano radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                class="i-small pd-micro bg-grey-nano radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
               >
                 <IconArrowDown class="i-micro" />
               </button>
               
-              <div class="flex-1">
-                <p class="t-medium">{{ item.title }}</p>
+              <div class="flex-child-1">
+                <p class="fw-medium">{{ item.title }}</p>
                 <p class="t-small t-transp">
                   {{ item.artists?.map(a => a.name || a).join(', ') }}
                   <span v-if="item.album"> • {{ item.album.title || item.album }}</span>
@@ -126,7 +126,7 @@
               
               <button 
                 @click.stop="clear"
-                class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
               >
                 <IconCross class="i-micro fill-white" />
               </button>
@@ -137,7 +137,7 @@
           <template #item="{ item }">
             <div class="flex-nowrap flex-v-center flex">
               <div class="w-100">
-                <p class="t-medium">{{ item.title }}</p>
+                <p class="fw-medium">{{ item.title }}</p>
                 <p class="t-small t-transp">
                   {{ item.artists?.map(a => a.name || a).join(', ') }}
                   <span v-if="item.album"> • {{ item.album.title || item.album }}</span>

package/src/modules/music/components/forms/SearchForm.vue

@@ -7,7 +7,7 @@
       v-model="searchQuery"
       type="text"
       :placeholder="placeholder"
-      class="bg-transparent border-none  flex-1"
+      class="bg-transparent border-none  flex-child-1"
       @keydown.enter="handleSearch"
     />
     <Button 

package/src/modules/music/components/forms/TrackForm.vue

@@ -8,7 +8,7 @@
       <div class="bg-light pd-medium radius-medium">
         <h3 class="h3 mn-b-medium">Media</h3>
         
-        <div class="cols-2-fit-content mobile:cols-1 gap-regular">
+        <div class="cols-[fit-content(100%)_1fr] mobile:cols-1 gap-regular">
           <!-- Track Cover -->
           <div>
             <p class="p-medium mn-b-small">Cover Image</p>
@@ -115,16 +115,16 @@
             classSearch="bg-white radius-small"
             classSelected="bg-white pd-small radius-small"
             classDropdown="bg-white pd-small radius-medium bs-small"
-            classItem="pd-small radius-small hover-bg-light cursor-pointer"
+            classItem="pd-small radius-small hover:bg-light cursor-pointer"
             classFeed="h-max-30r gap-thin flex-column flex o-scroll"
           >
             <!-- Selected artist slot -->
             <template #selected="{ item, clear }">
               <div class="flex-nowrap flex-v-center flex gap-thin">
-                <span class="t-medium">{{ item?.name || item }}</span>
+                <span class="fw-medium">{{ item?.name || item }}</span>
                 <button 
                   @click.stop="clear"
-                  class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                  class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
                 >
                   <IconCross class="i-micro fill-white" />
                 </button>
@@ -135,7 +135,7 @@
             <template #item="{ item }">
               <div class="flex-nowrap flex-v-center flex">
                 <div class="w-100">
-                  <p class="t-medium">{{ item.name }}</p>
+                  <p class="fw-medium">{{ item.name }}</p>
                   <p v-if="item.bio" class="t-small t-transp">{{ item.bio }}</p>
                 </div>
               </div>
@@ -179,16 +179,16 @@
             classSearch="bg-white radius-small"
             classSelected="bg-white pd-small radius-small"
             classDropdown="bg-white pd-small radius-medium bs-small"
-            classItem="pd-small radius-small hover-bg-light cursor-pointer"
+            classItem="pd-small radius-small hover:bg-light cursor-pointer"
             classFeed="h-max-30r gap-thin flex-column flex o-scroll"
           >
             <!-- Selected album slot -->
             <template #selected="{ item, clear }">
               <div class="flex-nowrap flex-v-center flex gap-thin">
-                <span class="t-medium">{{ item?.title || item }}</span>
+                <span class="fw-medium">{{ item?.title || item }}</span>
                 <button 
                   @click.stop="clear"
-                  class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                  class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
                 >
                   <IconCross class="i-micro fill-white" />
                 </button>
@@ -199,7 +199,7 @@
             <template #item="{ item }">
               <div class="flex-nowrap flex-v-center flex">
                 <div class="w-100">
-                  <p class="t-medium">{{ item.title }}</p>
+                  <p class="fw-medium">{{ item.title }}</p>
                   <p v-if="item.description" class="t-small t-transp">{{ item.description }}</p>
                 </div>
               </div>
@@ -243,16 +243,16 @@
           classSearch="bg-white radius-small"
           classSelected="bg-white pd-small radius-small"
           classDropdown="bg-white pd-small radius-medium bs-small"
-          classItem="pd-small radius-small hover-bg-light cursor-pointer"
+          classItem="pd-small radius-small hover:bg-light cursor-pointer"
           classFeed="h-max-30r gap-thin flex-column flex o-scroll"
         >
           <!-- Selected genres slot -->
           <template #selected="{ item, clear }">
             <div class="flex-nowrap flex-v-center flex gap-thin">
-              <span class="t-medium">{{ item?.name || item }}</span>
+              <span class="fw-medium">{{ item?.name || item }}</span>
               <button 
                 @click.stop="clear"
-                class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
               >
                 <IconCross class="i-micro fill-white" />
               </button>
@@ -263,7 +263,7 @@
           <template #item="{ item }">
             <div class="flex-nowrap flex-v-center flex">
               <div class="w-100">
-                <p class="t-medium">{{ item.name }}</p>
+                <p class="fw-medium">{{ item.name }}</p>
                 <p v-if="item.description" class="t-small t-transp">{{ item.description }}</p>
               </div>
             </div>

package/src/modules/music/components/pages/Album.vue

@@ -9,7 +9,7 @@
     <!-- Not Found -->
     <div v-if="hasLoaded && !album" class="t-center pd-big">
       <h2 class="">Album not found</h2>
-      <p class="t-transp t-medium">The album you're looking for doesn't exist or has been removed.</p>
+      <p class="t-transp fw-medium">The album you're looking for doesn't exist or has been removed.</p>
     </div>
     
     <!-- Album Content -->
@@ -23,7 +23,7 @@
           class="aspect-1x1 w-100  mn-b-small radius-medium o-hidden"
         />
         <!-- Quick Stats -->
-        <div class="stats-grid grid cols-2 gap-small">
+        <div class="stats-grid d-grid cols-2 mobile:cols-1 gap-small">
           <div class="stat-card bg-light pd-medium radius-medium t-center">
             <div class=" mn-b-thin">{{ album.totalTracks || 0 }}</div>
             <div class="t-small t-transp t-uppercase">Tracks</div>
@@ -39,10 +39,10 @@
       <div class="album-details-section">
         <!-- Album Type Badge -->
         <div class="flex items-center gap-small mn-b-small">
-          <span class="bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase">
+          <span class="bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase">
             {{ album.type }}
           </span>
-          <span v-if="album.status === 'published'" class="bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase">
+          <span v-if="album.status === 'published'" class="bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase">
             Published
           </span>
         </div>
@@ -55,7 +55,7 @@
 
         <!-- Artists Cards -->
         <div class="artists-section mn-b-medium">
-          <h3 class="t-medium mn-b-small" v-if="album.artists">Artists</h3>
+          <h3 class="fw-medium mn-b-small" v-if="album.artists">Artists</h3>
           <div class="flex flex-column gap-small">
             <ArtistCardSmall 
               v-for="artist in album.artists" 
@@ -69,60 +69,60 @@
         </div>
 
         <!-- Metadata Cards -->
-        <h3 class="t-medium mn-b-small">Metadata</h3>
-        <div class="metadata-grid grid cols-2 gap-small mn-b-medium">
+        <h3 class="fw-medium mn-b-small">Metadata</h3>
+        <div class="metadata-grid d-grid cols-2 mobile:cols-1 gap-small mn-b-medium">
           <!-- Release Date -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
-            <IconCalendar class="i-medium t-primary" />
+            <IconCalendar class="i-medium t-main" />
             <div>
               <div class="t-small t-transp t-uppercase">Released</div>
-              <div class="t-medium ">{{ formatDate(album.releaseDate) }}</div>
+              <div class="fw-medium ">{{ formatDate(album.releaseDate) }}</div>
             </div>
           </div>
 
           <!-- Total Duration -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
-            <IconClock class="i-medium t-primary" />
+            <IconClock class="i-medium t-main" />
             <div>
               <div class="t-small t-transp t-uppercase">Duration</div>
-              <div class="t-medium ">{{ totalDuration }}</div>
+              <div class="fw-medium ">{{ totalDuration }}</div>
             </div>
           </div>
 
           <!-- Label -->
           <div v-if="album.label" class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
-            <IconDisc class="i-medium t-primary" />
+            <IconDisc class="i-medium t-main" />
             <div>
               <div class="t-small t-transp t-uppercase">Label</div>
-              <div class="t-medium ">{{ album.label }}</div>
+              <div class="fw-medium ">{{ album.label }}</div>
             </div>
           </div>
 
           <!-- Visibility -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
-            <IconEye class="i-medium t-primary" />
+            <IconEye class="i-medium t-main" />
             <div>
               <div class="t-small t-transp t-uppercase">Visibility</div>
-              <div class="t-medium ">{{ album.isPublic ? 'Public' : 'Private' }}</div>
+              <div class="fw-medium ">{{ album.isPublic ? 'Public' : 'Private' }}</div>
             </div>
           </div>
         </div>
 
         <!-- Genres & Tags -->
         <div v-if="(album.genres && album.genres.length) || (album.tags && album.tags.length)" class="tags-section mn-b-medium">
-          <h3 class="t-medium mn-b-small">Genres & Tags</h3>
+          <h3 class="fw-medium mn-b-small">Genres & Tags</h3>
           <div class="flex gap-thin flex-wrap">
             <span 
               v-for="genre in album.genres" 
               :key="genre"
-              class="tag bg-main t-medium pd-thin radius-thin t-small cursor-pointer"
+              class="tag bg-main fw-medium pd-thin radius-thin t-small cursor-pointer"
             >
               {{ genre }}
             </span>
             <span 
               v-for="tag in album.tags" 
               :key="tag"
-              class="tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer"
+              class="tag bg-light t-transp pd-thin-big radius-small t-small hover:bg-light cursor-pointer"
             >
               #{{ tag }}
             </span>
@@ -171,15 +171,15 @@
         <router-link 
           v-if="album.artists && album.artists[0]"
           :to="{ name: 'artist', params: { url: album.artists[0].url } }" 
-          class="t-primary hover-opacity"
+          class="t-main hover:opacity-70"
         >
           See all
         </router-link>
       </div>
-      <div  class="flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide"
+      <div  class="flex flex-nowrap gap-small o-x-scroll overscroll-x-contain scroll-smooth scroll-snap-x-mandatory scroll-hide"
       >
-        <li v-for="relatedAlbum in moreAlbums"  :key="album._id" class="flex-none scroll-snap-align-start">
-          <AlbumCard :album="relatedAlbum" class="w-15r transition-cubic-in-out" />
+        <li v-for="relatedAlbum in moreAlbums"  :key="album._id" class="flex-none scroll-snap-start">
+          <AlbumCard :album="relatedAlbum" class="w-15r ease-cubic-in-out" />
         </li>
       </div>
     </section>

package/src/modules/music/components/pages/Artist.vue

@@ -25,7 +25,7 @@
         <div class="pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small" :class="artist.coverUrl ? 'bg-black-transp-50' : 'bg-dark'"></div>
         
         <!-- Artist actions for edit/manage -->
-        <div v-if="isOwner" class="pos-absolute pos-t-medium pos-r-medium z-index-1">
+        <div v-if="isOwner" class="pos-absolute pos-t-small pos-r-small z-index-1">
           <Button
             @click="router.push({ name: 'artist-edit', params: { url: artist.url } })"
             class="bg-main  mn-r-small"
@@ -122,7 +122,7 @@
       
       <!-- Main content -->
       <div class="pd-medium">
-        <div class="cols-2-1_2 gap-regular mobile:cols-1">
+        <div class="cols-[1fr_2fr] gap-regular mobile:cols-1">
           <!-- Left column - Bio and details -->
           <div>
             <div class="bg-light pd-medium radius-medium mn-b-medium">
@@ -156,7 +156,7 @@
                 <div
                   v-for="album in discography.albums"
                   :key="album._id"
-                  class="bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white"
+                  class="bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover:bg-white"
                   @click="router.push({ name: 'album', params: { url: album.url } })"
                 >
                   <div class="w-3r h-3r radius-small o-hidden mn-r-small">
@@ -172,7 +172,7 @@
                   </div>
                   
                   <div class="w-100 o-hidden">
-                    <p class="p-regular t-truncate">{{ album.title }}</p>
+                    <p class="p-regular truncate">{{ album.title }}</p>
                     <p class="p-small t-transp">{{ formatDate(album.releaseDate) }}</p>
                   </div>
                 </div>
@@ -197,7 +197,7 @@
                 <div
                   v-for="single in discography.singles"
                   :key="single._id"
-                  class="bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white"
+                  class="bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover:bg-white"
                   @click="router.push({ name: 'track', params: { url: single.url } })"
                 >
                   <div class="w-3r h-3r radius-small o-hidden mn-r-small">
@@ -213,7 +213,7 @@
                   </div>
                   
                   <div class="w-100 o-hidden">
-                    <p class="p-regular t-truncate">{{ single.title }}</p>
+                    <p class="p-regular truncate">{{ single.title }}</p>
                     <p class="p-small t-transp">{{ formatDate(single.releaseDate) }}</p>
                   </div>
                 </div>
@@ -290,7 +290,7 @@
                 </div>
               </div>
               
-              <p class="p-regular t-truncate">{{ relatedArtist.name }}</p>
+              <p class="p-regular truncate">{{ relatedArtist.name }}</p>
             </div>
           </div>
         </div>

package/src/modules/music/components/pages/MusicHome.vue

@@ -5,9 +5,9 @@
     
     <!-- New Releases Section -->
     <section class="mn-b-semi">
-      <div class="flex-between flex mn-b-small">
+      <div class="flex-justify-between flex mn-b-small">
         <h3 class="">New Releases</h3>
-        <!-- <router-link :to="{ path: '/music/albums' }" class="t-main t-small hover-opacity">See all</router-link> -->
+        <!-- <router-link :to="{ path: '/music/albums' }" class="t-main t-small hover:opacity-70">See all</router-link> -->
       </div>
       
       <Feed
@@ -38,10 +38,10 @@
           class: 'h-max-15r'
         }"
         v-slot="{ items }"
-        class="flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide"
+        class="flex flex-nowrap gap-small o-x-scroll overscroll-x-contain scroll-smooth scroll-snap-x-mandatory scroll-hide"
       >
-          <li v-for="album in items" :key="album._id" class="flex-none scroll-snap-align-start">
-            <AlbumCard :album="album" class="w-15r transition-cubic-in-out" />
+          <li v-for="album in items" :key="album._id" class="flex-none scroll-snap-start">
+            <AlbumCard :album="album" class="w-15r ease-cubic-in-out" />
           </li>
 
       </Feed>
@@ -49,9 +49,9 @@
     
     <!-- Popular Tracks Section -->
     <section class="mn-b-medium">
-      <div class="flex-between flex mn-b-small">
+      <div class="flex-justify-between flex mn-b-small">
         <h3 class="">Popular Tracks</h3>
-        <!-- <router-link :to="{ path: '/music/tracks' }" class="t-main t-small hover-opacity">See all</router-link> -->
+        <!-- <router-link :to="{ path: '/music/tracks' }" class="t-main t-small hover:opacity-70">See all</router-link> -->
       </div>
       
       <Feed
@@ -96,9 +96,9 @@
 
     <!-- Featured Playlists Section -->
     <section class="mn-b-medium">
-      <div class="flex-between flex mn-b-small">
+      <div class="flex-justify-between flex mn-b-small">
         <h2 class="">Featured Playlists</h2>
-        <!-- <router-link :to="{ path: '/music/playlists' }" class="t-main t-small hover-opacity">See all</router-link> -->
+        <!-- <router-link :to="{ path: '/music/playlists' }" class="t-main t-small hover:opacity-70">See all</router-link> -->
       </div>
       
       <Feed
@@ -130,16 +130,16 @@
         class="cols-5 mobile:cols-2 gap-small"
       >
         <li v-for="playlist in items" :key="playlist._id">
-          <PlaylistCard :playlist="playlist" class="hover-scale-1 transition-cubic-in-out" />
+          <PlaylistCard :playlist="playlist" class="hover:scale-[1.05] ease-cubic-in-out" />
         </li>
       </Feed>
     </section>
     
     <!-- Top Artists Section -->
     <section>
-      <div class="flex-between flex mn-b-small">
+      <div class="flex-justify-between flex mn-b-small">
         <h2 class="">Top Artists</h2>
-        <!-- <router-link :to="{ path: '/music/artists' }" class="t-main t-small hover-opacity">See all</router-link> -->
+        <!-- <router-link :to="{ path: '/music/artists' }" class="t-main t-small hover:opacity-70">See all</router-link> -->
       </div>
       
       <Feed
@@ -169,7 +169,7 @@
         v-slot="{ items }"
         class="cols-6 mobile:cols-3 gap-small"
       >
-        <ArtistCard v-for="artist in items" :key="artist._id" :artist="artist" class="hover-scale-1 transition-cubic-in-out" />
+        <ArtistCard v-for="artist in items" :key="artist._id" :artist="artist" class="hover:scale-[1.05] ease-cubic-in-out" />
       </Feed>
     </section>
   </div>
@@ -190,8 +190,3 @@ import { state as tracksState, actions as tracksActions } from '../../store/trac
 import { state as artistsState, actions as artistsActions } from '../../store/artists.js';
 </script>
 
-<style scoped>
-.bg-gradient-dark {
-  background: linear-gradient(to bottom, rgba(var(--dark), 0.8), rgba(var(--black), 0.9));
-}
-</style>