ordered content in aside for accordions

src/assets/scss/modules/_content.scss

@@ -1,4 +1,3 @@
-  //content {
 
 // general styles
 //----------------
@@ -149,6 +148,7 @@
 
 .collections-list {
   @include xy-grid;
+  width:100vw;
   header,main{
     @include xy-cell(12);
     @include flex;
@@ -181,12 +181,26 @@
     }
   }
   .accordion-content {
-        @include xy-grid(12);
+    section {
+      @include xy-grid;
+      @include breakpoint(small){
         figure {
-          @include xy-cell(4);
+          @include xy-cell(12);
         }
         p {
-          @include xy-cell(6);
+          @include xy-cell(12);
+        }
+      }
+      @include breakpoint(medium){
+        figure {
+          @include xy-cell(3);
+        }
+        p {
+          @include xy-cell(9);
+        }
+      }
+      @include breakpoint(large){
+      }
     }
   }
 }
@@ -357,5 +371,10 @@
 }
 //end hero
 
-//}
+// omeka specific styles
-// end content
+  #user-bar {
+    width: 100%;
+
+  }
+
+//end omeka specific styles

src/partials/section-collections-latest.html

@@ -17,10 +17,12 @@
             </ul>
           </a>
           <aside class="accordion-content" data-tab-content>
+            <section>
               <figure>
               </figure>
               <p>
               </p>
+            </section>
           </aside>
         </li>
         <li class="accordion-item" data-accordion-item>
@@ -33,9 +35,13 @@
             </ul>
           </a>
           <aside class="accordion-content" data-tab-content>
+            <section>
               <figure>
               </figure>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque unde quaerat reprehenderit ipsa ipsam, adipisci facere repellendus impedit at, quisquam dicta optio veniam quia nesciunt, inventore quod in neque magni?</p>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque unde quaerat reprehenderit ipsa ipsam, adipisci facere repellendus impedit at, quisquam dicta optio veniam quia nesciunt, inventore quod in neque magni?
+              </p>
+            </section>
           </aside>
         </li>
 
@@ -49,12 +55,18 @@
             </ul>
           </a>
           <aside class="accordion-content" data-tab-content>
+            <section>
+              <figure>
                 <img src="https://dev-archive.hangar.org/files/large/81/3D-Panoramic-Landscape-Image-768x288.jpg">
-            <p>You can extend the functionality of Omeka S by writing an add-on component called a module. Zend Framework provides a substantial framework for writing modules, but Omeka S provides extra structure that makes the modules installable, upgradeable, and integratable. You can extend the functionality of Omeka S by writing an add-on component called a module. Zend Framework provides a substantial framework for writing modules, but Omeka S provides extra structure that makes the modules installable, upgradeable, and integratable.</p>
+              </figure>
+              <p>
+                You can extend the functionality of Omeka S by writing an add-on component called a module. Zend Framework provides a substantial framework for writing modules, but Omeka S provides extra structure that makes the modules installable, upgradeable, and integratable. You can extend the functionality of Omeka S by writing an add-on component called a module. Zend Framework provides a substantial framework for writing modules, but Omeka S provides extra structure that makes the modules installable, upgradeable, and integratable.
                 <br>
                 <button class="go_to_site_button" onclick="window.location.href = '/s/modules'">
                   View
                 </button>
+              </p>
+            </section>
           </aside>
         </li>
         <li class="accordion-item" data-accordion-item>
@@ -67,14 +79,18 @@
             </ul>
           </a>
           <aside class="accordion-content" data-tab-content>
+            <section>
+              <figure>
+                </figure>
+                <p>
               Here, some footnotes of structural imagination      <br>
               <button class="go_to_site_button" onclick="window.location.href = '/s/trees-and-cells'">
                 View
               </button>
+              </p>
+            </section>
           </aside>
         </li>
-
-
         <li class="accordion-item" data-accordion-item>
           <a href="#" class="accordion-title">
             <ul class="">
@@ -85,6 +101,7 @@
             </ul>
           </a>
           <aside class="accordion-content" data-tab-content>
+            <section>
               <figure>
               </figure>
               <p>
@@ -92,6 +109,7 @@
                   View
                 </button>
               </p>
+            </section>
           </aside>
         </li>
         <li class="accordion-item" data-accordion-item>
@@ -104,6 +122,7 @@
             </ul>
           </a>
           <aside class="accordion-content" data-tab-content>
+            <section>
               <figure>
                 <img src="https://dev-archive.hangar.org/files/large/89/scary-werewolf.jpg">
               </figure>
@@ -113,6 +132,7 @@
                   View
                 </button>
               </p>
+            </section>
           </aside>
         </li>
       </ul>