Prose picture style.

Author: nikoshell

src/content/pages/explore.mdx

@@ -3,12 +3,12 @@ title: More Tips on Exploring Prague
 subtitle: At EuroPython, many attendees will come with their families. While not attending the conference, why not go and explore Prague and the surrounding area?
 ---
 
-import { Image } from "astro:assets";
+import { Picture } from "astro:assets";
 import venueImage from "./images/prague.jpg";
 
 # Prague Exploration Tips
 
-<Image src={venueImage} width="1200" alt="" />
+<Picture src={venueImage} width="1200" alt="" />
 
 <div class="mb-15"> </div>
 

src/content/pages/where.mdx

@@ -3,7 +3,7 @@ title: Where
 subtitle: EuroPython 2025 will be back in Prague!
 ---
 
-import { Image } from "astro:assets";
+import { Picture } from "astro:assets";
 
 import venueImage from "./images/prague.jpg";
 import pccEntrance from "images/entrance5-pcc5.jpg";
@@ -16,7 +16,7 @@ import pccEntrance from "images/entrance5-pcc5.jpg";
 
 ## Prague
 
-<Image src={venueImage} width="1200" class="w-full h-auto border-4 border-white rounded-lg shadow-lg" alt="Photo of Charles Bridge in Prague" />
+<Picture src={venueImage} alt="Photo of Charles Bridge in Prague" />
 
 <br></br>
 
@@ -73,10 +73,8 @@ Kongresové centrum Praha, a.s.<br/>
 
 **IMPORTANT: use Entrance 5 of the building to get into the conference.**
 
-<Image
+<Picture
   src={pccEntrance}
-  width="1200"
-  class="w-full h-auto border-4 border-white rounded-lg shadow-lg"
   alt="Entrance 5 of the Prague Congress Centre"
 />
 

src/styles/global.css

@@ -63,6 +63,18 @@ body {
   outline-offset: 5px;
 }
 
+.prose picture img {
+  width: 100%;
+  height: auto;
+  border-width: 4px;
+  border-color: white;
+  border-style: solid;
+  border-radius: 0.5rem;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
 ul.milestone-done li {
   position: relative;
   list-style: none;