Beter iframe handling

Author: tunetheweb

src/features/interactions/scroll-driven-animations.astro

@@ -30,7 +30,7 @@ const slug = slugify(title);
   <p>In the following demo, if your browser has support for CSS scroll-driven animations, the images get unclipped as they cross the scrollport.</p>
 
   <figure>
-    <iframe src="https://scroll-driven-animations.style/demos/image-reveal/css/?embed" height="500" loading="lazy"></iframe>
+    <iframe src="https://scroll-driven-animations.style/demos/image-reveal/css/?embed" height="500" loading="lazy" title="Scroll-driven animation demo"></iframe>
     <figcaption>Demo featuring <a href="https://scroll-driven-animations.style/demos/image-reveal/css/">self-revealing images</a> powered by scroll-driven animations.</figcaption>
   </figure>
 

src/styles/global.css

@@ -69,4 +69,9 @@
 		padding-inline: var(--size-4);
 		border-radius: var(--radius-3);
 	}
+
+	figcaption {
+		text-align: center;
+		font-style: italic;
+	}	
 }