style studio banner, add more decorations and instagram icon

web/src/components/studio/StudioHeader.tsx

@@ -10,25 +10,51 @@ export const StudioHeader = ({
   return (
     <div className={styles.studioHeader}>
       <h1 className="sr-only">{title}</h1>
-      <div className={styles.logos}>
-        <img
-          className={styles.studentfestivalen}
-          src="/assets/graphics/studio-2026/studio-studentfestivalen-i-oslo.svg"
-          alt="Studentfestivalen i Oslo"
-        />
-        <img
-          className={styles.mainLogo}
-          src="/assets/graphics/studio-2026/studio-logo-2026.svg"
-          alt="STUDiO"
-        />
-        <img
-          className={styles.fadderuke}
-          src="/assets/graphics/studio-2026/studio-hele-oslos-fadderuke.svg"
-          alt="Hele oslos fadderuke"
-        />
+      <div className={styles.banner}>
+        <div className={styles.deco}>
+          <img
+              className={styles.decoLeft}
+              src="/assets/graphics/studio-2026/studio-banner-left-deco.svg"
+            />
+            <img
+              className={styles.decoRight}
+              src="/assets/graphics/studio-2026/studio-banner-right-deco.svg"
+            />
+        </div>
+        <div className={styles.logo}>
+          <img
+            className={styles.mainLogo}
+            src="/assets/graphics/studio-2026/studio-logo-2026.svg"
+            alt="STUDiO"
+          />
+          <div className={styles.logoText}>
+            <img
+              className={styles.studentfestivalen}
+              src="/assets/graphics/studio-2026/studio-studentfestivalen-i-oslo.svg"
+              alt="Studentfestivalen i Oslo"
+            />
+            <img
+              className={styles.fadderuke}
+              src="/assets/graphics/studio-2026/studio-hele-oslos-fadderuke.svg"
+              alt="Hele Oslos fadderuke"
+            />
+            <img
+              className={styles.datos}
+              src="/assets/graphics/studio-2026/studio-datos.svg"
+              alt="10–14. august"
+            />
+          </div>
+          <a href="https://www.instagram.com/studentfestivalenioslo/" className={styles.instagram} target="_blank">
+            <img
+              className={styles.icon}
+              src="/assets/graphics/studio-2026/studio-instagram.svg"
+              alt="Instagram"
+            />
+          </a>
+        </div>
       </div>
       {lead && (
-        <div className="lead" dangerouslySetInnerHTML={{ __html: lead }} />
+        <div className={`lead ${styles.lead}`} dangerouslySetInnerHTML={{ __html: lead }} />
       )}
     </div>
   );

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);
+}