converted agenda output to themeable template, scss : started to implement responsivness in grid system

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -110,9 +110,11 @@ main[role="main"]{
       overflow: hidden;
       .col{
         pointer-events:all;
-        max-height: 100%;
+        height: 100%;
         position: relative;
         &>.wrapper{
+          position: relative;
+          box-sizing: border-box;
           border-top: 1px solid red;
           border-bottom: 1px solid red;
           background-color: $transparent-bg;
@@ -139,13 +141,10 @@ main[role="main"]{
     list-style: none;
   }
 }
+body.path-agenda main .col>.wrapper{
+  height:100%;
+}
 #agenda{
-  pointer-events: auto;
-  background-color: $transparent-bg;
-  box-sizing: border-box;
-  border-top: 1px solid red;
-  border-bottom: 1px solid red;
-  padding: 1em;
   position: relative;
   white-space: nowrap;
   height: 100%;
@@ -161,13 +160,12 @@ main[role="main"]{
   div.future-past-events{
     width:33%;
   }
-
   ul,li{
     margin:0; padding:0;
     list-style: none;
   }
   article.node--type-evenement{
-    h2{font-size: 1em;}
+    h2{ @include content_titles; }
   }
 }
 

sites/all/themes/custom/edlptheme/assets/styles/base/_grid.scss

@@ -3,6 +3,10 @@
 $default_gap: 1em;
 $default_sum: 12;
 
+$small-bp:768px;
+$med-bp:1080px;
+$large-bp:1900px;
+
 @mixin row() {
   font-size: 0;
   white-space: nowrap;
@@ -24,10 +28,10 @@ $default_sum: 12;
   &:last-child{padding-right: 0;}
   margin-left: percentage(($col/$sum)*$offset);
 
-  @media only screen and (min-width: 768px) {
+  // @media only screen and (min-width: 768px) {
     width: percentage($col/$sum);
     vertical-align: $align;
-  }
+  // }
 }
 
 .row{
@@ -38,6 +42,28 @@ $default_sum: 12;
   .col-#{$c} {
       @include col($c);
   }
+
+  // small
+  .small-col-#{$c} {
+    @media only screen and (max-width: $small-bp) {
+      @include col($c);
+    }
+  }
+
+  // medium
+  .med-col-#{$c} {
+    @media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
+      @include col($c);
+    }
+  }
+
+  // large
+  .large-col-#{$c} {
+    @media only screen and (min-width: $med-bp+1) and (max-width: $large-bp) {
+      @include col($c);
+    }
+  }
+
 }
 
 @for $c from 1 through $default_sum - 1 {

sites/all/themes/custom/edlptheme/templates/content/edlp-agenda.html.twig

@@ -0,0 +1,17 @@
+<div class="row">
+  <div class="col small-col-12 med-col-6 large-col-3 ">
+    <div class="wrapper">
+      <div id="agenda">
+
+        <div class="column next-event">
+          {{ next_event }}
+        </div>
+        <div class="column future-past-events os-scroll">
+          {{ coming_events }}
+          {{ past_events }}
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>