diplomas list

assets/sass/_theme/sections/diplomas.sass

 ul.diplomas
     @include list-reset
     > li
-        margin-bottom: $spacing3
+        margin-bottom: $spacing0
+        @include media-breakpoint-up(md)
+            margin-bottom: $spacing3
         > a
-            @include h3
+            @include h2
+            display: block
+            text-decoration: none
+            padding-bottom: $spacing1
+            padding-top: $spacing1
+            border-bottom: 1px solid $color-border
+            @include icon("arrow-right", after,  $small-size)
+                align-self: center
+                margin-left: auto
+            &:hover
+                color: $color-accent
+            @include media-breakpoint-down(md)
+                position: relative
+                padding-right: $spacing1
+                &::after
+                    position: absolute
+                    bottom: $spacing1
+                    right: 0
+            @include media-breakpoint-up(md)
+                display: flex
+                align-items: baseline
+                span
+                    margin-left: $spacing1
+                
+        .content
+            @include grid(2, md)
+            padding-bottom: $spacing1
+            padding-top: $spacing1
+
         .programs
+            @include media-breakpoint-down(md)
+                margin-top: $spacing1
             li
+                @include h3
                 display: block
+                border-bottom: 0
+                padding: 0
+                + li
+                    margin-top: $spacing1
+                a:hover
+                    color: $color-accent
+                        
         .program
             div
                 @include media-breakpoint-up(md)

layouts/partials/diplomas/diplomas.html

@@ -13,15 +13,23 @@
           </span>
         {{ end }}
       </a>
-      {{- if $show_programs }}
-        <ol class="programs">
-          {{- range .Pages -}}
-            <li>
-              {{ partial "programs/program.html" . }}
-            </li>
-          {{- end -}}
-        </ol>
-      {{ end -}}
+      <div class="content">
+        <div class="description">
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse labore aliquid nobis quasi, molestiae voluptatum ullam et consequatur voluptas. Eligendi quaerat veniam, sequi repellat illo dignissimos quasi libero itaque dolorum?
+          {{- partial "PrepareHTML" .Params.description_short -}}
+        </div>
+        {{- if $show_programs }}
+          <ol class="programs">
+            {{- range .Pages -}}
+              <li>
+                <a href="{{ .Permalink }}" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" .Title)) }}">
+                  {{- partial "PrepareHTML" .Title -}}
+                </a>
+              </li>
+            {{- end -}}
+          </ol>
+        {{ end -}}
+      </div>
     </li>
   {{ end }}
 </ul>