diff --git a/variable-fonts/grade.html b/variable-fonts/grade.html
index 6234da04..0551b217 100644
--- a/variable-fonts/grade.html
+++ b/variable-fonts/grade.html
@@ -35,10 +35,16 @@
.wrapper {
width: 100%;
display: grid;
- grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
+ grid-template-columns: 1fr;
grid-gap: 1rem;
}
+ @media screen and (min-width: 42rem) {
+ .wrapper {
+ grid-template-columns: 1fr 1fr;
+ }
+ }
+
textarea {
font-family: monospace;
display: block;
diff --git a/variable-fonts/italic.html b/variable-fonts/italic.html
index d3e51093..fb5bf641 100644
--- a/variable-fonts/italic.html
+++ b/variable-fonts/italic.html
@@ -35,10 +35,22 @@
.wrapper {
width: 100%;
display: grid;
- grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
+ grid-template-columns: 1fr;
grid-gap: 1rem;
}
+ @media screen and (min-width: 35rem) {
+ .wrapper {
+ grid-template-columns: 1fr 1fr;
+ }
+ }
+
+ @media screen and (min-width: 52rem) {
+ .wrapper {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+ }
+
textarea {
font-family: monospace;
display: block;
diff --git a/variable-fonts/optical-sizing.html b/variable-fonts/optical-sizing.html
index efb8fecb..defb0c4a 100644
--- a/variable-fonts/optical-sizing.html
+++ b/variable-fonts/optical-sizing.html
@@ -35,10 +35,16 @@
.wrapper {
width: 100%;
display: grid;
- grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
+ grid-template-columns: 1fr;
grid-gap: 1rem;
}
+ @media screen and (min-width: 50rem) {
+ .wrapper {
+ grid-template-columns: 1fr 1fr;
+ }
+ }
+
textarea {
font-family: monospace;
display: block;
diff --git a/variable-fonts/sample-page.html b/variable-fonts/sample-page.html
index 0cb459cb..a6d5ad84 100644
--- a/variable-fonts/sample-page.html
+++ b/variable-fonts/sample-page.html
@@ -35,8 +35,14 @@
.wrapper {
width: 100%;
display: grid;
- grid-template-columns: repeat(auto-fill,minmax(29rem,1fr));
- grid-gap: 1.5rem;
+ grid-template-columns: 1fr;
+ grid-gap: 1rem;
+ }
+
+ @media screen and (min-width: 58rem) {
+ .wrapper {
+ grid-template-columns: 1fr 1fr;
+ }
}
textarea {
diff --git a/variable-fonts/slant.html b/variable-fonts/slant.html
index 08a9f8ed..12704a24 100644
--- a/variable-fonts/slant.html
+++ b/variable-fonts/slant.html
@@ -35,10 +35,22 @@
.wrapper {
width: 100%;
display: grid;
- grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
+ grid-template-columns: 1fr;
grid-gap: 1rem;
}
+ @media screen and (min-width: 35rem) {
+ .wrapper {
+ grid-template-columns: 1fr 1fr;
+ }
+ }
+
+ @media screen and (min-width: 52rem) {
+ .wrapper {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+ }
+
textarea {
font-family: monospace;
display: block;
diff --git a/variable-fonts/weight.html b/variable-fonts/weight.html
index c2c2ee87..261a0eb1 100644
--- a/variable-fonts/weight.html
+++ b/variable-fonts/weight.html
@@ -43,10 +43,22 @@
.wrapper {
width: 100%;
display: grid;
- grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
+ grid-template-columns: 1fr;
grid-gap: 1rem;
}
+ @media screen and (min-width: 35rem) {
+ .wrapper {
+ grid-template-columns: 1fr 1fr;
+ }
+ }
+
+ @media screen and (min-width: 52rem) {
+ .wrapper {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+ }
+
textarea {
font-family: monospace;
display: block;
diff --git a/variable-fonts/width.html b/variable-fonts/width.html
index aa7c3246..069bdbff 100644
--- a/variable-fonts/width.html
+++ b/variable-fonts/width.html
@@ -38,15 +38,27 @@
font: 1.2em "Amstelvar VF", Georgia, serif;
margin: 20px;
padding: 0;
- }
+ }
.wrapper {
width: 100%;
display: grid;
- grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
+ grid-template-columns: 1fr;
grid-gap: 1rem;
}
+ @media screen and (min-width: 35rem) {
+ .wrapper {
+ grid-template-columns: 1fr 1fr;
+ }
+ }
+
+ @media screen and (min-width: 52rem) {
+ .wrapper {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+ }
+
textarea {
font-family: monospace;
display: block;