feat: <squash> use viewport width

Financial-Times · Aug 14, 2024 · 9979b82 · 9979b82
1 parent 1502687
commit 9979b82
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/components/o3-foundation/grid.css b/components/o3-foundation/grid.css
@@ -5,13 +5,14 @@
 	--o3-grid-area: 'bleed-left content-start . . content-end bleed-right';
 	--o3-grid-columns: 4;
 	--o3-grid-gap: 16px;
+	--o3-grid-column-width: calc((100vw - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
 
 	@media screen and (min-width: 740px) {
 		--o3-grid-template: 8px
 			repeat(var(--o3-grid-columns), 1fr) 8px;
 		--o3-grid-area: 'bleed-left content-start . . . . . . content-end bleed-right';
 		--o3-grid-columns: 8;
-		--o3-grid-column-width: calc((740px - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
+
 	}
 
 	@media screen and (min-width: 980px) {
@@ -20,7 +21,6 @@
 		--o3-grid-area: 'bleed-left content-start . . . . . . . . . . content-end bleed-right';
 		--o3-grid-columns: 12;
 		--o3-grid-gap: 24px;
-		--o3-grid-column-width: calc((980px - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
 	}
 
 	@media screen and (min-width: 1268px) {