project section update

src/components/styles/Projects.styled.ts

@@ -7,16 +7,28 @@ export const StyledProjects = styled.section`
     margin-top: 3em;
   }
 
-  .projects-grid {
+  .showcase-container {
     display: flex;
     flex-direction: column;
-    gap: 2rem;
+    gap: 2em;
+  }
+
+  .other-projects-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2em;
   }
 
   .project-card {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 3.5em;
+    background-color: ${({ theme }) => theme.colors['600']};
+    padding: 0.75em;
+    border-radius: 1em;
+
+    &.showcase {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 3.5em;
+    }
 
     .project-thumbnail img,
     .project-badges img {
@@ -40,8 +52,17 @@ export const StyledProjects = styled.section`
     margin: 0.5em 0;
   }
 
-  h2.project-title {
-    color: ${({ theme }) => theme.colors.accent};
+  .project-title {
+    display: flex;
+    gap: 0.5em;
+
+    h2 {
+      display: inline;
+    }
+
+    img.project-title-icon {
+      max-width: 2em;
+    }
   }
 
   h3.project-subtitle {