Bug fix

css/main.css

@@ -168,6 +168,7 @@ article > * {
 }
 #main_header ul a {
   font-weight: 500;
+  font-size: 0.9rem;
 }
 #main_header ul a::after {
   content: "";
@@ -242,13 +243,13 @@ section:nth-of-type(4) p {
 #poc_images {
   display: grid;
   gap: 1vw;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: 1fr 1fr;
 }
 #poc_images .span-2 {
   grid-column: span 2;
 }
 #poc_images img {
-  height: 24vw;
+  height: 24vmax;
   -o-object-fit: cover;
      object-fit: cover;
   border-radius: 0.5rem;
@@ -370,6 +371,9 @@ section:nth-of-type(4) p {
   }
 }
 @media screen and (max-width: 768px) {
+  #poc_images img:nth-of-type(5) {
+    grid-area: 3/2/4/3;
+  }
   .hide-on-small {
     display: none !important;
   }
@@ -382,6 +386,9 @@ section:nth-of-type(4) p {
     opacity: 0.6;
     left: calc(100% - 50vw);
   }
+  #poc_images {
+    grid-template-columns: repeat(4, 1fr);
+  }
   .hide-on-large {
     display: none !important;
   }

css/main.scss

@@ -139,6 +139,7 @@ article {
     gap: 0.8rem;
     a {
       font-weight: 500;
+      font-size: 0.9rem;
       &::after {
         content: "";
         display: block;
@@ -212,12 +213,12 @@ section {
 #poc_images {
   display: grid;
   gap: 1vw;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: 1fr 1fr;
   .span-2 {
     grid-column: span 2;
   }
   img {
-    height: 24vw;
+    height: 24vmax;
     object-fit: cover;
     border-radius: 0.5rem;
     transition: all 0.2s ease;
@@ -322,6 +323,13 @@ section {
 }
 
 @media screen and (max-width: 768px) {
+  #poc_images {
+    img {
+      &:nth-of-type(5) {
+        grid-area: 3/2/4/3;
+      }
+    }
+  }
   .hide-on-small {
     display: none !important;
   }
@@ -334,6 +342,9 @@ section {
     opacity: 0.6;
     left: calc(100% - 50vw);
   }
+  #poc_images {
+    grid-template-columns: repeat(4, 1fr);
+  }
   .hide-on-large {
     display: none !important;
   }

index.html

@@ -206,17 +206,17 @@
         router.addRoute('', () => {
             const teamMembersList = document.getElementById('team_members')
             teamMembers.sort((a, b) => a.name.localeCompare(b.name))
-            teamMembers.forEach(member => {
+            const renderedTeamMembers = teamMembers.map(member => {
                 const { image, name, title } = member
-                const memberItem = document.createElement('li')
-                memberItem.classList.add('team-member')
-                memberItem.innerHTML = `
-                <img src="${image}" alt="${name} profile picture" loading="lazy">
-                <p class="team-member__name">${name},</p>
-                <p class="team-member__title">${title}</p>
+                return html`
+                <li class="team-member">
+                    <img src="${image}" alt=${`${name} profile picture`} loading="lazy">
+                    <p class="team-member__name">${name},</p>
+                    <p class="team-member__title">${title}</p>
+                </li>
                 `
-                teamMembersList.appendChild(memberItem)
             })
+            renderElem(teamMembersList, html`${renderedTeamMembers}`)
             document.getElementById('team_members').addEventListener('click', e => {
 
             })