Expand portfolio exhibits and integrate branding

style.css

@@ -391,6 +391,28 @@ h1 {
   border-radius: 3px;
 }
 
+.logo-divider {
+  width: min(calc(100% - 48px), var(--max));
+  height: 280px;
+  margin: 0 auto;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  border-bottom: 1px solid var(--line);
+  background:
+    radial-gradient(circle, rgba(88, 166, 255, 0.08), transparent 45%),
+    #080a0d;
+}
+
+.logo-divider img {
+  width: 420px;
+  height: 420px;
+  object-fit: cover;
+  object-position: center 28%;
+  opacity: 0.72;
+  mix-blend-mode: screen;
+}
+
 .principles {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -516,13 +538,42 @@ footer p {
 .story-images {
   grid-column: 1 / -1;
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 24px;
+  grid-template-columns: 1fr;
+  gap: 64px;
   min-width: 0;
   align-items: start;
 }
 
-.story-images img:hover {
+.screenshot-exhibit {
+  margin: 0;
+  padding-top: 24px;
+  border-top: 1px solid var(--line);
+}
+
+.screenshot-exhibit figcaption {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 24px;
+  margin-bottom: 16px;
+}
+
+.screenshot-exhibit figcaption span {
+  font-size: 1.18rem;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.screenshot-exhibit figcaption small {
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.screenshot-exhibit a {
+  display: block;
+}
+
+.screenshot-exhibit a:hover img {
   box-shadow: 0 8px 24px rgba(88, 166, 255, 0.1);
 }
 
@@ -538,8 +589,8 @@ footer p {
   transition: box-shadow 300ms ease;
 }
 
-.story-images img:only-child {
-  grid-column: auto;
+.story-images .crowdsec-capture {
+  filter: none;
 }
 
 .lesson-list {
@@ -771,18 +822,38 @@ footer p {
     margin-top: 38px;
   }
 
+  .logo-divider {
+    width: calc(100% - 32px);
+    height: 210px;
+  }
+
+  .logo-divider img {
+    width: 300px;
+    height: 300px;
+  }
+
   .system-story {
     padding: 54px 0;
   }
 
   .story-images {
     grid-template-columns: 1fr;
+    gap: 44px;
   }
 
   .story-images img {
     height: auto;
   }
 
+  .screenshot-exhibit figcaption {
+    display: block;
+  }
+
+  .screenshot-exhibit figcaption small {
+    display: block;
+    margin-top: 4px;
+  }
+
   .lesson-list article {
     grid-template-columns: 40px 1fr;
     gap: 14px;