card taxon

assets/css/_taxon-card.scss

@@ -1,7 +1,6 @@
 @use "abstracts/mixins.scss" as *;
 
 .species-list .taxon{
-    border: 1px solid red;
 
     .btn-edit {
         @include icon(20px);
@@ -11,8 +10,52 @@
         @include chart-edit(40px);
     }
 
-    figure, img{
-        width: 100%;
+      .chart-edit, .btn-edit{
+        display: none;
     }
 
+
+
+    display: flex;
+    flex-direction: column;
+    // margin-bottom: calc(var(--spacing)*2);
+
+    background-color: var(--color-green-light);
+    padding: 20px;
+
+    .vernacular{ order: 1; }
+    .latin{ order: 2; }
+    figure{ order: 3; }
+
+    figure{
+        @include fig-ratio(1/1);
+
+        border-radius: var(--radius-img);
+        overflow: hidden;
+        
+    }
+
+    .vernacular{
+        // font-size: var(--fs-medium);
+        // color: var(--color-green);
+        background-color: var(--color-green);
+        color: white;
+        border-radius: var(--radius-small);
+        padding: 4px 1ch;
+        margin-bottom: calc(var(--spacing)*0.25);
+    }
+
+    .latin{
+        font-weight: normal;
+        font-weight: 500;
+        font-style: italic;
+                margin-bottom: calc(var(--spacing)*0.75);
+    }
+
+    .vernacular, .latin{
+        text-align: center;
+    }
+
+  
+
 }