add taxons'

assets/style.css

@@ -2,8 +2,10 @@
 :root {
   --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;
   --padding-body: 32px;
@@ -77,8 +79,10 @@ body {
   print-color-adjust:exact !important; */
 }
 
-main {
+main:not(#main_home) {
   min-height: calc(100vh - var(--header-h));
+  max-width: 900px;
+  margin-inline: auto;
   /* padding: var(--padding-body); */
 }
 
@@ -557,6 +561,16 @@ span.controls::after {
   height: 70px;
 }
 
+.page-header {
+  margin-top: calc(var(--spacing) * 3);
+  background-color: red;
+  margin-bottom: calc(var(--spacing) * 2);
+}
+.page-header .page-title {
+  font-size: var(--fs-title-page);
+  font-family: var(--font-title);
+}
+
 .item-nav {
   border: 1px solid var(--color-txt-light);
   border-radius: var(--radius-small);
@@ -832,6 +846,20 @@ span.controls::after {
   margin-top: calc(var(--unit) * 2);
 }
 
+.species-list {
+  display: flex;
+  flex-wrap: wrap;
+  --gap: calc(var(--spacing)*2);
+  gap: var(--spacing);
+}
+.species-list .taxon {
+  flex: 1 1 calc(50% - var(--spacing) * 1);
+  min-width: 250px;
+}
+
+.species-list .taxon {
+  border: 1px solid red;
+}
 .species-list .taxon .btn-edit {
   width: 20px;
   height: 20px;
@@ -856,4 +884,7 @@ span.controls::after {
 }
 .species-list .taxon .chart-edit svg .verified {
   fill: green;
+}
+.species-list .taxon figure, .species-list .taxon img {
+  width: 100%;
 }/*# sourceMappingURL=style.css.map */