chore: concert colors

src/pages/music/artists/[slug].astro

@@ -117,7 +117,7 @@ const playLabel = artist.total_plays === 1 ? "play" : "plays";
           <div id="concerts" class="concerts media-title">
             <div set:html={IconDeviceSpeaker({ size: 18 })}/> I've seen this artist live!
           </div>
-          <ul>
+          <ul class="concerts">
             {artist.concerts.map((concert, index) => (
               <li key={index}>
                 On{" "}

src/pages/music/concerts/[...page].astro

@@ -53,7 +53,7 @@ const description =
     </>
   )}
 
-  <ul class="concert-list">
+  <ul class="concerts concert-list">
     {paginatedConcerts.map((concert) => (
       <li>
         {concert.artist.url ? (

src/styles/components/modal.css

@@ -54,7 +54,7 @@
   vertical-align: middle;
 
   svg {
-    stroke: var(--accent-color);
+    stroke: var(var(--section-color), var(--accent-color));
 
     &:is(:hover, :focus, :active) {
       stroke: var(--accent-color-hover);