Make the front image smaller and give it aspect ratio

src/routes/+page.svelte

@@ -4,6 +4,7 @@
     citeOwnerClass,
     mottoClass,
     profilePicClass,
+    profilePicImgClass,
     twitchAsideClass,
     twitchEmbedClass,
     twitchIframeClass,
@@ -19,14 +20,9 @@
 <header class="index-header">
   <figure class="profile-pic {profilePicClass}">
     <picture>
-      <source
-        media="(max-width: 550px)"
-        srcset={generateSrcSet('/images/profile-portugal-portrait.jpg', {
-          width: 500,
-        })}
-      />
       <img
         alt="Portrait"
+        class="{profilePicImgClass}"
         srcset={generateSrcSet('/images/profile-portugal-landscape.jpg', {
           width: 800,
         })}

src/routes/page.css.ts

@@ -14,6 +14,11 @@ export const profilePicClass = sprinkles({
   marginY: 'none',
 })
 
+export const profilePicImgClass = style({
+  aspectRatio: "auto 800 / 709",
+  maxHeight: '66vh'
+})
+
 export const mottoClass = sprinkles({
   textAlign: 'center',
   marginX: 'auto',