Test layout

app/assets/stylesheets/application.scss

@@ -18,4 +18,6 @@
  @use "jquery-ui/core";
  @use "toastr";
  
- @use "base";
+ @use "base";
+ @use "application_settings";
+ @use "main";

app/assets/stylesheets/application_settings.scss

@@ -0,0 +1,39 @@
+:root{
+  --bg-color: #F3F3F5;
+  --navbar-border: #d3d3d3;
+  --blue-color: #0078F6;
+  --blue-light-color: #e5f1fe;
+  --text-callout-color: #B6B6B6;
+  --yellow-color: #F9D256;
+  --white-color: #fff;
+  --red-color: #EF3E3B;
+  --footer-text-color: #757575;
+  --purple-color: #4C13A2;
+  --green-color: #4CBFC0;
+  --orange-color: #FE9F40;
+  --grey-color: #C9CBCE;
+  --grey-light-color:#F6F6F6;
+  --grey-dark-color:#a9a9a9;
+  --border-dropdown-color: #e8e8e8;
+  --text-dropdown-color: #0F0F11;
+  --main-header-text: #7C7C7C;
+
+//TEXT weight
+  --bold: 700;
+  --semi-bold: 600;
+  --medium: 500;
+  --regular: 400;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  background-color: var(--bg-color);
+}
+
+@media screen and (min-width: 1024px) {
+.main-container.top-main{
+  margin-left: 144px;
+  width: calc(100% - 144px);
+  // margin: 0 auto;]
+  // max-width: 1260px;
+}}

app/assets/stylesheets/main.scss

@@ -0,0 +1,29 @@
+.header{
+    width: 100vw;
+    text-align: center;
+}
+
+.header-title {
+    font-size: 2.5rem;
+    font-weight: var(--bold);
+}
+.organisations-data {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border: 8px solid black;
+    height: 100vh;
+
+}
+
+
+.organisation-data {
+    border: 2px solid grey;
+    white-space: pre-line;
+    display: flex;
+    flex-direction: column;
+}
+.organisation-elem {
+    font-weight: var(--semi-bold);
+    font-size: 1.5rem;
+}