style: adapt layout for desktop, tablet and mobile

country-explorer/src/components/App.css

@@ -29,7 +29,7 @@ main > section {
 }
 section[aria-labelledby='controls-heading'] {
   display: grid;
-  grid-template-columns: 1fr 1fr 1.4fr;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
   gap: var(--space-3);
 }
 #controls-heading {
@@ -57,8 +57,28 @@ footer {
   text-align: center;
   font-size: 0.85rem;
 }
-@media (max-width: 680px) {
+/* Keep individual controls wide enough on tablets and landscape phones. */
+@media (max-width: 960px) {
   section[aria-labelledby='controls-heading'] {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .country-selection {
+    grid-column: 1 / -1;
+  }
+}
+@media (max-width: 600px) {
+  section[aria-labelledby='controls-heading'] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  main > section {
+    padding: var(--space-2);
+  }
+}
+@media (orientation: landscape) and (max-height: 500px) {
+  header h1 {
+    font-size: 2.25rem;
+  }
+  header::before {
+    margin-bottom: var(--space-1);
   }
 }

country-explorer/src/components/CountryCard.css

@@ -61,18 +61,18 @@
   color: var(--text-h);
   font-variant-numeric: tabular-nums;
 }
-@media (max-width: 680px) {
+@media (max-width: 800px) {
   .country-card {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
   .country-card__flag,
   .country-card__flag-placeholder {
     max-width: 22rem;
     justify-self: center;
   }
 }
-@media (max-width: 360px) {
+@media (max-width: 400px) {
   .country-card__details {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
 }

country-explorer/src/components/NavigationControls.css

@@ -16,3 +16,19 @@
 .country-navigation button:hover:not(:disabled) {
   background: #174a39;
 }
+@media (max-width: 600px) {
+  .country-navigation {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.75rem;
+  }
+  .country-navigation p {
+    grid-column: 1 / -1;
+    grid-row: 1;
+    text-align: center;
+  }
+  .country-navigation button {
+    min-width: 0;
+    padding-inline: 0.5rem;
+  }
+}

country-explorer/src/index.css

@@ -29,7 +29,7 @@
 }
 body {
   margin: 0;
-  min-width: 280px;
+  overflow-wrap: anywhere;
   font-size: 1rem;
   line-height: 1.6;
 }
@@ -86,6 +86,7 @@ button {
 }
 select {
   appearance: none;
+  min-width: 0;
   width: 100%;
   min-height: 50px;
   padding: 0.75rem 2.75rem 0.75rem 1rem;