essential programs

assets/sass/_theme/_utils.sass

@@ -74,15 +74,15 @@
         padding-left: $grid-gutter
         padding-right: $grid-gutter
 
-@mixin grid($cols: 12, $breakpoint: false)
+@mixin grid($cols: 12, $breakpoint: false, $gap-y: $grid-gutter/2)
     @if $breakpoint
         @include media-breakpoint-up($breakpoint)
             display: grid
-            grid-gap: $grid-gutter/2 $grid-gutter
+            grid-gap: $gap-y $grid-gutter
             grid-template-columns: repeat($cols, 1fr)
     @else
         display: grid
-        grid-gap: $grid-gutter/2 $grid-gutter
+        grid-gap: $gap-y $grid-gutter
         grid-template-columns: repeat($cols, 1fr)
 
 @function col($nb, $base: 12)

assets/sass/_theme/design-system/hero.sass

@@ -20,6 +20,12 @@
 
     p
         margin-bottom: 0
+    a
+        color: $hero-color
+        text-decoration-color: rgba($hero-color, 0.3)
+        &:hover
+            text-decoration-color: $hero-color
+            
 
     > div:first-of-type
         > div

assets/sass/_theme/design-system/nav.sass

@@ -35,7 +35,7 @@
         &:not(:hover)
             text-decoration-color: transparent
         &[aria-expanded]
-            @include icon('caret', 'after')
+            @include icon(caret, after)
                 font-size: px2rem(6)
                 margin-left: px2rem(5)
                 transition: transform  0.15s
@@ -169,21 +169,20 @@ body
         display: none
         vertical-align: middle
 
-// .dropdown-share
-//     @extend .dropdown
-//     > button
-//         @extend .btn
-//         @extend .btn-lg
-//         @extend .btn-outline-light
-//         &::after
-//             @include icon
-//             content: map-get($icons, "social")
-//             margin-left: px2rem(10)
-//     .dropdown-menu
-//         padding: 0
-//         .share
-//             li
-//                 margin: 0
-//         a
-//             @extend .dropdown-item
-//             color: $body-color
+.dropdown-share
+    // @extend .dropdown
+    > button
+        // @extend .btn
+        // @extend .btn-lg
+        // @extend .btn-outline-light
+        @include icon(social, after)
+            margin-left: px2rem(10)
+
+    .dropdown-menu
+        padding: 0
+        .share
+            li
+                margin: 0
+        a
+            // @extend .dropdown-item
+            color: $body-color

assets/sass/_theme/design-system/typography.sass

@@ -84,11 +84,15 @@ a,
 
 .link-more
     @include link
-    @include icon('arrow', before)
+    @include icon(arrow, before)
     &::before
         font-size: px2rem(10)
         margin-right: px2rem(5)
 
+dd
+    margin-bottom: 0.5rem
+    margin-left: 0
+
 ::selection
     background: rgba($main-color, .7)
     color: $main-background-color

assets/sass/_theme/design-system/vendors/splide.sass

@@ -9,10 +9,10 @@
         svg
             display: none
         &--prev
-            @include icon('arrow-left')
+            @include icon(arrow-left)
             right: 100%
         &--next
-            @include icon('arrow-right')
+            @include icon(arrow-right)
             left: 100%
     &__pagination
         display: flex
@@ -59,10 +59,10 @@
         width: 48px
 
     &__play
-        @include icon('play')
+        @include icon(play)
 
     &__pause
-        @include icon('pause')
+        @include icon(pause)
         display: none
 
 

assets/sass/_theme/sections/diplomas.sass

@@ -22,7 +22,7 @@ ul.diplomas
     @extend .h3
     button
         @include button-reset
-        @include icon('caret', 'after')
+        @include icon(caret, after)
 
     .dropdown-menu
         @include inset(100%, 0, auto, auto)
@@ -45,4 +45,24 @@ ul.diplomas
             &:hover
                 background-color: lighten(black, 3)
             &:focus
-                color: black
\ No newline at end of file
+                color: black
+
+.essential
+    @include grid(12, false, 0)
+    flex-wrap: wrap
+    font-size: px2rem(18)
+    margin-bottom: 0
+    dt,
+    dd
+        margin: 0
+        padding-bottom: px2rem(12)
+        padding-top: px2rem(12)
+    dt
+        grid-column: 1/4
+        opacity: .8
+        @include media-breakpoint-down(md)
+            padding-bottom: 0
+    dd
+        grid-column: 5/13
+        @include media-breakpoint-down(md)
+            padding-top: 0
\ No newline at end of file

assets/sass/_theme/sections/programs.sass

@@ -76,6 +76,19 @@ ol.programs
 
 
 .programs__section
+    .hero
+        display: block
+        .dropdown-share
+            margin-top: $spacing1
+            @include media-breakpoint-up(md)
+                bottom: 2.25rem
+                margin-top: 0
+                position: absolute
+                right: $grid-gutter
+            > button
+                @include media-breakpoint-down(md)
+                    width: 100%
+
     .lead
         padding-top: $spacing4
     aside