Added "Open in new tab" icon

components/styles/cards/mobile.tsx

@@ -16,6 +16,7 @@ const Card = styled.div`
   flex-direction: column;
   align-items: center;
   width: 30rem;
+  max-width: 90%;
   min-height: 10rem;
   max-height: 15rem;
   margin-bottom: 2rem;
@@ -58,6 +59,16 @@ const CardTitleIcon = styled.div`
   height: 1.5rem;
 `;
 
+const OpenInNewTab = styled.div`
+  filter: invert();
+  position: relative;
+  object-fit: contain;
+  margin: 0.3rem;
+  margin-left: 0.5rem;
+  aspect-ratio: 1;
+  height: 1.2rem;
+`
+
 const CardTitleIconMirror = styled.div`
   height: 1.5rem;
   aspect-ratio: 1;
@@ -155,7 +166,9 @@ const CardTitle = ({ content, href }: { content: Service, href: string }) => {
           <CardTitleText>{content.name}</CardTitleText>
           {
           content.icon ? (
-            <CardTitleIconMirror />
+            <OpenInNewTab>
+              <Image alt="open" src={"/icons/open-new-window.svg"} fill />
+            </OpenInNewTab>
           ) : (<></>)
           }
         </CardTitleLink>

public/icons/open-new-window.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M21 3h-6m6 0l-9 9m9-9v6" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h6" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path></svg>