Fix issue with multiline plant display when hovering

sass/plants.scss

@@ -4,10 +4,17 @@
   width: 100%;
   display: block;
 
-  .plant-item {
+  .plant-item-wrapper {
-    display: flex;
+    margin: 0;
+    display: block;
     float: left;
+    height: calc(128px + 2em);
+    width: calc(256px + 2em);
+  }
+
+  .plant-item {
     margin: 1em;
+    display: flex;
     border-radius: 0.5em;
     box-shadow: 0.5em 0.5em $highlight;
     transition-duration: 0.25s;

templates/plants.html

@@ -12,13 +12,15 @@
 <div class="plants-list">
   <!-- If you are using pagination, section.pages will be empty. You need to use the paginator object -->  
   {% for page in section.pages %}
-  <div class="plant-item">
+  <div class="plant-item-wrapper">
-    {% set data = load_data(path="/static/plants/" ~ page.extra.data ~ "/metadata.toml") %}
+    <div class="plant-item">
-    {% set image = resize_image(path=data.image.url, width=256, height=128, op="fill") %}
+      {% set data = load_data(path="/static/plants/" ~ page.extra.data ~ "/metadata.toml") %}
-    <a class="plant-link" href="{{ page.permalink | safe }}">
+      {% set image = resize_image(path=data.image.url, width=256, height=128, op="fill") %}
-      <img class="plant-image" src="{{ image.url }}" alt="{{ data.image.alt }}">
+      <a class="plant-link" href="{{ page.permalink | safe }}">
-      <h2 class="plant-title">{{ page.title }}</h2>
+        <img class="plant-image" src="{{ image.url }}" alt="{{ data.image.alt }}">
-    </a>
+        <h2 class="plant-title">{{ page.title }}</h2>
+      </a>
+    </div>
   </div>
   {% endfor %}
 </div>