Improve layout on smaller screens

I often have the 2nd line dashboard open on my Macbook, now that
we're no longer in the office and have it on the big screen.
I tend to have it on half my external monitor, leaving the other
half for another window such as Nagstamon.

Currently, even on this relatively large real estate of ~980px,
content is cut-off. This commit attempts to improve the UI using
media queries.

| Before | After |
|--------|------|
|![before](https://user-images.githubusercontent.com/5111927/102879725-2be6ac00-4442-11eb-9459-26ac3434fef2.png)|![after](https://user-images.githubusercontent.com/5111927/102879724-2b4e1580-4442-11eb-8408-875971af07b5.png)|

NB, this does make the class names themselves somewhat redundant,
but there is precedent for ambiguous classnames:
https://github.com/alphagov/frame-splits/blob/920aa1fad2878715fb4353531576ab6447ac8735/assets%2Fcss%2Fmain.css#L87-L88

assets/css/main.css

@@ -78,6 +78,12 @@ html, body {
 .layout-2x1-75-25 .item-2 { width: 75%; height: 75%; }
 .layout-2x1-75-25 .item-3 { width: 75%; height: 25%; }
 
+@media (max-width: 980px) {
+  .layout-2x1-75-25 .item-1 { width: 40%; }
+  .layout-2x1-75-25 .item-2 { width: 60%; }
+  .layout-2x1-75-25 .item-3 { width: 60%; }
+}
+
 .layout-2x1ish .item { width: 67%; height: 50%; }
 .layout-2x1ish .item-1 { height: 100%; width: 33%; }