style studio banner, add more decorations and instagram icon

web/src/components/studio/studioHeader.module.scss

@@ -1,36 +1,95 @@
 .studioHeader {
   position: relative;
-  width: var(--size-width-lead);
-  max-width: 100%;
-  margin: 0 auto var(--spacing-l);
 }
 
-.logos {
-  display: flex;
-  flex-direction: column;
+.banner {
+  position: relative;
+  width: 100vw;
+  margin: calc(var(--spacing-sitepadding-block) * -1) calc(var(--spacing-sitepadding-inline) * -1) 2rem;
+  background: #EEA971;
+}
+
+.deco {
+  width: 100%;
+  height: 100%;
+
+  &Left,
+  &Right {
+    position: absolute;
+    height: 100%;
+    z-index: 0;
+  }
+
+  &Left {
+    left: 0;
+  }
+
+  &Right {
+    right: 0;
+  }
+}
+
+.logo {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: auto 2fr .5fr;
   align-items: center;
-  gap: var(--spacing-xs);
-  margin-bottom: var(--spacing-m);
+  justify-content: center;
+  gap: var(--spacing-m);
+  padding: var(--spacing-xs);
+  width: calc(var(--size-width-lead) + var(--spacing-sitepadding-inline));
+  max-width: 100%;
+  margin: 0 auto var(--spacing-l);
 }
 
 .mainLogo {
   display: block;
   width: 100%;
-  max-width: 16rem;
+  max-width: 16vw;
   height: auto;
   margin: var(--spacing-xs) 0;
 }
 
+.logoText {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 28rem;
+  gap: var(--spacing-s);
+}
+
 .studentfestivalen {
   display: block;
-  width: 100%;
-  max-width: 27rem;
+  width: 83%;
   height: auto;
 }
 
 .fadderuke {
   display: block;
   width: 100%;
-  max-width: 30rem;
   height: auto;
 }
+
+.datos {
+  display: block;
+  width: 40%;
+}
+
+.instagram {
+  width: var(--size-icon-circle);
+  height: var(--size-icon-circle);
+  border-radius: 10rem;
+  background: #D68A56;
+  padding: var(--spacing-xs);
+
+  .icon {
+    display: block;
+  }
+}
+
+.lead {
+  width: var(--size-width-lead);
+  max-width: 100%;
+  margin: 0 auto var(--spacing-l);
+}