Images not cropping

app.js

@@ -189,6 +189,7 @@ function renderRoutes() {
 function createRouteCard(route) {
   const card = template.content.firstElementChild.cloneNode(true);
   const image = card.querySelector(".route-image");
+  const picture = card.querySelector(".route-picture");
   const meta = card.querySelector(".route-meta");
   const title = card.querySelector(".route-title");
   const description = card.querySelector(".route-description");
@@ -205,7 +206,7 @@ function createRouteCard(route) {
 
   if (route.picture) {
     image.hidden = false;
-    image.style.backgroundImage = `url("${cssUrlEscape(route.picture)}")`;
+    picture.src = route.picture;
   }
 
   return card;
@@ -428,7 +429,3 @@ function isValidUrl(value) {
 function formatDate(value) {
   return new Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(new Date(`${value}T00:00:00`));
 }
-
-function cssUrlEscape(value) {
-  return value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
-}

index.html

@@ -94,7 +94,7 @@
 
     <template id="route-card-template">
       <article class="route-card">
-        <div class="route-image" aria-hidden="true" hidden></div>
+        <div class="route-image" aria-hidden="true" hidden><img class="route-picture" alt="" /></div>
         <div class="route-content">
           <div class="route-meta"></div>
           <div class="route-top">

styles.css

@@ -231,11 +231,16 @@ textarea:focus {
 }
 
 .route-image {
-  min-height: 130px;
-  background-color: color-mix(in srgb, var(--border) 45%, transparent);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--border) 45%, transparent);
+}
+
+.route-picture {
+  display: block;
+  width: 100%;
+  height: auto;
 }
 
 .route-content {
@@ -398,7 +403,7 @@ textarea:focus {
   }
 
   .route-image {
-    min-height: 100%;
+    align-self: start;
   }
 }