Update index.html

Author: JCinnamon

index.html

@@ -418,6 +418,96 @@
       color: var(--accent);
       letter-spacing: 0.01em;
     }
+    /* Tools grid — 3 columns, 4th card centred below */
+.tools-grid {
+  display: grid !important;
+  grid-template-columns: repeat(3, 1fr) !important;
+  gap: 1.5rem;
+  margin-top: 1.75rem;
+}
+ 
+/* 4th card spans full width but stays card-sized and centred */
+.tools-grid a.tool-card:last-child {
+  grid-column: 1 / -1;
+  max-width: calc(33.333% - 0.5rem);
+  margin: 0 auto;
+}
+ 
+@media (max-width: 860px) {
+  .tools-grid { grid-template-columns: repeat(2, 1fr) !important; }
+  .tools-grid a.tool-card:last-child { grid-column: auto; max-width: none; margin: 0; }
+}
+@media (max-width: 560px) {
+  .tools-grid { grid-template-columns: 1fr !important; }
+}
+ 
+/* Card */
+a.tool-card {
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border: 1px solid #dde8ed;
+  border-radius: 10px;
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
+}
+a.tool-card:hover {
+  box-shadow: 0 6px 22px rgba(44, 95, 122, 0.13);
+  transform: translateY(-2px);
+  border-color: #b0ccd8;
+}
+ 
+/* Screenshot thumbnail */
+.tool-card-thumb {
+  width: 100%;
+  height: 190px;
+  overflow: hidden;
+  background: #f0f5f8;
+  flex-shrink: 0;
+}
+.tool-card-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top center;
+  display: block;
+  transition: transform 0.3s ease;
+}
+a.tool-card:hover .tool-card-thumb img {
+  transform: scale(1.03);
+}
+ 
+/* Card body */
+.tool-card-body {
+  padding: 1.1rem 1.25rem 1.15rem;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.tool-card-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1e4260;
+  margin: 0 0 0.45rem;
+  line-height: 1.3;
+}
+.tool-card-desc {
+  font-size: 0.875rem;
+  color: #6b7a8d;
+  line-height: 1.55;
+  margin: 0 0 0.9rem;
+  flex: 1;
+}
+.tool-card-link {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #1a9080;
+}
+a.tool-card:hover .tool-card-link {
+  text-decoration: underline;
+}
 
     /* ── FOOTER ── */
     footer {
@@ -747,7 +837,7 @@ <h2 class="section-label">Teaching</h2>
   <section class="section" id="tools">
     <div class="section-inner">
       <h2 class="section-label">Tools</h2>
-      <p class="tools-intro">Web tools for image analysis and visual geographies research.</p>
+      <p class="tools-intro">Web tools for digital image analysis and visual research.</p>
       <div class="tools-grid">
   <div class="tools-grid">