Update styling for modal macro and add notes about what classes to use to maintain styling

styles/components/_modal.scss

@@ -50,9 +50,8 @@ body {
 
   &__body {
     background-color: $color-white;
-    padding: $gap * 2;
+    padding: $gap * 1.5;
     width: 100%;
-    border-radius: 5px;
     overflow-y: auto;
     -ms-overflow-style: scrollbar;
 
@@ -60,10 +59,6 @@ body {
       max-height: calc(100vh - #{$gap * 8});
     }
 
-    @include media($medium-screen) {
-      padding: $gap * 2.5 $gap * 5;
-    }
-
     h1,
     h2 {
       @include h3;
@@ -121,6 +116,17 @@ body {
         }
       }
     }
+
+    .action-group {
+      background-color: $color-gray-lightest;
+      padding: $gap * 2;
+      margin: 0 (-$gap * 1.5) (-$gap * 1.5);
+    }
+
+    hr {
+      border-bottom: 1px solid $color-gray-lighter;
+      margin: 0 (-$gap * 1.5);
+    }
   }
 
   &__dismiss {

templates/components/modal.html

@@ -6,6 +6,11 @@
       <div class='modal__container'>
         <div class='modal__dialog' role='dialog' aria-modal='true'>
           <div class='modal__body'>
+            <!-- Use these elements in caller for modal to be styled properly -->
+            <!-- h1 for header text -->
+            <!-- hr -->
+            <!-- div class='action-group' for buttons -->
+
             {{ caller() }}
 
             {% if dismissable %}