Upgrading Casper to 2.4.0

refs https://github.com/TryGhost/Ghost/pull/9741
- Ghost 1.25 has updated the HTML output of Koenig beta posts
  - the `<div class="kg-post">` wrapper around post content has been removed
  - for image cards the `.kg-image-wide` and `.kg-image-full` classes have been changed to `.kg-width-wide` and `.kg-width-full` and applied to the `<figure>` element rather than the `<img>` element
- this will be the default for *all* posts after upgrading to Ghost 2.0

Example output of the `{{content}}` helper for Koenig beta...

Before 1.25.0 (Ghost 1.23.0-1.24.9):
```html
<div class="kg-post">
    <figure class="kg-image-card">
        <img class="kg-image kg-image-wide" src="...">
        <figcaption>example wide image</figcaption>
    </figure>
</div>
```

After 1.25.0:
```html
<figure class="kg-image-card kg-width-wide">
    <img class="kg-image" src="...">
    <figcaption>example wide image</figcaption>
</figure>
```

For reference, in Ghost 1.x a non Koenig post with nothing but an image in the markdown (`![](...)`) would generate output like this:

```html
<div class="kg-card-markdown">
    <img src="...">
</div>
```

assets/css/screen.css

@@ -1819,6 +1819,13 @@ Usage (In Ghost editor):
 /* 7.6. Koenig Styles
 /* ---------------------------------------------------------- */
 
+.post-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 920px;
+}
+
 /* For Ghost 1.0 */
 .kg-card-markdown {
     display: flex;
@@ -1831,39 +1838,31 @@ Usage (In Ghost editor):
     font-size: 1.25em;
     line-height: 1.5em;
 }
-/* ^ .kg-card-markdown will be deprecated */
+/* ^ .kg-card-markdown will be will disappear in Ghost 2.0 */
 
-
-.post-template .kg-post > p:first-child {
+.post-template .post-content > 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 {
+.post-full-image + .post-full-content .kg-content *:first-child .kg-image {
     width: 100%;
 }
 
-.post-full-content .kg-image-wide {
+.post-full-content .kg-width-wide .kg-image {
     max-width: 1040px;
 }
 
-.post-full-content .kg-image-full {
+.post-full-content .kg-width-full .kg-image {
     max-width: 100vw;
 }
 
-.kg-post figcaption {
+.post-content figcaption {
     font-size: 80%;
     line-height: 1.6em;
     text-align: center;
@@ -1900,7 +1899,7 @@ Usage (In Ghost editor):
 
 
 @media (max-width: 1040px) {
-    .post-full-content .kg-image-full {
+    .post-full-content .kg-width-full .kg-image {
         width: 100vw;
     }
 }

package.json

@@ -2,7 +2,7 @@
     "name": "casper",
     "description": "The default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
     "demo": "https://demo.ghost.io",
-    "version": "2.3.3",
+    "version": "2.4.0",
     "engines": {
         "ghost": ">=1.2.0"
     },

post.hbs

@@ -33,7 +33,9 @@ into the {body} of the default.hbs template --}}
             {{/if}}
 
             <section class="post-full-content">
-                {{content}}
+                <div class="post-content">
+                    {{content}}
+                </div>
             </section>
 
             {{!-- Email subscribe form at the bottom of the page --}}