primo commit

media/mod_articles/css/mod-articles.css

@@ -0,0 +1,68 @@
+@charset "UTF-8";
+.mod-articles-item {
+  flex-direction: column;
+  display: flex;
+}
+
+.mod-articles-item .mod-articles-item-content {
+  order: 1;
+}
+
+.mod-articles-image {
+  margin-bottom: .5rem;
+}
+
+@supports (container-type: inline-size) {
+  div:has( > .mod-articles-grid), section:has( > .mod-articles-grid) {
+    container-type: inline-size;
+  }
+}
+
+.grid-cols-2 {
+  --grid-column-count: 2;
+}
+
+.grid-cols-3 {
+  --grid-column-count: 3;
+}
+
+.grid-cols-4 {
+  --grid-column-count: 4;
+}
+
+.mod-articles-grid {
+  --grid-layout-gap: 2rem;
+  --grid-item--min-width: 100px;
+  --gap-count: calc(var(--grid-column-count)  - 1);
+  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
+  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
+  grid-gap: var(--grid-layout-gap);
+  grid-template-columns: 1fr;
+  display: grid;
+}
+
+@container (width >= 768px) {
+  .mod-articles-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@container (width >= 992px) {
+  .mod-articles-grid {
+    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
+  }
+}
+
+@supports not (container-type: inline-size) {
+  @media (width >= 768px) {
+    .mod-articles-grid {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media (width >= 992px) {
+    .mod-articles-grid {
+      grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
+    }
+  }
+}

media/mod_articles/css/mod-articles.min.css

@@ -0,0 +1 @@
+@charset "UTF-8";.mod-articles-item{flex-direction:column;display:flex}.mod-articles-item .mod-articles-item-content{order:1}.mod-articles-image{margin-bottom:.5rem}@supports (container-type:inline-size){div:has(>.mod-articles-grid),section:has(>.mod-articles-grid){container-type:inline-size}}.grid-cols-2{--grid-column-count:2}.grid-cols-3{--grid-column-count:3}.grid-cols-4{--grid-column-count:4}.mod-articles-grid{--grid-layout-gap:2rem;--grid-item--min-width:100px;--gap-count:calc(var(--grid-column-count) - 1);--total-gap-width:calc(var(--gap-count)*var(--grid-layout-gap));--grid-item--max-width:calc((100% - var(--total-gap-width))/var(--grid-column-count));grid-gap:var(--grid-layout-gap);grid-template-columns:1fr;display:grid}@container (width>=768px){.mod-articles-grid{grid-template-columns:1fr 1fr}}@container (width>=992px){.mod-articles-grid{grid-template-columns:repeat(auto-fill,minmax(max(var(--grid-item--min-width),var(--grid-item--max-width)),1fr))}}@supports not (container-type:inline-size){@media (width>=768px){.mod-articles-grid{grid-template-columns:1fr 1fr}}@media (width>=992px){.mod-articles-grid{grid-template-columns:repeat(auto-fill,minmax(max(var(--grid-item--min-width),var(--grid-item--max-width)),1fr))}}}