finish page species

assets/css/pages/_species.scss

@@ -0,0 +1,77 @@
+[data-page="species-by-families"],
+[data-page="species"]{
+
+    .group-sort-view{
+        display: flex;
+        justify-content: space-between;
+   
+        flex-wrap: wrap;
+
+        grid-column: span 2;
+        width: 100%;
+         max-width: 100%;
+        border-bottom: 1px solid var(--color-x-light);
+        padding-top: calc(var(--spacing)*1);
+        padding-bottom: calc(var(--spacing)*0.5);
+        margin-bottom: calc(var(--spacing)*1.5);
+
+        position: sticky;
+        top: 0;
+        background-color: var(--white);
+        z-index: 50;
+    }
+
+    .page-species{
+        margin-bottom: 30vh;
+    }
+
+
+
+
+}
+
+
+[data-page="species-by-families"]{
+  .species-list{
+         align-items: center;
+
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: calc(var(--spacing)*1);
+        margin-bottom: calc(var(--spacing)*3);
+         .taxon{
+            width: calc(100%/3 - var(--spacing)*2/3);
+        }
+
+    }
+}
+
+
+
+
+
+
+
+
+[data-page="species"]{
+
+    .page-species{
+        grid-column: span 2;
+        width: 100%;
+        max-width: 100%;
+    }
+
+
+    .species-list{
+         display: grid;
+         grid-gap: calc(var(--spacing)*1);
+        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+
+        .taxon{
+            align-self: start;
+        }
+
+    }
+
+}