css

files/wash-n-roll/internal/scss/components/_gallery.scss

@@ -1,35 +1,53 @@
 .ce_gallery {
-  @include fullwidth();
   ul {
     display: flex;
-    justify-content: space-evenly;
+    justify-content: space-between;
     flex-wrap: wrap;
-    padding: 2.5rem 0 1.5rem 0;
-    margin: 0 auto;
-    max-width: calc(1200px - 24px);
   }
   li {
-    flex-grow: 1;
-    flex-basis: 0;
+    width: calc(50% - 20px);
     padding-bottom: 2rem;
-  }
-  .image_container {
-    padding: 0 0.5rem;
     @media (max-width: 1004px) {
-      padding: 0 1.5rem;
+      width: 100%;
     }
-    @media (max-width: 768px) {
-      padding: 0 2.5rem 1rem 2.5rem;
+  }
+  &.icon-gallery {
+    @include fullwidth();
+
+    ul {      
+      justify-content: space-evenly;
+      padding: 2.5rem 0 1.5rem 0;
+      margin: 0 auto;
+      max-width: calc(1200px - 24px);
     }
-    img {
-      width: 64px;
-      margin: 0 auto 15px auto;
+
+    li {
+      width: auto;
+      flex-grow: 1;
+      flex-basis: 0;
     }
-    .caption {
-      width: 100%;
-      text-transform: uppercase;
-      text-align: center;
-      font-weight: 700;
+
+    .image_container {
+      padding: 0 0.5rem;
+      @media (max-width: 1004px) {
+        padding: 0 1.5rem;
+      }
+      @media (max-width: 768px) {
+        padding: 0 2.5rem 1rem 2.5rem;
+      }
+
+      img {
+        width: 64px;
+        margin: 0 auto 15px auto;
+      }
+
+      .caption {
+        width: 100%;
+        text-transform: uppercase;
+        text-align: center;
+        font-weight: 700;
+      }
     }
+
   }
 }

files/wash-n-roll/internal/scss/components/_slider.scss

@@ -120,7 +120,7 @@
 
   h1, h2 {
     color: $white;
-    line-height: size(52);
+    line-height: size(64);
     padding: 0 0 2rem 0;
   }
 }

files/wash-n-roll/internal/scss/components/_youtube.scss

@@ -124,9 +124,13 @@
           transform: translate(-50%, -50%);
           width: 77px;
           height: 78px;
+          -webkit-mask-image: url("../images/elements/youtube-play-icon.svg");
           mask-image: url("../images/elements/youtube-play-icon.svg");
+          -webkit-mask-repeat: no-repeat;
           mask-repeat: no-repeat;
+          -webkit-mask-position: left top;
           mask-position: left top;
+          -webkit-mask-size: 100% auto;
           mask-size: 100% auto;
           background-color: $white;
           @media (max-width: 575px) {
@@ -149,16 +153,21 @@
 
     .caption {
       position: absolute;
-      left: 30px;
-      bottom: 30px;
-      padding-right: 30px;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      padding: 30px;
       font-size: size(24);
       line-height: size(30);
       color: $white;
+      background: rgba(0,0,0,0.7);
+      border-bottom-left-radius: 20px;
+      border-bottom-right-radius: 20px;
       @media (max-width: 575px) {
-        bottom: 50px;
+        padding: 50px;
         font-size: size(18);
         line-height: size(24);
+        background: none;
       }
     }
   }