add and utilize global circular image css utility class

src/components/sections/blog.js

@@ -50,11 +50,13 @@ const Blog = () => {
             </h3>
             <p>{post.excerpt}</p>
             <div className={styles.author}>
-              <GatsbyImage
-                image={post.author.image.asset.gatsbyImageData}
-                className={styles.authorImage}
-                alt={"Forfatteren av innlegget, " + post.author.name}
-              />
+              <div className="circular-container">
+                <GatsbyImage
+                  image={post.author.image.asset.gatsbyImageData}
+                  className={`circular ${styles.authorImage}`}
+                  alt={"Forfatteren av innlegget, " + post.author.name}
+                />
+              </div>
               <p>{post.author.name}</p>
             </div>
           </div>

src/components/sections/blog.module.css

@@ -25,7 +25,6 @@
   font-weight: 100;
 }
 .authorImage {
-  border-radius: 50%;
   border: 2px solid white;
 }
 

src/components/sections/boardMembers.js

@@ -37,10 +37,12 @@ const BoardMembers = () => {
         {data.allSanityAuthor.edges.map(({ node: member }) => (
           <article key={member._id} className={styles.card}>
             <div className={styles.header}>
-              <div className={styles.headerImageContainer}>
+              <div
+                className={`circular-container ${styles.headerImageContainer}`}
+              >
                 <GatsbyImage
                   image={member.image.asset.gatsbyImageData}
-                  className={styles.headerImage}
+                  className="circular"
                   alt={"Bilde av styemedlem, " + member.name}
                   roundedCircle
                 />

src/components/sections/boardMembers.module.css

@@ -40,24 +40,10 @@
 .headerImageContainer {
   border: 5px solid white;
   display: inline-block;
-
-  /* Fuck webkit */
-  overflow: hidden;
-  border-radius: 50%;
-  -webkit-border-radius: 50%;
-  -moz-border-radius: 50%;
-  -khtml-border-radius: 50%;
-  -webkit-mask-image: -webkit-radial-gradient(white, black);
-}
-.headerImage {
-  /* Fuck webkit */
-  border-radius: 50%;
-  -webkit-border-radius: 50%;
-  -moz-border-radius: 50%;
-  -khtml-border-radius: 50%;
-
-  /* box-shadow: inset 0 0 10px #000000; */
 }
+/* .headerImage {
+  box-shadow: inset 0 0 10px #000000;
+} */
 
 .info {
   border-bottom: var(--card-section-divider);

src/index.css

@@ -210,6 +210,23 @@ section h2 {
 .no-mobile {
   display: none;
 }
+.circular-container {
+  /* Fuck webkit */
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -khtml-border-radius: 50%;
+}
+.circular {
+  /* Fuck webkit */
+  overflow: hidden;
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -khtml-border-radius: 50%;
+  mask-image: radial-gradient(white, black);
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
+}
 @media (min-width: 60em) {
   .no-mobile {
     display: block;