.gitignore

@@ -2,5 +2,6 @@
 bower_components
 node_modules
 npm-debug.log
+_
 index*
-index.html
+index*.html

asset/scss/modules/_content.scss

@@ -240,21 +240,24 @@ main {
     flex-direction: column;
     align-items: center;
   }
+
+  // accordion for colletions list
   .accordion-item {
-    &:not(.title).is-active {
-      background-color:$input-background;
-    }
-   }
+    &.title {
       .accordion-title {
-    ul,ol{
-    }
         @include breakpoint(small){
           li {
-        &.title, 
-        &.curator,
-        &.collection-name,
+            @include xy-cell(3);
+            @include xy-cell-offset(0);
+            &.title,&.curator,&.collection-name,&.date {
+              &::before {content: none;}
+            }
             &.date {
-          @include xy-cell(auto);
+              margin-left: auto;
+            }
+            .ascToggle{
+              position:absolute;
+              padding-left: 0.21rem;
             }
           }
         }
@@ -276,22 +279,81 @@ main {
           }
         }
       }
+    }
+    &:not(.title){
+      &.is-active {
+        background-color:$input-background;
+      }
+      .accordion-title {
+        @include breakpoint(small){
+          li {
+            &.title,
+            &.curator,
+            &.collection-name,
+            &.date {
+              @include xy-cell(10);
+              @include xy-cell-offset(2);
+              min-height: 1rem;
+              &::before {
+                display: inline-block;
+                color: $medium-gray;
+                position: absolute;
+                left:0;
+              }
+            }
+            &.title::before {content:"Title";}
+            &.curator::before  {content:"Artist";}
+            &.collection-name::before  {content:"Collection";}
+            &.date::before  {content:"Date";}
+          }
+        }
+        @include breakpoint(medium){
+          li {
+            &.title,
+            &.curator,
+            &.collection-name,
+            &.date {
+              min-height:unset;
+              &::before {
+                content: none;
+                // content:"";
+              }
+            }
+            &.title {
+              @include xy-cell(4);
+            }
+            &.curator {
+              @include xy-cell(4);
+            }
+            &.collection-name {
+              @include xy-cell(2);
+            }
+            &.date {
+              @include xy-cell(shrink);
+              margin-left: auto; //aligns to right
+            }
+          }
+        }
+      }
+    }
+    .accordion-title {
+      ul,ol {
+        margin: 0;
+      }
+    }
     .accordion-content {
       padding-top: 0;
       section {
         @include xy-grid;
-      padding-top: 0;
-      padding-bottom: 0;
         @include breakpoint(small){
+        padding: 0;
           figure {
             @include xy-cell(12);
-          margin-left:0;
-          margin-right:0;
           }
           p {
             @include xy-cell(12);
             position: relative;
-          padding: $global-padding;
+            padding-top: $global-padding * 1;
             padding-bottom: $global-padding * 3;
             .button {
               position:absolute;
@@ -303,10 +365,11 @@ main {
         @include breakpoint(medium){
           figure {
             @include xy-cell(4);
-          margin-left: 0;
+            @include xy-gutters;
           }
           p {
             @include xy-cell(8);
+            padding-top: 0;
           }
         }
         @include breakpoint(large){
@@ -314,6 +377,7 @@ main {
       }
     }
    }
+}
 // end collections category
 
 // partners