fix: simplify styling of callouts use correct margins

Author: thecodrr

assets/style.css

@@ -144,45 +144,26 @@ th {
   padding: 15px;
 }
 
-.callout {
-  margin-top: 28px;
-  margin-bottom: 28px;
-  width: 100%;
-  border-radius: 5px;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-bottom: 4px;
-  box-sizing: border-box;
-}
-
 .callout p {
-  padding-top: 8px;
-  margin-top: 0px;
-  margin-bottom: 4px;
-  line-height: 18pt;
-  color: var(--fg);
+  margin: 0px;
 }
 
-.callout p:last-child {
-  margin-bottom: 4px;
+.callout {
+  border-radius: 5px;
+  overflow: hidden;
+  margin-bottom: 20px;
 }
 
 .callout .callout-title {
-  border-top-right-radius: 5px;
-  border-top-left-radius: 5px;
-  margin-left: -16px;
-  margin-top: -16px;
-  margin-right: -16px;
-  margin-bottom: 0px;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-
+  padding: 2px 10px;
   font-weight: 700;
   color: #fff !important;
 }
 
+.callout p:not(.callout-title) {
+  margin: 5px 10px;
+}
+
 .callout.info {
   background: var(--info-dim);
 }