static/css/page: text below images tweaks (MR 271)

* set max-width 100%, so it doesn't exceed the screen on small displays
* add w400
* set text-align: center instead of right. I thought this looked cool
  some years ago, but now I think it just looks weird.

static/css/page.css

@@ -78,16 +78,21 @@ video.border {
 /* TEXT BELOW IMAGES */
 span.w200,
 span.w300,
+span.w400,
 span.img-center-subtext {
     display: inline-block;
     width: 200px;
     margin-left: auto;
     line-height: 1.2;
     font-size: small;
+    max-width: 100%;
 }
 span.w300 {
     width: 300px;
 }
+span.w400 {
+    width: 400px;
+}
 span.img-center-subtext {
     text-align: center;
     width: 100%;
@@ -110,7 +115,7 @@ span.img-center-subtext {
     display: flex;
     flex-direction: column;
     grid-area: side;
-    text-align: right;
+    text-align: center;
 }
 .grid-side img,
 .grid-side video {