typo

css/custom.css

@@ -58,6 +58,39 @@
 	--dark-divider-color	: #e9e9e9;
 	--error-color			: rgb(230, 87, 87);
 	--default-font			: "Fira Sans Condensed", sans-serif;
+
+	/* Typography scale using clamp() */
+	--font-size-xs: clamp(0.75rem, 0.7vw + 0.6rem, 0.875rem);
+	--font-size-sm: clamp(0.875rem, 0.8vw + 0.75rem, 1rem);
+	--font-size-base: clamp(1rem, 1vw + 0.75rem, 1.25rem);
+	--font-size-lg: clamp(1.125rem, 1.1vw + 0.875rem, 1.5rem);
+	--font-size-xl: clamp(1.25rem, 1.2vw + 1rem, 1.875rem);
+	--font-size-2xl: clamp(1.5rem, 1.5vw + 1.125rem, 2.25rem);
+	--font-size-3xl: clamp(1.875rem, 1.8vw + 1.25rem, 2.75rem);
+	--font-size-4xl: clamp(2.25rem, 2.2vw + 1.5rem, 3.5rem);
+	--font-size-5xl: clamp(2.75rem, 2.7vw + 1.75rem, 4.5rem);
+
+	/* Spacing scale */
+	--space-1: 0.25rem;
+	--space-2: 0.5rem;
+	--space-3: 0.75rem;
+	--space-4: 1rem;
+	--space-5: 1.25rem;
+	--space-6: 1.5rem;
+	--space-8: 2rem;
+	--space-10: 2.5rem;
+	--space-12: 3rem;
+	--space-16: 4rem;
+	--space-20: 5rem;
+	--space-24: 6rem;
+	--space-32: 8rem;
+
+	/* Container max widths */
+	--container-sm: 540px;
+	--container-md: 720px;
+	--container-lg: 960px;
+	--container-xl: 1140px;
+	--container-fluid: 100%;
 }
 
 /************************************/
@@ -66,7 +99,7 @@
 
 body{
 	font-family: var(--default-font);
-	font-size: 16px;
+	font-size: var(--font-size-base);
 	font-weight: 400;
 	line-height: 1.6em;
 	background-color: var(--white-color);
@@ -96,6 +129,14 @@ figure{
 
 img{
 	max-width: 100%;
+	height: auto;
+	display: block;
+}
+
+/* Ensure all images are responsive */
+img, picture, video, canvas, svg{
+	display: block;
+	height: auto;
 }
 
 a{