Fix the figure styles in Firefox (#17)

website/src/.vitepress/theme/styles/base.styl

@@ -132,34 +132,39 @@ html:not(.dark) {
 
 // Shitty method to give elevation to image - TO BE REPLACED
 
-main > div > div > figure:has(img) img {
-	box-shadow: 2px 2px 8px 4px var(--vp-c-bg-alt)
-}
-
-figure {
-	&:has(img) {
-		position: relative
-		display: flex
-		flex-direction: column
-		width: auto
-		text-align: center
+main figure {
+	margin: 2rem 0
 	transition: transform var(--vp-tt)
 
 	img {
-			overflow: hidden
 		margin: 0 auto
-			border-radius: 8px
+		border-radius: 12px
+		box-shadow: 2px 2px 8px 4px var(--vp-c-bg-alt)
 	}
 
 	figcaption {
-			display: inline-block
-			margin: 6px auto
-			font-size: 0.8rem
+		text-align: center
+		margin-top: 1.25rem
+		font-size: 0.875rem
+		color: var(--vp-c-text-2)
 	}
 
 	& > a .external-link-icon {
 		display: none
 	}
+}
+
+main :where(h1, h2, h3, h4, h5, h6) + figure {
+	margin-top: 1.5rem
+}
+
+.custom-block {
+	figure figcaption {
+		color: inherit
+	}
+
+	&.tip figure img {
+		--vp-c-bg-alt: var(--vp-custom-block-tip-bg)
 	}
 }