revised content

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

@@ -721,17 +721,95 @@ div.guidance {
    height: 400px
 }
 
-a.usa-link.guidance::after {
-   content: "";
-   display: inline-block;
-   width: 1.06rem;
-   height: 1.06rem;
-   background-color: currentColor;
-   -webkit-mask-image: url('../img/usa-icons/launch.svg');
-   mask-image: url('../img/usa-icons/launch.svg');
-   -webkit-mask-size: 1.06rem 1.06rem;
-   mask-size: 1.06rem 1.06rem;
-   mask-repeat: no-repeat;
-   vertical-align: text-bottom;
-   margin-left: 0.2em;
+$do-dont-color-do: "green-cool-50v";
+$do-dont-color-dont: "red-cool-50v";
+$do-dont-color-border: "gray-cool-20";
+$do-dont-padding: 3;
+$do-dont-top-bar-width: 1;
+
+.do-dont {
+   display: flex;
+   height: 100%;
+   padding-top: units(2);
+}
+
+.do-dont__do,
+.do-dont__dont {
+   background-color: color("white");
+   border: 1px solid color($do-dont-color-border);
+   flex: 1 0 0;
+   height: 100%;
+   position: relative;
+}
+
+.do-dont__do {
+   padding: 0rem;
+}
+
+.do-dont__do:before,
+.do-dont__dont:before {
+   content: "";
+   position: absolute;
+   height: units($do-dont-top-bar-width);
+   width: calc(100% + 2px);
+   top: -1px;
+   left: -1px;
+}
+
+.do-dont__do:before {
+   background-color: color($do-dont-color-do);
+}
+
+.do-dont__dont:before {
+   background-color: color($do-dont-color-dont);
+}
+
+.do-dont__heading {
+   // @include typeset("lang", "lg", 2);
+   align-items: center;
+   border-bottom: 1px solid color($do-dont-color-border);
+   display: flex;
+   font-weight: fw("bold");
+   margin: 0;
+   padding: units(4) units($do-dont-padding) units($do-dont-padding);
+
+   .usa-icon {
+      @include u-square(3);
+      margin-right: units(0.5);
+   }
+}
+
+.do-dont__do .do-dont__heading {
+   color: color($do-dont-color-do);
+}
+
+.do-dont__dont .do-dont__heading {
+   color: color($do-dont-color-dont);
+}
+
+.do-dont__content {
+   padding: 0 units($do-dont-padding) units($do-dont-padding) units($do-dont-padding);
+
+   ul {
+      margin-bottom: 0;
+      overflow-wrap: anywhere;
+   }
+
+   li+li {
+      margin-top: units(1);
+   }
+}
+
+.site-note {
+   background-color: #dfe1e2;
+   max-width: 72ex;
+   padding: .5rem;
+   border-radius: 2px;
+}
+
+img.guidance_card_img  {
+   display: block;
+   width: 50%;
+   height: auto;
+   margin: 0 auto;
 }