feat: Goals blob size

pages/prosesser-baerekraft.mdx

@@ -15,7 +15,7 @@ Her samler vi strategier, rutiner og prosesser for hvordan ting gjøres i Varian
   src="./assets/illustrations/baerekraft-icon-1.svg"
   role="none"
   alt=""
-  className="illustration illustration--right"
+  className="illustration--small illustration--right"
 />
 
 Vi bryr oss om miljøet, og har fokus på å begrense reiser og utslipp. For å ha oversikt fører vi regnskap over alle reiser og utslippene det medfører. Ta en kikk i klimaregnskapet for å se aktuelle tall.
@@ -45,10 +45,11 @@ For å kunne gjøre tiltak og forsøke å bidra til en mer bærekraftig klode ha
   src="../assets/illustrations/bærekraftsmål11.png"
   role="none"
   alt=""
-  className="illustration illustration--right"
+  className="illustration--small illustration--right"
 />
 
 ### Mål 1
+
 Vi skal minke utslipp per årsverk sammenliknet med utslipp fra forrige årsverk
 
 ### Mål 2
@@ -59,10 +60,11 @@ Vi skal jobbe for å finne realistiske tall over utslippet til ukjente faktorer
   src="../assets/illustrations/bærekraftsmål17.png"
   role="none"
   alt=""
-  className="illustration illustration--right"
+  className="illustration--small illustration--right"
 />
 
 ### Mål 3
+
 Vi skal i samarbeid med våre kunder jobbe med bærekraftig utvikling i tråd med bærekraftsmålene og på denne måten forbedre vårt felles håndavtrykk (håndavtrykk = der vi bidrar positivt).
 
 ### Mål 4
@@ -73,7 +75,7 @@ Utvikle vår bærekraftskompetanse innen våre fagdisipliner.
   src="../assets/illustrations/bærekraftsmål12.png"
   role="none"
   alt=""
-  className="illustration illustration--right"
+  className="illustration--small illustration--right"
 />
 
 ### Mål 5
@@ -84,7 +86,7 @@ Vi skal være bevisste forbrukere, både som bedrift og som ansatte. Vi skal min
   src="../assets/illustrations/bærekraftsmål8.png"
   role="none"
   alt=""
-  className="illustration illustration--right"
+  className="illustration--small illustration--right"
 />
 ### Mål 6
 
@@ -94,7 +96,7 @@ Vi skal tiltrekke, utvikle og beholde medarbeidere for å bygge fremtidens Varia
   src="../assets/illustrations/bærekraftsmål10.png"
   role="none"
   alt=""
-  className="illustration illustration--right"
+  className="illustration--small illustration--right"
 />
 ### Mål 7
 
@@ -120,7 +122,7 @@ I den grad det er mulig skal vi bruke leverandører og produkter som forbedrer v
   src="./assets/illustrations/carLeft.svg"
   role="none"
   alt=""
-  className="illustration illustration--right"
+  className="illustration--small illustration--right"
 />
 
 Det kan være vanskelig å vite svarene på de spørsmålene, derfor anbefaler vi å starte med en kjapp kikk på hjemmesida (eventuelt søke på «leverandør + bærekraft/miljø»), eller enkelt og greit sende en epost. Spesielt om det er leverandører vi kjøper regelmessig av, så er det viktig at vi etterspør hvordan de tar miljøansvar. Det er en av de beste måtene vi kan ta mer ansvar på. Her er et eksempel du kan bruke: «Hei! Vi vurderer å kjøpe “x antall av dette produktet” av dere, men det er viktig for oss at det går overens med de miljøvennlige retningslinjene vi har for innkjøp. Kan du fortelle meg om hvilke grep dere har tatt, eller hvordan dere jobber med miljøansvar?» Om de kan vise til miljøsertifiseringer eller lignende prestasjoner så er det kjempeflott, men det viktigste her er at vi som forbrukere viser at dette er viktig for oss.
@@ -146,5 +148,5 @@ samtidig som du får mye mer ut av gadgetbudsjettet ditt. Her finnes mange lever
   src="./assets/illustrations/baerekraft-icon-2.svg"
   role="none"
   alt=""
-  className="illustration illustration--left"
+  className="illustration--small illustration--left"
 />

src/app.css

@@ -94,14 +94,12 @@ li + li {
   margin: 1rem 0;
 }
 .illustration {
-  width: 15rem;
-  margin: 5rem 2rem 2rem;
-  shape-outside: circle(55%);
+  width: 17rem;
+  shape-outside: circle(50%);
+  padding: 2rem;
 }
 .illustration--right {
   float: right;
-  margin: 3rem 0 2rem 2rem;
-  right: -4rem;
 }
 .illustration--left {
   float: left;
@@ -112,6 +110,11 @@ li + li {
   top: 8rem;
   max-width: 35rem;
 }
+.illustration--small {
+  width: 15rem;
+  shape-outside: circle(50%);
+  padding: 2rem;
+}
 
 .wave {
   z-index: 1;
@@ -247,20 +250,15 @@ a:hover {
   }
   .illustration {
     max-width: 40%;
-    width: 13rem;
-  }
-  .illustration--right {
-    margin: 3rem 0 1rem 1rem;
-    right: -1rem;
-  }
-  .illustration--left {
-    margin: 3rem 1rem 1rem 0;
-    left: -1rem;
+    width: 15rem;
   }
   .illustration--center {
     margin: 0 auto;
     display: block;
   }
+  .illustration--small {
+    width: 13rem;
+  }
 }
 .markdownIt-Anchor {
   margin-left: -1.5rem;