Use <figure> and <figcaption> for image captions

<!-- ❌ Bad: Caption is visually adjacent but semantically unrelated to the image -->
<img src="waterfall.jpg" alt="Waterfall in Costa Rica">
<p>Nauyaca Waterfalls, Dominical, Costa Rica, 2023</p>
 
<!-- ✅ Good: Semantic association via figure/figcaption -->
<figure>
  <img
    src="waterfall.jpg"
    alt="Nauyaca Waterfalls, a wide two-tier waterfall surrounded by rainforest"
  >
  <figcaption>Nauyaca Waterfalls, Dominical, Costa Rica — March 2023</figcaption>
</figure>

<!-- ✅ alt and figcaption contain different information -->
<figure>
  <img
    src="chart.png"
    alt="Line chart showing website traffic doubled between January and June 2024"
  >
  <figcaption>
    Figure 1: Monthly unique visitors, January–June 2024. Source: Google Analytics.
  </figcaption>
</figure>

<!-- ✅ figcaption after the image (most common) -->
<figure>
  <img src="portrait.jpg" alt="Portrait of Ada Lovelace">
  <figcaption>Ada Lovelace, the world's first computer programmer</figcaption>
</figure>
 
<!-- ✅ figcaption before the image (e.g., for numbered figure labels) -->
<figure>
  <figcaption>Figure 2: System architecture overview</figcaption>
  <img src="architecture.png" alt="Diagram showing three-tier architecture with database, API, and frontend layers">
</figure>
 
<!-- ❌ Bad: figcaption as a middle child -->
<figure>
  <img src="portrait.jpg" alt="Portrait">
  <figcaption>Caption text</figcaption>
  <cite>Source: Wikipedia</cite>  <!-- cite should be inside figcaption, not a sibling -->
</figure>

<figure>
  <img
    src="org-chart.png"
    alt="Company organisational chart"
    aria-labelledby="org-caption"
  >
  <figcaption id="org-caption">
    <strong>Organisational structure as of Q1 2024:</strong>
    The CEO oversees three departments. Engineering (12 staff) led by the CTO
    handles product development. Marketing (8 staff) led by the CMO handles
    growth. Operations (5 staff) led by the COO handles logistics.
  </figcaption>
</figure>

<!-- ✅ Hero image with no caption — plain <img> is correct -->
<img
  src="hero.jpg"
  alt="Team members collaborating in a modern office"
  width="1200"
  height="600"
>
 
<!-- ✅ Decorative icon — no figure needed -->
<img src="checkmark.svg" alt="" aria-hidden="true">

/* Default browser styles vary—reset for consistency */
figure {
  margin: 0;
}
 
figure img {
  display: block;
  width: 100%;
  height: auto;
}
 
figcaption {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.5rem;
  font-style: italic;
}