add taxons'

assets/css/_base.scss

@@ -18,12 +18,16 @@ body {
     print-color-adjust:exact !important; */
 }
 
-main{
+main:not(#main_home){
     min-height: calc(100vh - var(--header-h));
+    max-width: 900px;
+    margin-inline: auto;
     // margin-top: var(--header-h);
     /* padding: var(--padding-body); */
 }
 
+
+
 button{
     background: none;
     border: none;

assets/css/_page-header.scss

@@ -0,0 +1,11 @@
+
+.page-header{
+    margin-top: calc(var(--spacing)*3);
+    background-color: red;
+    margin-bottom: calc(var(--spacing)*2);
+
+    .page-title{
+        font-size: var(--fs-title-page);
+        font-family: var(--font-title);
+    }
+}

assets/css/_species-list.scss

@@ -0,0 +1,14 @@
+.species-list{
+
+    display: flex;
+    flex-wrap: wrap;
+    --gap: calc(var(--spacing)*2);
+    gap: var(--spacing);
+
+    .taxon{
+        flex: 1 1 calc(50% - var(--spacing)*1);
+        min-width: 250px;
+    }
+    
+    
+}

assets/css/_taxon-card.scss

@@ -1,6 +1,7 @@
 @use "abstracts/mixins.scss" as *;
 
 .species-list .taxon{
+    border: 1px solid red;
 
     .btn-edit {
         @include icon(20px);
@@ -10,4 +11,8 @@
         @include chart-edit(40px);
     }
 
+    figure, img{
+        width: 100%;
+    }
+
 }

assets/css/abstracts/_var.scss

@@ -4,8 +4,11 @@
     --font-title: 'Borna', Arial, sans-serif;
     --font: 'Nunito', Arial, sans-serif;
 
-    --fs-small: 11px;
-    --fs-normal: 14px;
+    --fs-small: 14px;
+    --fs-normal: 16px;
+    --fs-title-page: 38px;
+
+    --spacing: 20px;
 
     font-size: 14px;
     --unit: 24px;
@@ -16,9 +19,6 @@
     --radius-small: 3px;
     --radius-btn: 6px;
 
-
-
-
     --header-h: 60px;
     --header-z: 9000;