Fixed diamond rotation

public/css/home.css

@@ -62,10 +62,27 @@
 
 /* Shape classes */
 .diamond {
-  width: calc(100% / sqrt(2));  /* ≈ 100% / √2 (100% because square width = 1, which translates to 100%) */
+  width: 100%;
   aspect-ratio: 1 / 1;
-  transform: rotate(45deg);
   margin: auto;
+  animation: spin-in 1s forwards;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.diamond::after {
+  content: "";
+  position: absolute;
+  width: calc(100% / sqrt(2)); /* Shrink so rotated square fits inside wrapper */
+  aspect-ratio: 1 / 1;
+  background: var(--fill-color);
+  transform: rotate(45deg);
+}
+
+.circle {
+  border-radius: 75%;
 }
 
 main > * {

src/_includes/layout.html

@@ -49,7 +49,7 @@
         <div class="flex-1 home-grid-container">
           <div class="home-grid">
             <div class="fill-background fill-teal border-round-1 border-round-tl border-round-bl"></div>
-            <div class="fill-background fill-black diamond"></div>
+            <div class="fill-black diamond"></div>
             <div class="fill-background fill-brown border-round-2 border-round-tr"></div>
 
             <div class="fill fill-tan">