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)|

Rather than hack the existing `layout-2x1-75-25` class used by
the 2nd line dashboard (and risk introducing unexpected changes
for other teams), I've created a new `layout-2x1-responsive` class.
It looks identical on the build.html screen, so I've added an
animation to differentiate the preview:

https://user-images.githubusercontent.com/5111927/103345974-b9517e00-4a8a-11eb-8867-c8e55996ec5c.mov

I did consider adding utility classes as suggested here:
#3 (review)
...but the build mechanism only allows for passing one class name
at a time, so I think this problem is best solved with a media
query.

Once this is merged, we'll need to edit the 2nd line dashboard
link here:
https://github.com/alphagov/govuk-developer-docs/blame/800ed1f6a45ee0ab3493d4f4e33e249e5ac80470/source/manual/2nd-line.html.md#L20

assets/css/main.css

@@ -78,6 +78,39 @@ html, body {
 .layout-2x1-75-25 .item-2 { width: 75%; height: 75%; }
 .layout-2x1-75-25 .item-3 { width: 75%; height: 25%; }
 
+.layout-2x1-responsive .item-1 { float: right; width: 25%; height: 100%; }
+.layout-2x1-responsive .item-2 { width: 75%; height: 75%; }
+.layout-2x1-responsive .item-3 { width: 75%; height: 25%; }
+
+@media (max-width: 980px) {
+  .layout-2x1-responsive .item-1 { width: 40%; }
+  .layout-2x1-responsive .item-2 { width: 60%; }
+  .layout-2x1-responsive .item-3 { width: 60%; }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  /* duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */
+  .layout-thumb.layout-2x1-responsive .item-1 {
+    animation: 2s linear 0s infinite normal none running column1animation;
+  }
+
+  .layout-thumb.layout-2x1-responsive .item-2,
+  .layout-thumb.layout-2x1-responsive .item-3 {
+    animation: 2s linear 0s infinite normal none running column2animation;
+  }
+
+  @keyframes column1animation {
+    0% { width: 40%; }
+    50% { width: 60%; }
+    100% { width: 40%; }
+  }
+  @keyframes column2animation {
+    0% { width: 60%; }
+    50% { width: 40%; }
+    100% { width: 60%; }
+  }
+}
+
 .layout-2x1ish .item { width: 67%; height: 50%; }
 .layout-2x1ish .item-1 { height: 100%; width: 33%; }
 

build.html

@@ -75,6 +75,13 @@ <h2>Pick Layout</h2>
           </label>
         </li>
 
+        <li>
+          <label for="layout-2x1-responsive">
+            <input type="radio" id="layout-2x1-responsive" name="layout" value="2x1-responsive">
+            <span>2x1-responsive</span>
+          </label>
+        </li>
+
         <li>
           <label for="layout-sidebar-plus-3row">
             <input type="radio" id="layout-sidebar-plus-3row" name="layout" value="sidebar-plus-3row">