blender_fund_main/static/blender_fund_main/styles/_checkout.sass

@@ -22,12 +22,12 @@ body.looper-checkout_choose_plan_variation
 	.mention, pre
 		color: white
 		max-width: 700px
-		padding: 1rem
+		padding: 1.6rem
 		margin-inline: auto
 		border-radius: var(--border-radius)
 
 	.mention
-		margin-bottom: 1rem
+		margin-bottom: 1.6rem
 		background-color: var(--color-accent-bg-hover)
 
 	.checkout-send-instructions
@@ -156,7 +156,7 @@ form.checkout-form
 	position: relative
 
 	h1
-		margin-top: 0.5rem
+		margin-top: 0.8rem
 		+text-gradient(-45deg, #e8c27d, #ff002d)
 
 	a

blender_fund_main/static/blender_fund_main/styles/_link_membership.sass

@@ -21,4 +21,3 @@ form.link-membership-form
 
 		label
 			font-size: small
-

blender_fund_main/static/blender_fund_main/styles/_stats.sass

@@ -1,4 +1,4 @@
-$stats-item-size: 14rem
+$stats-item-size: 22.4rem
 $stats-item-top-bg: hsl(226, 60%, 46%)
 $stats-item-middle-bg: hsl(246, 60%, 46%)
 $stats-item-bottom-bg: hsl(266, 80%, 46%)
@@ -137,11 +137,12 @@ $stats-bg: var(--header-bg-color)
 .stats-sum
 	align-items: center
 	display: flex
-	font-size: 3rem
+	font-size: 4.8rem
 	+fw-bold
 	justify-content: center
 
 .stats-sum-name
+	font-size: var(--fs-sm)
 	+fw-bold
 	opacity: .8
 

blender_fund_main/static/blender_fund_main/styles/campaign.sass

@@ -57,8 +57,8 @@
     img
       animation: badge-dance 5s infinite
       display: block
-      filter: drop-shadow(0 0 1.75rem #1441b1);
+      filter: drop-shadow(0 0 2.8rem #1441b1)
-      margin: 2rem auto 0 auto
+      margin: 3.2rem auto 0 auto
       max-width: 280px
 
   .campaign--donation-box

blender_fund_main/static/blender_fund_main/styles/main.sass

@@ -1,17 +1,20 @@
+// TODO: convert explicit font sizes to variables
+// TODO: convert explicit spacing sizes to modular sizing
+// TODO: unify px and rem units' usage
 \:root
-	--fs-membership-corp-gold: 3rem
+	--fs-membership-corp-gold: 4.8rem
-	--fs-membership-corp-silver: 2.6rem
+	--fs-membership-corp-silver: 4.16rem
-	--fs-membership-corp-bronze: 1.66rem
+	--fs-membership-corp-bronze: 2.656rem
-	--fs-membership-top: 1.46667rem
+	--fs-membership-top: 2.34667rem
-	--fs-hero-title: clamp(3rem, 4vw + 1rem, 72px)
+	--fs-hero-title: clamp(4.8rem, 4vw + 1rem, 72px)
 
 	--header-bg-color: hsl(254deg, 50%, 13%)
 	--header-text-color: hsl(213deg 10% 92%)
 
 /* Bootstrap overrides. */
-$fs-base: .9rem
+$fs-base: 1.44rem
 
-$progress-height: .5rem
+$progress-height: .8rem
 $font-path: '../../assets/fonts'
 
 @import '../../../../assets_shared/src/styles/main.sass'
@@ -26,6 +29,16 @@ $font-path: '../../assets/fonts'
 @import settings
 @import stats
 
+/* Components and Web Assets overrides. */
+\:root
+  --fs-hero-title: 3.6rem
+
+  +media-sm
+    --fs-hero-title: 5.3rem
+
+  +media-lg
+    --fs-hero-title: 6.3rem
+
 .homepage
 	.container-main
 		background-color: var(--header-bg-color)
@@ -156,7 +169,7 @@ table > tbody > tr > td
 				+fw-bold
 
 	h3
-		font-size: 1.1rem
+		font-size: 1.76rem
 		+margin(3, bottom)
 
 .radio-horizontal