feat: new caption design

src/sass/components/_pageheader.scss

@@ -36,6 +36,7 @@
 
   &__contents {
     z-index: 1;
+    width: 100%;
     padding-top: 3rem;
     @include screen(md) {
       padding-top: 4rem;

src/sass/components/_postheader.scss

@@ -1,4 +1,6 @@
 .post-header {
+  width: 100%;
+
   &__heading {
     @include my(0.5rem);
 
@@ -44,7 +46,6 @@
     flex-direction: row;
     justify-content: center;
     @include my(0.5rem);
-    @include py(0.5rem);
   }
   &__author-images {
     display: flex;
@@ -69,4 +70,26 @@
   &__social {
     color: $white;
   }
+  &__caption {
+    text-align: center;
+    font-size: 0.75rem;
+    margin-top: 0;
+    margin-bottom: 0;
+    @include screen(md) {
+      text-align: center;
+      font-size: 0.875rem;
+    }
+  }
+  &__caption-text {
+    background: var(--bg-color);
+    color: var(--highlight-color);
+    padding: 0.25rem 1rem;
+    border-radius: 1rem;
+    font-size: $text-sm;
+    box-shadow: 0px 0px 4px 1px var(--accent-color);
+
+    @include screen(md) {
+      padding: 0.5rem 2rem;
+    }
+  }
 }

src/sass/ghost.scss

@@ -13,6 +13,8 @@
     flex-direction: column;
     align-items: center;
     object-fit: contain;
+    position: relative;
+
     .kg-image {
       width: 100%;
     }
@@ -35,9 +37,23 @@
   }
   .kg-card figcaption {
     font-size: $text-sm;
+    background: var(--bg-color);
     color: var(--highlight-color);
-    margin-top: 0.5rem;
+    padding: 0.25rem 1rem;
+    border-radius: 1rem;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
     text-align: center;
+
+    @include screen(md) {
+      padding: 0.5rem 2rem;
+    }
+  }
+  .kg-image-card figcaption {
+    position: absolute;
+    bottom: 2rem;
+
+    box-shadow: 0px 0px 4px 1px var(--accent-color);
   }
 
   .kg-gallery-container {