diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHero.module.css b/aksel.nav.no/website/components/layout/god-praksis-page/hero/Hero.module.css
similarity index 100%
rename from aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHero.module.css
rename to aksel.nav.no/website/components/layout/god-praksis-page/hero/Hero.module.css
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/hero/intro-hero/IntroHero.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/hero/intro-hero/IntroHero.tsx
index bee1cac858..0cacd0ec1c 100644
--- a/aksel.nav.no/website/components/layout/god-praksis-page/hero/intro-hero/IntroHero.tsx
+++ b/aksel.nav.no/website/components/layout/god-praksis-page/hero/intro-hero/IntroHero.tsx
@@ -1,5 +1,7 @@
+import cl from "clsx";
 import { Box, Heading } from "@navikt/ds-react";
 import Cube from "@/layout/god-praksis-page/hero/HeroCube";
+import styles from "../Hero.module.css";
 
 type GpIntroHeroProps = {
   title: string;
@@ -13,7 +15,10 @@ function IntroHero({ title, children }: GpIntroHeroProps) {
       borderRadius="large"
       paddingInline={{ xs: "4", lg: "10" }}
       paddingBlock={{ xs: "6", lg: "10" }}
-      className="relative isolate bg-gradient-to-tr from-teal-400 via-teal-200 via-60% to-teal-200 ring-1 ring-inset ring-teal-400"
+      className={cl(
+        "relative isolate ring-1 ring-inset ring-teal-400",
+        styles.heroGradient,
+      )}
     >
       <Cube />
       <Heading level="1" size="xlarge" className="relative z-10 mt-2">
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroModal.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroModal.tsx
index 6e3454b936..75c0f28173 100644
--- a/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroModal.tsx
+++ b/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroModal.tsx
@@ -6,7 +6,7 @@ import { HeroList } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroCar
 import { HeroIntro } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroIntro";
 import { HeroSelectButton } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroSelectButton";
 import { GpTemaT, HeroNavT } from "@/layout/god-praksis-page/interface";
-import styles from "./TemaHero.module.css";
+import styles from "../Hero.module.css";
 
 type GpTemaHeroModalProps = { tema: GpTemaT | null } & HeroNavT;
 
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroStatic.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroStatic.tsx
index 9189383fec..f995866cb1 100644
--- a/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroStatic.tsx
+++ b/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroStatic.tsx
@@ -7,7 +7,7 @@ import { HeroList } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroCar
 import { HeroIntro } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroIntro";
 import { HeroSelectButton } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroSelectButton";
 import { GpTemaT, HeroNavT } from "@/layout/god-praksis-page/interface";
-import styles from "./TemaHero.module.css";
+import styles from "../Hero.module.css";
 
 type GpTemaHeroStaticProps = { tema: GpTemaT | null } & HeroNavT;