Add section header images

Author: aryanpingle

public/images/consonant-table-banner.png

@@ -111,7 +111,24 @@
 
             <article>
                 <section>
-                    <h2>Runic translator</h2>
+                    <header>
+                        <picture>
+                            <source
+                                srcset="./images/runic-translator-banner.webp"
+                                type="image/webp"
+                            />
+                            <source
+                                srcset="./images/runic-translator-banner.png"
+                                type="image/png"
+                            />
+                            <img
+                                loading="lazy"
+                                class="section-banner"
+                                src="./images/runic-translator-banner.png"
+                                alt="Runic Translator"
+                            />
+                        </picture>
+                    </header>
                     <p>
                         Anything you type in English will be translated to
                         phonetic, and then converted to Runic.<br />
@@ -124,31 +141,99 @@
 
             <article>
                 <section>
-                    <h2>Rune Vowel Table</h2>
+                    <header>
+                        <picture>
+                            <source
+                                srcset="./images/vowel-table-banner.webp"
+                                type="image/webp"
+                            />
+                            <source
+                                srcset="./images/vowel-table-banner.png"
+                                type="image/png"
+                            />
+                            <img
+                                loading="lazy"
+                                class="section-banner"
+                                src="./images/vowel-table-banner.png"
+                                alt="Vowel Table"
+                            />
+                        </picture>
+                    </header>
                     <p>Click on any card to copy the vowel.</p>
                 </section>
                 <div id="rune-vowel-table"></div>
             </article>
 
             <article>
                 <section>
-                    <h2>Rune Consonant Table</h2>
+                    <header>
+                        <picture>
+                            <source
+                                srcset="./images/consonant-table-banner.webp"
+                                type="image/webp"
+                            />
+                            <source
+                                srcset="./images/consonant-table-banner.png"
+                                type="image/png"
+                            />
+                            <img
+                                loading="lazy"
+                                class="section-banner"
+                                src="./images/consonant-table-banner.png"
+                                alt="Consonant Table"
+                            />
+                        </picture>
+                    </header>
                     <p>Click on any card to copy the consonant.</p>
                 </section>
                 <div id="rune-consonant-table"></div>
             </article>
 
             <article>
                 <section>
-                    <h2>Runic Playground</h2>
+                    <header>
+                        <picture>
+                            <source
+                                srcset="./images/runic-playground-banner.webp"
+                                type="image/webp"
+                            />
+                            <source
+                                srcset="./images/runic-playground-banner.png"
+                                type="image/png"
+                            />
+                            <img
+                                loading="lazy"
+                                class="section-banner"
+                                src="./images/runic-playground-banner.png"
+                                alt="Runic Playground"
+                            />
+                        </picture>
+                    </header>
                     <p>Create your own runes by clicking on segments.</p>
                 </section>
                 <div class="runic-playground-container"></div>
             </article>
 
             <article>
                 <section>
-                    <h2>Testimonials</h2>
+                    <header>
+                        <picture>
+                            <source
+                                srcset="./images/testimonials-banner.webp"
+                                type="image/webp"
+                            />
+                            <source
+                                srcset="./images/testimonials-banner.png"
+                                type="image/png"
+                            />
+                            <img
+                                loading="lazy"
+                                class="section-banner"
+                                src="./images/testimonials-banner.png"
+                                alt="Testimonials"
+                            />
+                        </picture>
+                    </header>
                     <p>See what fans are saying about this site!</p>
                 </section>
                 <div class="testimonials-container"></div>