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,6 +12,7 @@
 <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-wrapper">
     <div class="plant-item">
       {% set data = load_data(path="/static/plants/" ~ page.extra.data ~ "/metadata.toml") %}
       {% set image = resize_image(path=data.image.url, width=256, height=128, op="fill") %}
@@ -20,6 +21,7 @@
         <h2 class="plant-title">{{ page.title }}</h2>
       </a>
     </div>
+  </div>
   {% endfor %}
 </div>
 {% endblock content %}