Merge branch 'master' into React_Presentation

src/Projects/LOL-Member-Services/src/assets/scss/_settings.scss

@@ -289,11 +289,11 @@ $callout-link-tint: 30%;
 $card-background: $white;
 $card-font-color: $body-font-color;
 $card-divider-background: $light-gray;
-$card-border: 1px solid $light-gray;
+$card-border: none;
 $card-shadow: none;
 $card-border-radius: $global-radius;
 $card-padding: $global-padding;
-$card-margin-bottom: $global-margin;
+$card-margin-bottom: $global-margin + 0.5rem;
 // 15. Close Button
 // ----------------
 $closebutton-position: right top;

src/Projects/LOL-Member-Services/src/assets/scss/app.scss

 @charset 'utf-8';
-@import 'global/_variables';
-@import '_settings';
-@import 'foundation';
-@import 'motion-ui';
+@import "global/_variables";
+@import "_settings";
+@import "foundation";
+@import "motion-ui";
 // Global styles
 @include foundation-global-styles;
 @include foundation-forms;
@@ -57,16 +57,18 @@
 // Motion UI
 @include motion-ui-transitions;
 @include motion-ui-animations;
-@import 'global/_mixins';
-@import 'global/typography.scss';
-@import 'components/buttons.scss';
-@import 'global/_base';
-@import 'components/widgets.scss';
-@import 'components/cards.scss';
-@import 'components/header.scss';
-@import 'components/footer.scss';
-@import 'components/banner.scss';
-@import 'pages/advocacy.scss';
-@import 'pages/article-detail.scss';
-@import 'components/carousel.scss';
-@import 'components/basic-content.scss';
\ No newline at end of file
+@import "global/_mixins";
+@import "global/typography.scss";
+@import "components/buttons.scss";
+@import "global/_base";
+@import "components/widgets.scss";
+@import "components/cards.scss";
+@import "components/header.scss";
+@import "components/footer.scss";
+@import "components/banner.scss";
+@import "pages/advocacy.scss";
+@import "pages/article-detail.scss";
+@import "components/risk-management.scss";
+@import "components/carousel.scss";
+@import "components/basic-content.scss";
+@import "components/event-freeform-text.scss";

