Updated links and quick look images for new tutorials

Author: bmartin78

intro.md

@@ -35,64 +35,33 @@ Through these Jupyter notebooks, you will:
 
 We have a set of new tutorials waiting and ready to be explored.
 
-<!-- Style: uniform thumbnail size for all cards -->
-<style>
-.sd-card img.sd-card-img-top {
-  max-height: 200px;    /* adjust this value if you want smaller/larger previews */
-  width: 100%;
-  object-fit: cover;     /* keeps proportions and crops cleanly */
-}
-</style>
-
-::::{container}
-::: {grid} 1 3 3 3
-:gutter: 2
-
-::: {grid-item-card} A hands-on notebook exploring precipitation using the GIRAFE dataset <br> (Tutorial)
-:margin: 3 0 0 0
-:link: https://github.com/ecmwf-training/c3s-training-submodule-sat-obs-atmos-physics/blob/main/precipitation-girafe.ipynb
-:link-type: url
-:text-align: center
-:shadow: md
-:img-top: https://raw.githubusercontent.com/ecmwf-training/c3s-training-submodule-sat-obs-atmos-physics/main/precipitation-girafe-QL.png
-
-{bdg-primary}`Climate` {bdg-secondary}`Change`
-<br>
-{bdg-warning}`Service` {bdg-info}`C3S`
-+++
-2025
-:::
-
-::: {grid-item-card} Compute and analyse water-level indicators from the GTSMIP context <br> (Tutorial)
-:margin: 3 0 0 0
-:link: https://github.com/ecmwf-training/c3s-training-submodule-climate-indices/blob/main/gtsmip-water-levels.ipynb
-:link-type: url
-:text-align: center
-:shadow: md
-:img-top: https://raw.githubusercontent.com/ecmwf-training/c3s-training-submodule-climate-indices/main/gtsmip-water-levels-QL.png
-
-{bdg-primary}`Climate` {bdg-secondary}`Change`
-<br>
-{bdg-warning}`Service` {bdg-info}`C3S`
-+++
-2025
-:::
-
-::: {grid-item-card} Derive and visualise a compound climate indicator: warm-and-wet days <br> (Tutorial)
-:margin: 3 0 0 0
-:link: https://github.com/ecmwf-training/c3s-training-submodule-climate-indices/blob/main/warm-and-wet-days-indicator.ipynb
-:link-type: url
-:text-align: center
-:shadow: md
-:img-top: https://raw.githubusercontent.com/ecmwf-training/c3s-training-submodule-climate-indices/main/warm-and-wet-days-indicator-QL.png
-
-{bdg-primary}`Climate` {bdg-secondary}`Change`
-<br>
-{bdg-warning}`Service` {bdg-info}`C3S`
-+++
-2025
-:::
-
-:::
-::::
-:::::
+<div style="display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;">
+
+  <div style="flex: 1 1 300px; max-width: 320px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); overflow: hidden; text-align: center;">
+    <img src="https://raw.githubusercontent.com/ecmwf-training/c3s-training-submodule-sat-obs-atmos-physics/main/precipitation-girafe-QL.png" alt="GIRAFE tutorial" style="width:100%; height:200px; object-fit:cover;">
+    <div style="padding: 0.8rem;">
+      <strong>A hands-on notebook exploring precipitation using the GIRAFE dataset</strong><br><em>(Tutorial)</em><br><br>
+      <a href="https://github.com/ecmwf-training/c3s-training-submodule-sat-obs-atmos-physics/blob/main/precipitation-girafe.ipynb" style="color:#0072c6;">View on GitHub</a>
+      <p style="margin-top:0.5rem; font-size:0.9em; color:#555;">Climate · Change · Service · C3S · 2025</p>
+    </div>
+  </div>
+
+  <div style="flex: 1 1 300px; max-width: 320px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); overflow: hidden; text-align: center;">
+    <img src="https://raw.githubusercontent.com/ecmwf-training/c3s-training-submodule-climate-indices/main/gtsmip-water-levels-QL.png" alt="GTSMIP tutorial" style="width:100%; height:200px; object-fit:cover;">
+    <div style="padding: 0.8rem;">
+      <strong>Compute and analyse water-level indicators from the GTSMIP context</strong><br><em>(Tutorial)</em><br><br>
+      <a href="https://github.com/ecmwf-training/c3s-training-submodule-climate-indices/blob/main/gtsmip-water-levels.ipynb" style="color:#0072c6;">View on GitHub</a>
+      <p style="margin-top:0.5rem; font-size:0.9em; color:#555;">Climate · Change · Service · C3S · 2025</p>
+    </div>
+  </div>
+
+  <div style="flex: 1 1 300px; max-width: 320px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); overflow: hidden; text-align: center;">
+    <img src="https://raw.githubusercontent.com/ecmwf-training/c3s-training-submodule-climate-indices/main/warm-and-wet-days-indicator-QL.png" alt="Warm and wet days tutorial" style="width:100%; height:200px; object-fit:cover;">
+    <div style="padding: 0.8rem;">
+      <strong>Derive and visualise a compound climate indicator: warm-and-wet days</strong><br><em>(Tutorial)</em><br><br>
+      <a href="https://github.com/ecmwf-training/c3s-training-submodule-climate-indices/blob/main/warm-and-wet-days-indicator.ipynb" style="color:#0072c6;">View on GitHub</a>
+      <p style="margin-top:0.5rem; font-size:0.9em; color:#555;">Climate · Change · Service · C3S · 2025</p>
+    </div>
+  </div>
+
+</div>