merge main

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -675,3 +675,52 @@ details form {
 .usa-prose.margin-top-0 {
    margin-top: 0;
 }
+
+h3.guidance {
+   margin-bottom: 1rem;
+}
+
+ol.guidance-list {
+   counter-reset: item;
+   list-style-type: none;
+   padding-left: 0;
+}
+
+ol.guidance-list.set-two {
+   counter-reset: item 6;
+}
+
+ol.guidance-list.set-three {
+   counter-reset: item 10;
+}
+
+ol.guidance-list li {
+   counter-increment: item;
+   margin-bottom: 15px;
+   position: relative;
+   padding-left: 40px;
+}
+
+ol.guidance-list li::before {
+   content: counter(item);
+   background-color: #000;
+   color: white;
+   width: 32px;
+   height: 32px;
+   border-radius: 50%;
+   display: inline-flex;
+   justify-content: center;
+   align-items: center;
+   line-height: 1;
+   position: absolute;
+   left: 0;
+   top: 0;
+}
+
+li.guidance {
+   padding-bottom: 50px;
+}
+
+div.guidance {
+   height: 400px
+}

app/templates/components/guidance/cards.html

@@ -1,4 +1,4 @@
-<h3 class="margin-bottom-4">{{card_header}}</h3>
+<h3 class="padding-bottom-2">{{card_header}}</h3>
 <ul class="usa-card-group">
   {% for item in card_contents %}
   <li class="usa-card grid-col tablet:grid-col-4">
@@ -19,5 +19,4 @@
     </div>
   </li>
   {% endfor %}
-
 </ul>