src/Projects/LOL-Member-Services/src/assets/scss/components/banner.scss

 .banner-slider {
-    .slider-image {
-        img {
-            height: 100%;
-            object-fit: cover;
-            width: auto;
-        }
+  .slider-image {
+    img {
+      height: 100%;
+      object-fit: cover;
+      width: auto;
+    }
+  }
+  .slider-text {
+    padding: 2.5rem 2.25rem;
+    h6 {
+      font-size: 0.75rem;
+    }
+    h2 {
+      margin-bottom: 0.625rem;
+      font-size: 2.375rem;
+    }
+    .content-placeholder {
+      line-height: 1.375rem;
+      font-size: 1.125rem;
+      margin-bottom: 0.938rem;
+    }
+    .button-group {
+      margin-bottom: 0;
+    }
+    .share-link-btn {
+      background-color: $white;
+      color: $light-blue;
+      font-size: 0.625rem;
+    }
+  }
+  .orbit-bullets {
+    position: absolute;
+    top: rem-calc(18);
+    left: rem-calc(-35);
+    @include transform(90deg);
+    margin: 0;
+    background-color: $white;
+    display: flex;
+    justify-content: center;
+    padding: rem-calc(10);
+    button {
+      height: 0.563rem;
+      width: 0.563rem;
+      &.is-active {
+        background-color: $orange;
+      }
+    }
+  }
+}
+
+.banner-small {
+  padding-top: rem-calc(18);
+  min-height: 12.75rem;
+  width: 100%;
+  background-size: cover;
+  background-color: $white;
+  @include breakpoint(large up) {
+    min-height: rem-calc(380);
+  }
+  .breadcrumb-block {
+    background-color: $white;
+    display: inline-flex;
+    @include breakpoint(xlarge up) {
+      display: inline-block;
+      padding-right: 0;
     }
-    .slider-text {
-        padding: 2.5rem 2.25rem;
-        h6 {
-            font-size: 0.75rem;
+  }
+  .breadcrumbs {
+    margin-bottom: 0;
+    @include breakpoint(medium down) {
+      display: flex;
+      white-space: nowrap;
+      overflow-x: auto;
+    }
+    li {
+      &::after {
+        display: none;
+      }
+      a {
+        position: relative;
+        display: block;
+        float: left;
+        font-size: rem-calc(12);
+        font-weight: $font-weight-500;
+        padding: 0.45rem 0.8rem;
+        text-transform: uppercase;
+        color: $orange;
+        font-family: $heading-font-family;
+        @include breakpoint(large up) {
+          padding: rem-calc(18) rem-calc(35) rem-calc(18) rem-calc(25);
+          font-size: rem-calc(14);
         }
-        h2 {
-            margin-bottom: 0.625rem;
-            font-size: 2.375rem;
+        &:hover {
+          text-decoration: none;
         }
-        .content-placeholder {
-            line-height: 1.375rem;
-            font-size: 1.125rem;
-            margin-bottom: 0.938rem;
+        &::after {
+          @include breadcrumb-arrow($white);
+          right: rem-calc(1);
         }
-        .button-group {
-            margin-bottom: 0;
+        &::before {
+          @include breadcrumb-arrow($beige);
+          right: 0;
         }
-        .share-link-btn {
-            background-color: #fff;
-            color: #8099B3;
-            font-size: 0.625rem;
+      }
+      &:last-child {
+        a {
+          color: $black-alt;
+          &::after {
+            border: none;
+          }
+          &::before {
+            border: none;
+          }
         }
+      }
     }
-    .orbit-bullets {
-        position: absolute;
-        top: rem-calc(18);
-        left: rem-calc(-35);
-        transform: rotate(90deg);
-        margin: 0;
-        background-color: #fff;
-        display: flex;
-        justify-content: center;
-        padding: rem-calc(10);
-        button {
-            height: 0.563rem;
-            width: 0.563rem;
-            &.is-active {
-                background-color: $orange;
-            }
-        }
+  }
+  .applications-title {
+    @include flex;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+    padding: rem-calc(10) rem-calc(15);
+    @include breakpoint(medium up) {
+      margin-bottom: 1.9rem;
+    }
+    @include breakpoint(large up) {
+      margin-bottom: 1rem;
+      padding: 2rem;
     }
+  }
+  .banner-overlap {
+    position: relative;
+    margin-bottom: rem-calc(-116);
+  }
+  .risk-content-title {
+    .risk-info {
+      font-weight: $font-weight-700;
+      color: $orange;
+    }
+  }
 }
-
-.banner-small{
-       padding-top: rem-calc(18);
-       height: 12.75rem;
-       width: 100%;
-       background-size: cover;
-       background-color: $white;
-       @include breakpoint(large up){
-        height: rem-calc(380);
-       }
-       .breadcrumb-block{
-        background-color: $white;
-        display: inline-flex;
-        @include breakpoint(xlarge up){
-            display: inline-block;
-            padding-right: 0;
-        }
-       }
-       .breadcrumbs{
-        margin-bottom: 0;
-        @include breakpoint(medium down){
-            display: flex;
-            white-space: nowrap;
-            overflow-x: auto;
-        }
-        li{
-         &::after{
-            display: none;
-         }
-            a{
-                position: relative; 
-                display: block;
-                float: left;
-                font-size: rem-calc(12);
-                font-weight: $font-weight-500;
-                padding: 0.45rem 0.8rem;
-                text-transform: uppercase;
-                color: $orange;
-                font-family: $heading-font-family;
-               @include breakpoint(large up){
-                padding: rem-calc(18) rem-calc(35) rem-calc(18) rem-calc(25) ;
-                font-size: rem-calc(14);
-               }
-               &:hover{
-                text-decoration:none;
-               }
-               &::after{
-                @include breadcrumb-arrow( $white);
-                right: rem-calc(1);
-               }
-               &::before{
-                @include breadcrumb-arrow( $beige);
-                right: 0;
-               }
-            }
-        &:last-child{
-            a{
-                color: $black-alt;
-                &::after{
-                    border: none;
-                }
-                &::before{
-                    border: none;
-                }
-            }
-        }    
-        }
-       }
-    
+//banner height
+.inner-page-banner {
+  min-height: 18.75rem;
+  @include breakpoint(large up) {
+    min-height: rem-calc(331);
+  }
 }
-

src/Projects/LOL-Member-Services/src/assets/scss/components/cards.scss

 .card {
-    border: none;
-    margin-bottom: 1.5rem;
-    
-    .card-section{
-        display: flex;
-        flex-flow: column wrap;
-        padding: rem-calc(25);
-        h6 {
-            font-size: 0.75rem;
-            margin-bottom: 1rem;
-            color: $dark-yellow;
-        }
-        .card-title {
-            font-size: 1.75rem;
-            font-weight: $font-weight-700;
-            color: $black;
-            font-family: $heading-font-family;
-            display: block;
-        }
-        .sub-title {
-            font-size: 0.875rem;
-            font-weight: $font-weight-700;
-            color: $dark-yellow;
-            display: inline-flex;
-            margin-bottom: 1rem;
-            text-transform: uppercase;
-        }
-        p{
-            font-size: rem-calc(14);
-            color: $black-desc;
-        }
-        .p-text-normal{
-            font-size:  0.875rem; 
-            @include breakpoint(large up){
-                font-size:  1.125rem; 
-            }
-        }
-        
+  border: none;
+  // margin-bottom: 1.5rem;
+  .img-placeholder {
+    position: relative;
+    .card-image {
+      min-height: rem-calc(175);
     }
+    .card-title {
+      position: absolute;
+      color: rgb(255, 255, 255);
+      left: 0;
+      top: 0;
+      height: 100%;
+      width: 100%;
+      padding: 1rem;
+    }
+  }
+
+  .card-section {
+    // display: flex;
+    // flex-flow: column wrap;
+    padding: rem-calc(25);
+    h6 {
+      // font-size: 0.75rem;
+      margin-bottom: 1rem;
+      // color: $dark-yellow;
+    }
+    .card-title {
+      font-size: 1.75rem;
+      font-weight: $font-weight-700;
+      color: $black;
+      font-family: $heading-font-family;
+      display: block;
+    }
+    p {
+      font-size: rem-calc(14);
+      color: $black-desc;
+    }
+    .p-text-normal {
+      font-size: 0.875rem;
+      @include breakpoint(large up) {
+        font-size: 1.125rem;
+      }
+    }
+  }
 }
 
-.banner-overlap-cards{
-    .card{
-            &-section{
-                .button{
-                    margin-top: auto;
-                }
-                .sub-title{
-                    font-size: 0.75rem;
-                    margin-bottom: rem-calc(40);
-                }
-            }
+.banner-overlap-cards {
+  .card {
+    &-section {
+      .sub-title {
+        margin-bottom: rem-calc(40);
+      }
     }
-}
\ No newline at end of file
+  }
+}
+// approach-card
+.approach-card {
+  padding: 3rem;
+  @include breakpoint(large up) {
+    padding: 3rem 3.5rem;
+  }
+}

src/Projects/LOL-Member-Services/src/assets/scss/components/event-freeform-text.scss

+.tabs,
+.tabs-content {
+  border: none;
+  color: $black-desc;
+}
+.tabs {
+  background-color: $half-white;
+  @include flex;
+  justify-content: center;
+  &-title {
+    background-color: $light-white;
+  }
+}
+.accordion-item,
+.tabs-title {
+  a {
+    font-size: 1rem;
+    color: $orange2;
+    font-weight: $font-weight-600;
+    text-transform: capitalize;
+    @include breakpoint(large up) {
+      padding: 1.25rem 3rem;
+    }
+  }
+}
+.tabs-title {
+  a {
+    &:hover,
+    &:focus,
+    &[aria-selected="true"] {
+      background: $white;
+      color: $orange2;
+    }
+  }
+}
+.tabs-subtitle {
+  color: inherit;
+  font-weight: $font-weight-500;
+}
+.document-materials {
+  .card {
+    border-bottom: 1px solid $beige;
+    &-section {
+      .icon-placeholder {
+        font-size: 2.5rem;
+        padding-right: 10px;
+      }
+    }
+  }
+  .file-name {
+    font-size: rem-calc(14);
+    color: $grey-dark-format;
+    text-decoration: underline;
+  }
+}
+.map-placeholder {
+  @include breakpoint(large down) {
+    margin-bottom: 1rem;
+  }
+  .map {
+    height: 100%;
+    width: 100%;
+  }
+}

src/Projects/LOL-Member-Services/src/assets/scss/components/risk-management.scss

+.wholistic-approach {
+  position: relative;
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: $half-white;
+    width: 100%;
+    height: calc(50% + 20px);
+    z-index: -1;
+  }
+}

src/Projects/LOL-Member-Services/src/assets/scss/global/_mixins.scss

@@ -9,17 +9,16 @@
   box-shadow: $box-shadow;
 }
 
-@mixin inset-box-shadow($top, $left, $blur, $color, $inset:"") {
-  -webkit-box-shadow:$top $left $blur $color #{$inset};
-  -moz-box-shadow:$top $left $blur $color #{$inset};
-  -ms-box-shadow:$top $left $blur $color #{$inset};
-  -o-box-shadow:$top $left $blur $color #{$inset};
-  box-shadow:$top $left $blur $color #{$inset};
+@mixin inset-box-shadow($top, $left, $blur, $color, $inset: "") {
+  -webkit-box-shadow: $top $left $blur $color #{$inset};
+  -moz-box-shadow: $top $left $blur $color #{$inset};
+  -ms-box-shadow: $top $left $blur $color #{$inset};
+  -o-box-shadow: $top $left $blur $color #{$inset};
+  box-shadow: $top $left $blur $color #{$inset};
 }
 
-
 @mixin transition($transition) {
-  transition: $transition 0.25s; 
+  transition: $transition 0.25s;
   -webkit-transition: $transition 0.25s;
   -moz-transition: $transition 0.25s;
   -ms-transition: $transition 0.25s;
@@ -42,17 +41,15 @@
   -o-transform: $transform;
 }
 
-@mixin clipPath{
+@mixin clipPath {
   -moz-clip-path: polygon(0 0, 100% 38px, 100% 100%, 0% 100%);
   -ms-clip-path: polygon(0 0, 100% 38px, 100% 100%, 0% 100%);
   -o-clip-path: polygon(0 0, 100% 38px, 100% 100%, 0% 100%);
-  clip-path: url('#Layer_1');
+  clip-path: url("#Layer_1");
   clip-path: polygon(0 0, 100% 38px, 100% 100%, 0% 100%);
   -webkit-clip-path: polygon(0 0, 100% 38px, 100% 100%, 0% 100%);
-
 }
 
-
 @mixin column-count($count) {
   column-count: $count;
   -webkit-column-count: $count;
@@ -62,57 +59,67 @@
 // black shadow
 
 @mixin button-transition {
-    -webkit-transition-duration: 0.25s;
-       -moz-transition-duration: 0.25s;
-         -o-transition-duration: 0.25s;
-            transition-duration: 0.25s;
-    -webkit-transition-timing-function: linear;
-       -moz-transition-timing-function: linear;
-         -o-transition-timing-function: linear;
-            transition-timing-function: linear;
+  -webkit-transition-duration: 0.25s;
+  -moz-transition-duration: 0.25s;
+  -o-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  -webkit-transition-timing-function: linear;
+  -moz-transition-timing-function: linear;
+  -o-transition-timing-function: linear;
+  transition-timing-function: linear;
 }
 
-@mixin gradient-black{
-  background: linear-gradient(0deg, rgba($black,0.6) 50%, rgba($white,0) 100%);
+@mixin gradient-black {
+  background: linear-gradient(
+    0deg,
+    rgba($black, 0.6) 50%,
+    rgba($white, 0) 100%
+  );
 }
 
-
 @mixin breadcrumb-arrow($border-left-color) {
   z-index: 0;
-  content: " "; 
-  display: block; 
-  width: 0; 
+  content: " ";
+  display: block;
+  width: 0;
   height: 0;
   position: absolute;
-  border-top: rem-calc(20) solid transparent;           
+  border-top: rem-calc(20) solid transparent;
   border-bottom: rem-calc(20) solid transparent;
   border-left: rem-calc(10) solid $border-left-color;
   top: 0;
-  margin-top: 0; 
-  @include breakpoint(large up){
-      border-top: rem-calc(30) solid transparent;           
-      border-bottom: rem-calc(30) solid transparent;
-      border-left: rem-calc(10) solid $border-left-color;
-      top: 0;
-      margin-top: 0; 
-  }
-
+  margin-top: 0;
+  @include breakpoint(large up) {
+    border-top: rem-calc(30) solid transparent;
+    border-bottom: rem-calc(30) solid transparent;
+    border-left: rem-calc(10) solid $border-left-color;
+    top: 0;
+    margin-top: 0;
   }
+}
 
 //Titles
-@mixin  main-title{
+@mixin main-title {
   font-size: rem-calc(30);
   line-height: rem-calc(40);
-  @include breakpoint(large up){
+  @include breakpoint(large up) {
     font-size: rem-calc(48);
     line-height: rem-calc(60);
   }
 }
-@mixin  sub-title{
+@mixin main-title-lg {
+  font-size: rem-calc(30);
+  line-height: rem-calc(40);
+  @include breakpoint(large up) {
+    font-size: rem-calc(51);
+    line-height: rem-calc(60);
+  }
+}
+@mixin sub-title {
   font-size: rem-calc(38);
   text-transform: capitalize;
 }
-@mixin  sub-title-lg{
+@mixin sub-title-lg {
   font-size: rem-calc(28);
   text-transform: capitalize;
 }
@@ -121,10 +128,10 @@
   line-height: rem-calc(25);
   text-transform: capitalize;
 }
-@mixin  sub-title-sm{
+@mixin sub-title-sm {
   font-size: rem-calc(14);
 }
-@mixin  sub-title-xs{
+@mixin sub-title-xs {
   font-size: rem-calc(12);
 }
 @mixin small-title-black {
@@ -134,32 +141,29 @@
   text-transform: capitalize;
 }
 
-@mixin  p-text-lg{
+@mixin p-text-lg {
   font-size: rem-calc(20);
   line-height: rem-calc(28);
-  @include breakpoint(large up){
+  @include breakpoint(large up) {
     font-size: rem-calc(28);
     line-height: rem-calc(32);
   }
 }
 
-
 @mixin placeholder {
   &::-webkit-input-placeholder {
-    @content
+    @content;
   }
 
   &:-moz-placeholder {
-    @content
+    @content;
   }
 
   &::-moz-placeholder {
-    @content
+    @content;
   }
 
   &:-ms-input-placeholder {
-    @content
+    @content;
   }
 }
-
-

src/Projects/LOL-Member-Services/src/assets/scss/global/_typography.scss

-body{
-    font-size: 1rem;
-    @include breakpoint(large up){
-      font-size: 1.125rem;
-    }
+body {
+  font-size: 1rem;
+  @include breakpoint(large up) {
+    font-size: 1.125rem;
+  }
 }
 h1,
 h2,
@@ -10,81 +10,96 @@ h3,
 h4,
 h5,
 h6 {
-    font-family: $heading-font-family;
-    font-weight: $font-weight-700;
-    color: $dark-yellow;
-    margin-bottom: rem-calc(15);
-    @include breakpoint(large up){
-      margin-bottom: $title-margin;
-    }
+  font-family: $heading-font-family;
+  font-weight: $font-weight-700;
+  color: $dark-yellow;
+  margin-bottom: rem-calc(15);
+  @include breakpoint(large up) {
+    margin-bottom: $title-margin;
+  }
 }
 
-p:last-child{
-    @include breakpoint(large up){
-        margin-bottom: 0;
-    }
+p:last-child {
+  @include breakpoint(large up) {
+    margin-bottom: 0;
+  }
 }
-h1{
-    @include main-title;
+h1 {
+  @include main-title;
+  @include breakpoint(large up) {
+    font-size: rem-calc(51);
+  }
 }
 h2 {
-    @include sub-title;
-    @include breakpoint(medium down){
-        font-size: 2rem;
-    }
+  @include sub-title;
+  @include breakpoint(large up) {
+    font-size: rem-calc(48);
+  }
+  @include breakpoint(medium down) {
+    font-size: 2rem;
+  }
 }
 
 h3 {
-    @include sub-title-lg;
+  font-size: 1.75rem;
+  font-weight: 700;
 }
-h4{
-    @include sub-title-md;
+.p-text-sm {
+  font-size: 0.875rem;
+  @include sub-title-lg;
 }
-h5{
-    @include sub-title-sm;
+h4 {
+  @include sub-title-md;
 }
-h6{
-    @include sub-title-xs;
+h5 {
+  @include sub-title-sm;
+}
+h6 {
+  @include sub-title-xs;
 }
-
 
 //class mixins
 
-.main-title{
-    @include main-title;
+.main-title {
+  @include main-title;
+  text-transform: capitalize;
 }
-.sub-title{
-    @include sub-title;
+.main-title-lg {
+  @include main-title-lg;
+  text-transform: capitalize;
 }
-.sub-title-lg{
-    @include sub-title-lg;
+.sub-title {
+  @include sub-title;
 }
-.sub-title-md{
-    @include sub-title-md;
+.sub-title-lg {
+  @include sub-title-lg;
 }
-.sub-title-sm{
-    @include sub-title-sm;
+.sub-title-md {
+  @include sub-title-md;
 }
-.sub-title-xs{
-    @include sub-title-xs;
+.sub-title-sm {
+  @include sub-title-sm;
+}
+.sub-title-xs {
+  @include sub-title-xs;
 }
 
-.p-text-lg{
-    @include p-text-lg;
+.p-text-lg {
+  @include p-text-lg;
 }
 
-.small-title-black{
-    @include small-title-black;
+.small-title-black {
+  @include small-title-black;
 }
 
-.p-text-sm{
-    font-size: 0.875rem;
-    color: $black-desc;
-}
-.p-text-normal{
-    font-size:  0.875rem; 
-    @include breakpoint(large up){
-        font-size:  1.125rem; 
-    }
-    color: $black !important;       
-}
\ No newline at end of file
+.p-text-sm {
+  font-size: 0.875rem;
+  color: $black-desc;
+}
+.p-text-normal {
+  font-size: 0.875rem;
+  @include breakpoint(large up) {
+    font-size: 1.125rem;
+  }
+  color: $black !important;
+}

src/Projects/LOL-Member-Services/src/assets/scss/global/_variables.scss

 // $dark-yellow: #A56F32;
 $bright-yellow: #f1c526;
-$dark-yellow: #A36E31;
+$dark-yellow: #a36e31;
 $dark-blue: #333c55;
-$half-white: #F5F4F1;
+$half-white: #f5f4f1;
 $card-drop-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.251);
 // $card-drop-shadow:0 0 30px rgba(0 0 0 / 12%);
 $btn-padding: 1.125rem 1.25rem;
-$beige: #E6E0CC;
+$beige: #e6e0cc;
 $title-margin: 1.25rem;
-$orange:#A36E31;
-$black-alt: #0D111C;
-$black-desc : #020001;
-$light-blue: #8099B3;
+$orange: #a36e31;
+$half-blue: #415899;
+$black-alt: #0d111c;
+$black-desc: #020001;
+$light-blue: #8099b3;
+$grey: #d8d8d8;
+$light-white: rgba(255, 255, 255, 0.35);
+$white: #fff;
+$orange2: #a56f32;
+$footer-black: #020d2b;
 $transparent: #0000;
-$grey : #D8D8D8;
-$peach : #E5DCC2;
-$footer-black : #020D2B;
-$grey-light: #CDCAC1;
-$grey-dark: #9D9D9D;
-
-
+$peach: #e5dcc2;
+$grey-light: #cdcac1;
+$grey-dark: #9d9d9d;
+$grey-dark-format: #969696;
 //font-weight
 $font-weight-300: 300;
 $font-weight-400: 400;
 $font-weight-500: 500;
 $font-weight-600: 600;
 $font-weight-700: 700;
-$font-weight-normal: normal;
\ No newline at end of file
+$font-weight-normal: normal;

src/Projects/LOL-Member-Services/src/assets/scss/global/global.scss

 .basic-content {
-    margin-top: $global-sec-margin;
-    text-align: center;
-    padding: 1rem 4rem;
+  margin-top: $global-sec-margin;
+  padding: 1rem 4rem;
 }
 
-
+//Accordion
+.years-accordion {
+  max-width: rem-calc(300);
+  margin-top: $global-sec-margin;
+  .accordion-title {
+    border: none;
+    font-size: rem-calc(14);
+    font-family: inherit;
+    color: $half-white;
+    border-bottom: none;
+    &::before {
+      display: none;
+    }
+    &:hover,
+    &:focus,
+    &:active {
+      color: $black;
+    }
+  }
+  .accordion-content {
+    border: none;
+    padding: 0.5rem 1rem;
+  }
+}

src/Projects/LOL-Member-Services/src/assets/scss/pages/advocacy.scss

@@ -78,5 +78,22 @@
             margin-bottom: 0;
         }
     }
+    // .video-post{
+    //     position: relative;
+    //     .video-thumbnail{
+    //         height: 35.25rem;
+    //         width: 100%;
+    //         padding: 0;
+    //     }
+    //     .video-info{
+    //         position: absolute;
+    //         top: 50%;
+    //         left: 50%;
+    //         transform: translate(-50%,50%);
+    //         .video-title{
+    //             text-transform: uppercase;
+    //         }
+    //     }
+    // }
 
 }

src/Projects/LOL-Member-Services/src/pages/applications.html

+<div class="half-white-bg">
+  <section
+    class="banner-small inner-page-banner"
+    style="background-image: url(https://unsplash.it/500/300/)"
+  >
+    <div class="grid-container">
+      <div
+        class="applications-title flex-flow-row-wrap white-bg card-drop-shadow"
+      >
+        <h1 class="margin-bottom-0 main-title-lg">Applications</h1>
+      </div>
+    </div>
+  </section>
+  <section
+    class="grid-container card-wrapper banner-overlap-cards sec-pad-bottom"
+    data-equalizer
+    data-equalize-on="medium"
+    data-equalize-by-row="true"
+  >
+    <div
+      class="grid-x grid-margin-x gutter-60 small-up-1 medium-up-3 large-up-3"
+    >
+      <div class="cell">
+        <div
+          class="card margin-bottom-xlarge card-drop-shadow white-bg"
+          data-equalizer-watch
+        >
+          <div
+            class="card-section text-center grid-x flex-dir-column flex-wrap"
+          >
+            <img
+              src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+              alt="lolinc-logo"
+              class="margin-x-auto width-75 margin-bottom-1"
+            />
+            <p class="p-text-sm">Short intro text about this application</p>
+            <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+          </div>
+        </div>
+      </div>
+      <div class="cell">
+        <div
+          class="card margin-bottom-xlarge card-drop-shadow white-bg"
+          data-equalizer-watch
+        >
+          <div
+            class="card-section text-center grid-x flex-dir-column flex-wrap"
+          >
+            <img
+              src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+              alt="lolinc-logo"
+              class="margin-x-auto width-75 margin-bottom-1"
+            />
+            <p class="p-text-sm">Short intro text about this application</p>
+            <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+          </div>
+        </div>
+      </div>
+      <div class="cell">
+        <div
+          class="card margin-bottom-xlarge card-drop-shadow white-bg"
+          data-equalizer-watch
+        >
+          <div
+            class="card-section text-center grid-x flex-dir-column flex-wrap"
+          >
+            <img
+              src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+              alt="lolinc-logo"
+              class="margin-x-auto width-75 margin-bottom-1"
+            />
+            <p class="p-text-sm">Short intro text about this application</p>
+            <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+          </div>
+        </div>
+      </div>
+      <div class="cell">
+        <div
+          class="card margin-bottom-xlarge card-drop-shadow white-bg"
+          data-equalizer-watch
+        >
+          <div
+            class="card-section text-center grid-x flex-dir-column flex-wrap"
+          >
+            <img
+              src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+              alt="lolinc-logo"
+              class="margin-x-auto width-75 margin-bottom-1"
+            />
+            <p class="p-text-sm">Short intro text about this application</p>
+            <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+          </div>
+        </div>
+      </div>
+      <div class="cell">
+        <div
+          class="card margin-bottom-xlarge card-drop-shadow white-bg"
+          data-equalizer-watch
+        >
+          <div
+            class="card-section text-center grid-x flex-dir-column flex-wrap"
+          >
+            <img
+              src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+              alt="lolinc-logo"
+              class="margin-x-auto width-75 margin-bottom-1"
+            />
+            <p class="p-text-sm">Short intro text about this application</p>
+            <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+          </div>
+        </div>
+      </div>
+      <div class="cell">
+        <div
+          class="card margin-bottom-xlarge card-drop-shadow white-bg"
+          data-equalizer-watch
+        >
+          <div
+            class="card-section text-center grid-x flex-dir-column flex-wrap"
+          >
+            <img
+              src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+              alt="lolinc-logo"
+              class="margin-x-auto width-75 margin-bottom-1"
+            />
+            <p class="p-text-sm">Short intro text about this application</p>
+            <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+          </div>
+        </div>
+      </div>
+      <div class="cell">
+        <div
+          class="card margin-bottom-xlarge card-drop-shadow white-bg"
+          data-equalizer-watch
+        >
+          <div
+            class="card-section text-center grid-x flex-dir-column flex-wrap"
+          >
+            <img
+              src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+              alt="lolinc-logo"
+              class="margin-x-auto width-75 margin-bottom-1"
+            />
+            <p class="p-text-sm">Short intro text about this application</p>
+            <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+          </div>
+        </div>
+      </div>
+      <div class="cell">
+        <div
+          class="card margin-bottom-xlarge card-drop-shadow white-bg"
+          data-equalizer-watch
+        >
+          <div
+            class="card-section text-center grid-x flex-dir-column flex-wrap"
+          >
+            <img
+              src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+              alt="lolinc-logo"
+              class="margin-x-auto width-75 margin-bottom-1"
+            />
+            <p class="p-text-sm">Short intro text about this application</p>
+            <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+          </div>
+        </div>
+      </div>
+      <div class="cell">
+        <div
+          class="card margin-bottom-xlarge card-drop-shadow white-bg"
+          data-equalizer-watch
+        >
+          <div
+            class="card-section text-center grid-x flex-dir-column flex-wrap"
+          >
+            <img
+              src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+              alt="lolinc-logo"
+              class="margin-x-auto width-75 margin-bottom-1"
+            />
+            <p class="p-text-sm">Short intro text about this application</p>
+            <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>

src/Projects/LOL-Member-Services/src/pages/index.html

 <body>
-    <!-- <a href="advocacy.html">Advocacy</a><br>
+  <!-- <a href="advocacy.html">Advocacy</a><br>
     <a href="article-detail.html">Article-detail</a>
     -->
-    {{> hero-carousel}}
-    <div class="half-white-bg banner-pad">
-        {{> cards}}
- {{> basic-content}}
- {{> cards-slider}}
- </div>
-
+  {{> hero-carousel}}
+  <div class="half-white-bg banner-pad">
+    {{> cards}} {{> basic-content}} {{> cards-slider}}
+  </div>
 </body>

src/Projects/LOL-Member-Services/src/partials/banner.html

@@ -106,4 +106,34 @@
             <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
         </nav>
     </div>
+    <div class="grid-container">
+        <div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-3">  
+            <div class="cell">
+                <div class="card half-white-bg" data-equalizer-watch>
+                    <div class="card-section">
+                        <h3>Leadership Development</h3>                 
+                        <p>Visit our Leader Development website to learn more about our programs 
+                            and other ways to get engaged with Land O’Lakes.</p>
+                        <div class="expanded width-75 margin-x-auto">
+                            <a href="#" class="button">SEE PRODUCT OFFERING</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="cell">
+              <div class="callout">
+                <h6>MILK MARKET</h6>                
+                <h4 class="lead">XXXXXXXX</h4>
+                <p class="subheader">Find Earth-like planets life outside the Solar System</p>
+              </div>
+            </div>
+            <div class="cell">
+              <div class="callout">
+                <h6>MILK MARKET</h6>               
+                <p class="lead">Copernican Revolution caused an uproar</p>
+                <p class="subheader">Find Earth-like planets life outside the Solar System</p>
+              </div>
+            </div>         
+          </div>
+    </div>
 </div>
\ No newline at end of file

src/Projects/LOL-Member-Services/src/partials/cards.html

-
 <section class="banner-overlap-cards">
   <div class="grid-container text-center">
-    <div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-3 align-center" data-equalizer data-equalize-on="medium" id="test-eq">
+    <div
+      class="grid-x grid-margin-x gutter-60 small-up-1 medium-up-2 large-up-3 align-center"
+      data-equalizer
+      data-equalize-on="medium"
+      id="test-eq"
+    >
       <div class="cell">
         <div class="card white-bg card-drop-shadow" data-equalizer-watch>
-          <div class="card-section" >
-              <h6 class="sub-title align-center">MILK INCOME STATUS</h6>
-              <h3 class="card-title margin-bottom-0">$XX,XXXXX</h3>
-              <h3 class="card-title margin-bottom-0">$XX,XXXXX</h3>
-              <p class="margin-bottom-3">Advancement  Check for April Check </p>
-              <a href="#" class="button expanded">LAUNCH MARKET PLACE</a>
+          <div class="card-section grid-x flex-dir-column flex-wrap">
+            <h6 class="sub-title-sm align-center">MILK INCOME STATUS</h6>
+            <h3 class="card-title margin-bottom-0">$XX,XXXXX</h3>
+            <h3 class="card-title margin-bottom-0">$XX,XXXXX</h3>
+            <p class="margin-bottom-3">Advancement Check for April Check</p>
+            <a href="#" class="button expanded margin-top-auto"
+              >LAUNCH MARKET PLACE</a
+            >
           </div>
         </div>
       </div>
-  
+
       <div class="cell">
         <div class="card white-bg card-drop-shadow" data-equalizer-watch>
-          <div class="card-section" >
-            <h6 class="sub-title align-center">MARKETPLACE</h6>
+          <div class="card-section grid-x flex-dir-column flex-wrap">
+            <h6 class="sub-title-sm align-center">MARKETPLACE</h6>
             <h3 class="card-title margin-bottom-0">$XX,XXX / $XX,XXX</h3>
-              <p class="margin-bottom-3">Trending Base (From Previous Mo)</p>
-              <a href="#" class="button expanded">LAUNCH MARKET PLACE</a>
+            <p class="margin-bottom-3">Trending Base (From Previous Mo)</p>
+            <a href="#" class="button expanded margin-top-auto"
+              >LAUNCH MARKET PLACE</a
+            >
           </div>
         </div>
       </div>
-  
+
       <div class="cell">
         <div class="card white-bg card-drop-shadow" data-equalizer-watch>
-          <div class="card-section" >
-            <h6 class="sub-title align-center">COMPANY PERFORMANCE</h6>
+          <div class="card-section grid-x flex-dir-column flex-wrap">
+            <h6 class="sub-title-sm align-center">COMPANY PERFORMANCE</h6>
             <h3 class="card-title margin-bottom-0">$XX,XXX</h3>
-              <p class="margin-bottom-3">Advancement Check for April</p>
-              <a href="#" class="button expanded">LAUNCH MARKET PLACE</a>
+            <p class="margin-bottom-3">Advancement Check for April</p>
+            <a href="#" class="button expanded margin-top-auto"
+              >LAUNCH MARKET PLACE</a
+            >
           </div>
         </div>
       </div>
-     
-    
     </div>
   </div>
-</section>
\ No newline at end of file
+</section>