Use one column of teasers on phone for overlay text position

Gets too busy otherwise.

REDMINE-20852

Author: tf

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css

@@ -15,3 +15,7 @@
 .textPosition-below {
   min-height: 240px;
 }
+
+.textPosition-overlay {
+  --link-width-s-phone-columns: 1;
+}

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css

@@ -24,11 +24,24 @@
   width: calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns));
 }
 
+.linkWidth-s > * {
+  max-width: 240px;
+}
+
 @container (min-width: 315px) {
-  .linkWidth-xs,
-  .linkWidth-s {
+  .linkWidth-xs {
     --columns: 2
   }
+
+  .linkWidth-s {
+    --columns: var(--link-width-s-phone-columns, 2)
+  }
+}
+
+@container (min-width: 400px) {
+  .linkWidth-s {
+    --columns: 2;
+  }
 }
 
 @container (min-width: 500px) {