Applying styles for Koenig content (#455)

refs https://github.com/TryGhost/Ghost/issues/9311
- move `.kg-card-markdown` styles and add deprecation notice
- add support for new `.kg-post` wrapper
- add support for `.kg-image` and `.kg-image-wide/full` image variants
- add support for image captions

assets/css/screen.css

@@ -18,6 +18,7 @@ production stylesheet in assets/built/screen.css
   7.3. Comments
   7.4. Related Posts
   7.5. Floating Header
+  7.6. Koenig Styles
 8.  Author Template
 9.  Error Template
 10. Subscribe Overlay
@@ -784,13 +785,6 @@ The first (most recent) post in the list is styled to be bigger than the others
     display: none;
 }
 
-.kg-card-markdown {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 920px;
-}
-
 .post-full-content h1,
 .post-full-content h2,
 .post-full-content h3,
@@ -816,11 +810,6 @@ The first (most recent) post in the list is styled to be bigger than the others
     margin: 0;
 }
 
-.post-template .kg-card-markdown > p:first-child {
-    font-size: 1.25em;
-    line-height: 1.5em;
-}
-
 .post-full-content a {
     color: #000;
     box-shadow: var(--blue) 0 -1px 0 inset;
@@ -1822,6 +1811,82 @@ Usage (In Ghost editor):
 }
 
 
+/* 7.6. Koenig Styles
+/* ---------------------------------------------------------- */
+
+/* For Ghost 1.0 */
+.kg-card-markdown {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 920px;
+}
+
+.post-template .kg-card-markdown > p:first-child {
+    font-size: 1.25em;
+    line-height: 1.5em;
+}
+/* ^ .kg-card-markdown will be deprecated */
+
+
+.post-template .kg-post > p:first-child {
+    font-size: 1.25em;
+    line-height: 1.5em;
+}
+
+.kg-post {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 920px;
+}
+
+.post-full-content .kg-image {
+    max-width: 100%;
+}
+
+/* Preventing full-width image overlap with post image.  */
+.post-full-image + .post-full-content .kg-post *:first-child .kg-image {
+    width: 100%;
+}
+
+.post-full-content .kg-image-wide {
+    max-width: 1040px;
+}
+
+.post-full-content .kg-image-full {
+    max-width: 100vw;
+}
+
+.kg-image-card figcaption {
+    font-size: 80%;
+    margin: -1.5em auto 3em;
+}
+
+.post-full-content .kg-image-full + figcaption {
+    max-width: 840px;
+}
+
+@media (max-width: 1040px) {
+    .post-full-content .kg-image-full {
+        width: 100vw;
+    }
+}
+
+@media (max-width: 1170px) {
+    .post-full-content .kg-image-full + figcaption {
+        padding: 0 11vw;
+        max-width: 100vw;
+    }
+}
+
+@media (max-width: 500px) {
+    .post-full-content .kg-image-full + figcaption {
+        padding: 0 4vw;
+    }
+}
+
+
 /* 8. Author Template
 /* ---------------------------------------------------------- */