tailwind classes for media grid

packages/app/src/Pages/Deck.css

@@ -37,21 +37,6 @@
   overflow-y: scroll;
 }
 
-.image-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 4px;
-}
-
-.image-grid > .media-note {
-  border: 1px solid var(--border-color);
-  background-image: var(--img);
-  background-position: center;
-  background-size: cover;
-  aspect-ratio: 1;
-  cursor: pointer;
-}
-
 .modal.thread-overlay > .modal-body {
   background-color: unset;
   padding: 0;

packages/app/src/Pages/DeckLayout.tsx

@@ -162,11 +162,11 @@ function MediaCol({ setThread }: { setThread: (e: NostrLink) => void }) {
   const { proxy } = useImgProxy();
   return (
     <div>
-      <div className="deck-col-header flex g8">
+      <div className="flex items-center gap-2 p-2 border-b border-gray-300">
         <Icon name="camera-lens" size={24} />
         <FormattedMessage defaultMessage="Media" id="hmZ3Bz" />
       </div>
-      <div className="image-grid p">
+      <div className="grid grid-cols-3 gap-px p-1">
         <TimelineFollows
           postsOnly={true}
           liveStreams={false}
@@ -181,13 +181,9 @@ function MediaCol({ setThread }: { setThread: (e: NostrLink) => void }) {
 
             return (
               <div
-                className="media-note"
+                className="aspect-square bg-center bg-cover cursor-pointer"
                 key={e.id}
-                style={
-                  {
-                    "--img": `url(${proxy(images[0].content)})`,
-                  } as CSSProperties
-                }
+                style={{ backgroundImage: `url(${proxy(images[0].content)})` }}
                 onClick={() => setThread(NostrLink.fromEvent(e))}></div>
             );
           }}