enable responsive images

astro.config.mjs

@@ -1,5 +1,14 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  image: {
+    // Used for all Markdown images; not configurable per-image
+    // Used for all `<Image />` and `<Picture />` components unless overridden with a prop
+    experimentalLayout: "responsive",
+  },
+  experimental: {
+    responsiveImages: true,
+  },
+});

src/components/Header.astro

@@ -14,7 +14,7 @@ const backgroundColorNightMode = "#240046";
 
 <header id="top">
 	<span class="logo">
-		{pageTitle} <Image class="header-heart-svg" src={transPrideFlag} alt="the transgender pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={biPrideFlag} alt="the bisexual pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={disabilityPrideFlag} alt="the disability pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={redHeartFlat} alt="a red heart meant to symbolize love" />
+		{pageTitle} <Image class="header-heart-svg" src={transPrideFlag} alt="the transgender pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={biPrideFlag} alt="the bisexual pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={disabilityPrideFlag} alt="the disability pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={redHeartFlat} alt="a red heart meant to symbolize love" layout="none"/>
 	</span>
 	<span class="motto">
         {motto}

src/components/WidgetBar.astro

@@ -1,7 +1,7 @@
 ---
 import { Image } from "astro:assets";
 
-import catImg from "../images/widgets/cat.gif";
+import catImg from "../images/widgets/cat.webp";
 
 const backgroundColor = "#ffd4de";
 const backgroundColorNightMode = "#240046";
@@ -27,7 +27,7 @@ const backgroundColorNightMode = "#240046";
 
     .cat-widget {
         background-color: var(--backgroundColor);
-        height: 19vw;
+        height: auto;
         width: 20vw;
         border-radius: 25px;
         display: flex;
@@ -35,6 +35,10 @@ const backgroundColorNightMode = "#240046";
         align-items: center;
     }
 
+    img {
+        margin-bottom: 0.25rem;
+    }
+
     @media (prefers-color-scheme: dark) {
         .widget {
             background-color: var(--backgroundColorNightMode);