Move cat's photo above its and owner's name

src/components/CatCard.astro

@@ -10,16 +10,17 @@ const { cat } = Astro.props;
 
 <a class="card-link-wrapper" href={`/cats/${cat.id}`}>
   <div class="card is-center">
-    <h4>{cat.data.name}</h4>
-    <p>{cat.data.owner.name}</p>
     <div class="img-wrapper">
       <img
         src={cat.data.image.src}
         alt={cat.data.image.alt}
         loading="lazy"
         decoding="async"
+        height="250"
       />
     </div>
+    <h3>{cat.data.name}</h3>
+    <p>{cat.data.owner.name}</p>
   </div>
 </a>
 
@@ -32,8 +33,8 @@ const { cat } = Astro.props;
     opacity: 1;
   }
 
-  .card-link-wrapper:focus {
-    outline: var(--color-primary) solid 5px;
+  a:focus {
+    outline-width: 5px;
   }
 
   .card {
@@ -42,11 +43,17 @@ const { cat } = Astro.props;
     flex-direction: column;
   }
 
-  .card h4 {
-    margin: 1.25rem 0 0.25rem 0;
+  .card h3 {
+    margin-top: 0.75rem;
+    margin-bottom: 0;
+  }
+
+  .card p {
+    margin-bottom: 1.25rem;
   }
 
   .img-wrapper {
+    width: 100%;
     position: relative;
     overflow: hidden;
   }
@@ -54,9 +61,9 @@ const { cat } = Astro.props;
   .card img {
     display: block;
     width: 100%;
-    max-height: 300px;
+    max-height: 250px;
     object-fit: cover;
-    transition: transform;
+    transition-property: transform;
     transition-duration: 300ms;
   }