[4.0] Display of horizontal mod_articles_news module

build/media_source/mod_articles_news/css/template.css

@@ -0,0 +1,31 @@
+.mod-articlesnews-horizontal {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  list-style: none;
+}
+.mod-articlesnews-horizontal figure img {
+  width: 100%;
+}
+.mod-articlesnews-horizontal li {
+  display: flex;
+  flex: 1 1 300px;
+  flex-direction: column;
+}
+.mod-articlesnews-horizontal li:not(:last-child) {
+  margin-right: 2rem;
+}
+.mod-articlesnews-horizontal .readmore {
+  margin-top: auto;
+}
+
+@supports (display: grid) {
+  .mod-articlesnews-horizontal {
+    display: grid;
+    grid-gap: 2rem;
+    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
+  }
+  .mod-articlesnews-horizontal li:not(:last-child) {
+    margin-right: 0;
+  }
+}

modules/mod_articles_news/tmpl/horizontal.php

@@ -11,6 +11,10 @@
 
 use Joomla\CMS\Helper\ModuleHelper;
 
+/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
+$wa = $app->getDocument()->getWebAssetManager();
+$wa->registerAndUseStyle('mod_modules', 'mod_articles_news/template.css');
+
 if (!$list)
 {
 	return;