Merge pull request #50 from mcclatchy/amp-key-takeaways

add key takeaway styles to amp pages

Author: gabrielakhanna

dist/amp.css

@@ -1729,6 +1729,73 @@ footer {
   margin: 0;
 }
 
+/**
+ * AI Summary/Key Takeaways
+ */
+ .ai-summary-wrapper { 
+  padding: 2px;
+  position: relative;
+  border-radius: 3px;
+  background: linear-gradient(0deg, #BD56FF, #0FB7FF);
+}
+
+@media (max-width: 800px) {
+  .story-body .ai-summary-wrapper {
+    margin: var(--space);
+  }
+}
+
+.ai-summary {
+  font-family: var(--sans);
+  background-color: var(--paper-color);
+  padding: var(--space);
+  --grid-row-gap: 5px;
+  --columns: auto;
+  --header-transform: none;
+  --secondary-text-color: var(--lightgray);
+}
+
+@media (min-width: 797px) {
+  .ai-summary .grid {
+    grid-auto-flow: column;
+    align-items: baseline;
+  }
+}
+
+.ai-summary .expander {
+  justify-content: space-between;
+  align-items: baseline;
+  --link-color: var(--text-color);
+}
+
+.ai-summary-header {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.ai-summary p {
+  font-size: 0.67em;
+  color: var(--darkgray);
+  margin: 0;
+}
+
+.ai-summary p a {
+  display: inline-block;
+}
+
+.ai-summary ul {
+  list-style-type: square;
+  font-size: 0.78em;
+  line-height: 1.5em;
+  margin-bottom: 0;
+}
+
+.ai-summary hr {
+  align-self: stretch;
+  border: .5px solid #afb9ca;
+}
+
 /**
  * SWG Promo card
  */