/* ===========================================================================
   Global — rules applying to 3 or more card types
   =========================================================================== */
.post-content .kg-card,
.post-content .kg-card * {
   box-sizing: border-box;
}

.post-content .kg-card img,
.post-content .kg-card video,
.post-content .kg-card audio {
   max-width: 100%;
   height: auto;
   display: block;
}

.post-content .kg-card figcaption {
   font-size: 12px;
   line-height: 1.3;
   display: block;
   width: 100%;
   margin-top: 5px;
   color: var(--color-text-muted);
}

.post-content .kg-card figcaption p {
   margin: 0;
   padding: 0;
}

.post-content .kg-callout-card,
.post-content .kg-toggle-card,
.post-content .kg-audio-card,
.post-content .kg-video-card,
.post-content .kg-button-card,
.post-content .kg-product-card,
.post-content .kg-nft-card,
.post-content .kg-before-after-card,
.post-content .kg-file-card,
.post-content .kg-paywall-card,
.post-content .kg-signup-card,
.post-content .kg-cta-card {
   margin: 30px 0;
}

.post-content .kg-image-card,
.post-content .kg-gallery-card,
.post-content .kg-embed-card {
   margin: 50px 0;
}

@media (max-width: 767px) {

   .post-content .kg-image-card,
   .post-content .kg-gallery-card,
   .post-content .kg-embed-card {
      margin: 35px 0;
   }
}

/* ===========================================================================
   1. Callout card
   =========================================================================== */
.post-content .kg-callout-card {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   padding: 20px;
   border-radius: var(--radius-card);
   background-color: var(--color-surface);
   color: var(--color-text);
   border: 1px solid var(--color-border);
}

.post-content .kg-callout-card-emoji,
.post-content .kg-callout-emoji {
   width: 36px;
   height: 36px;
   min-width: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   flex-shrink: 0;
}

.post-content .kg-callout-card-text,
.post-content .kg-callout-text {
   flex: 1 1 auto;
   padding-top: 2px;
   line-height: 1.55;
}

.post-content .kg-callout-card-grey,
.post-content .kg-callout-card-background-grey {
   background-color: var(--color-surface);
}

.post-content .kg-callout-card-white,
.post-content .kg-callout-card-background-white {
   background-color: var(--color-bg);
}

.post-content .kg-callout-card-blue,
.post-content .kg-callout-card-background-blue {
   background-color: #e8f4fd;
}

.post-content .kg-callout-card-green,
.post-content .kg-callout-card-background-green {
   background-color: #e8f5ea;
}

.post-content .kg-callout-card-yellow,
.post-content .kg-callout-card-background-yellow {
   background-color: #fdeacc;
}

.post-content .kg-callout-card-red,
.post-content .kg-callout-card-background-red {
   background-color: #fce6e6;
}

.post-content .kg-callout-card-pink,
.post-content .kg-callout-card-background-pink {
   background-color: #fbeaea;
}

.post-content .kg-callout-card-purple,
.post-content .kg-callout-card-background-purple {
   background-color: #ede8fd;
}

.post-content .kg-callout-card-accent,
.post-content .kg-callout-card-background-accent {
   background-color: var(--color-accent);
   color: #fff;
}

@media (max-width: 480px) {
   .post-content .kg-callout-card {
      padding: 12px;
      gap: 10px;
   }
}

[data-theme="dark"] .post-content .kg-callout-card-blue,
[data-theme="dark"] .post-content .kg-callout-card-background-blue {
   background-color: #0e2235;
}

[data-theme="dark"] .post-content .kg-callout-card-green,
[data-theme="dark"] .post-content .kg-callout-card-background-green {
   background-color: #0d2419;
}

[data-theme="dark"] .post-content .kg-callout-card-yellow,
[data-theme="dark"] .post-content .kg-callout-card-background-yellow {
   background-color: #2d2007;
}

[data-theme="dark"] .post-content .kg-callout-card-red,
[data-theme="dark"] .post-content .kg-callout-card-background-red {
   background-color: #2d0f0f;
}

[data-theme="dark"] .post-content .kg-callout-card-pink,
[data-theme="dark"] .post-content .kg-callout-card-background-pink {
   background-color: #2d0f18;
}

[data-theme="dark"] .post-content .kg-callout-card-purple,
[data-theme="dark"] .post-content .kg-callout-card-background-purple {
   background-color: #1d1030;
}

@media (prefers-color-scheme: dark) {

   :root:not([data-theme="light"]) .post-content .kg-callout-card-blue,
   :root:not([data-theme="light"]) .post-content .kg-callout-card-background-blue {
      background-color: #0e2235;
   }

   :root:not([data-theme="light"]) .post-content .kg-callout-card-green,
   :root:not([data-theme="light"]) .post-content .kg-callout-card-background-green {
      background-color: #0d2419;
   }

   :root:not([data-theme="light"]) .post-content .kg-callout-card-yellow,
   :root:not([data-theme="light"]) .post-content .kg-callout-card-background-yellow {
      background-color: #2d2007;
   }

   :root:not([data-theme="light"]) .post-content .kg-callout-card-red,
   :root:not([data-theme="light"]) .post-content .kg-callout-card-background-red {
      background-color: #2d0f0f;
   }

   :root:not([data-theme="light"]) .post-content .kg-callout-card-pink,
   :root:not([data-theme="light"]) .post-content .kg-callout-card-background-pink {
      background-color: #2d0f18;
   }

   :root:not([data-theme="light"]) .post-content .kg-callout-card-purple,
   :root:not([data-theme="light"]) .post-content .kg-callout-card-background-purple {
      background-color: #1d1030;
   }
}

/* ===========================================================================
   2. Toggle card
   =========================================================================== */
.post-content .kg-toggle-card {
   border-radius: var(--radius-card);
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   overflow: hidden;
}

.post-content .kg-toggle-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
   cursor: pointer;
   gap: 12px;
   user-select: none;
}

.post-content .kg-toggle-heading-text {
   flex: 1;
   font-weight: 600;
   font-size: 1rem;
   margin: 0;
}

.post-content .kg-toggle-card-icon {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   background: none;
   border: none;
   padding: 0;
   appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
   color: var(--color-text-muted);
}

.post-content .kg-toggle-card-icon svg {
   width: 20px;
   height: 20px;
   transition: transform 0.2s ease;
}

.post-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon svg {
   transform: rotate(180deg);
}

.post-content .kg-toggle-content {
   padding: 12px 16px;
   display: none;
   border-top: 1px solid var(--color-border);
}

.post-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content {
   display: block;
}

/* ===========================================================================
   3. Audio card
   =========================================================================== */
.post-content .kg-audio-card {
   display: flex;
   gap: 12px;
   align-items: center;
   padding: 12px;
   border-radius: var(--radius-card);
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
}

.post-content .kg-audio-thumbnail {
   width: 84px;
   height: 84px;
   min-width: 84px;
   border-radius: var(--radius-card);
   overflow: hidden;
   object-fit: cover;
   display: block;
}

.post-content .kg-audio-thumbnail.placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.6rem;
   color: var(--color-text-muted);
   background-color: var(--color-border);
}

.post-content .kg-audio-player-container {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.post-content .kg-audio-title {
   font-size: 0.9rem;
   font-weight: 700;
   margin: 0 0 4px;
   color: var(--color-text);
}

.post-content .kg-audio-player {
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
}

.post-content .kg-audio-current-time,
.post-content .kg-audio-time,
.post-content .kg-audio-duration {
   font-size: 0.75rem;
   color: var(--color-text-muted);
   min-width: 36px;
   text-align: center;
}

.post-content .kg-audio-play-icon,
.post-content .kg-audio-pause-icon,
.post-content .kg-audio-mute-icon,
.post-content .kg-audio-unmute-icon {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   border-radius: var(--radius-card);
   flex-shrink: 0;
   background: none;
   border: none;
   padding: 0;
   appearance: none;
   -webkit-appearance: none;
   color: var(--color-text-muted);
}

.post-content .kg-audio-seek-slider,
.post-content .kg-audio-volume-slider {
   -webkit-appearance: none;
   appearance: none;
   height: 6px;
   border-radius: 6px;
   background: var(--color-border);
   border: none;
   outline: none;
   width: 100%;
   cursor: pointer;
}

.post-content .kg-audio-playback-rate {
   font-size: 0.75rem;
   color: var(--color-text-muted);
   padding: 0 4px;
   background: none;
   border: none;
   appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
}

@media (max-width: 480px) {
   .post-content .kg-audio-card {
      padding: 10px;
      gap: 8px;
   }
}

/* ===========================================================================
   4. Video card
   =========================================================================== */
.post-content .kg-video-card {
   position: relative;
   border-radius: var(--radius-card);
   overflow: hidden;
   background-color: #000;
}

.post-content .kg-video-hide {
   display: none !important;
}

.post-content .kg-video-container {
   position: relative;
   width: 100%;
   max-height: 520px;
   background: #000;
}

.post-content .kg-video-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
}

.post-content .kg-video-large-play-icon {
   width: 84px;
   height: 84px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, .35);
   pointer-events: auto;
   cursor: pointer;
}

.post-content .kg-video-thumbnail {
   display: block;
   width: 100%;
   height: auto;
   object-fit: cover;
}

.post-content .kg-video-thumbnail.placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 160px;
   color: var(--color-text-muted);
   background: var(--color-border);
}

.post-content .kg-video-player-container {
   position: relative;
   background: #000;
}

.post-content .kg-video-player {
   width: 100%;
   height: auto;
   display: block;
}

.post-content .kg-video-title {
   padding: 10px 16px;
   font-size: 0.9rem;
   background: var(--color-surface);
   color: var(--color-text);
}

.post-content .kg-video-current-time,
.post-content .kg-video-time,
.post-content .kg-video-duration {
   font-size: 0.8rem;
   color: var(--color-text-muted);
}

.post-content .kg-video-play-icon,
.post-content .kg-video-pause-icon,
.post-content .kg-video-mute-icon,
.post-content .kg-video-unmute-icon {
   cursor: pointer;
   width: 40px;
   height: 40px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

/* ===========================================================================
   5. Button card
   =========================================================================== */
.post-content .kg-button-card {
   text-align: left;
}

.post-content .kg-button-card.kg-align-center {
   text-align: center;
}

.post-content .kg-button-card a.kg-btn {
   display: inline-block;
   height: auto;
   padding: 12px 22px;
   border-radius: var(--radius-card);
   background: var(--color-accent);
   color: var(--color-button-text);
   font-weight: 700;
   text-decoration: none;
   border: none;
   max-width: 100%;
}

.post-content .kg-button-card a.kg-btn:hover {
   color: var(--color-text);
   border: none;
}

.post-content .kg-button-card a.kg-btn-accent {
   background: var(--color-accent);
   color: var(--color-button-text);
}

/* ===========================================================================
   6. Product card
   =========================================================================== */
.post-content .kg-product-card {
   border-radius: var(--radius-card);
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   overflow: hidden;
}

.post-content .kg-product-card-container {
   padding: 20px;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.post-content .kg-product-card-image {
   width: 100%;
   max-height: 300px;
   object-fit: cover;
   border-radius: var(--radius-card);
   display: block;
}

.post-content .kg-product-card-title-container {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
}

.post-content .kg-product-card-title {
   font-weight: 700;
   font-size: 1rem;
   margin: 0;
   color: var(--color-text);
}

.post-content .kg-product-card-description {
   color: var(--color-text-muted);
   font-size: 0.9rem;
   line-height: 1.5;
   margin: 0;
}

.post-content .kg-product-card-rating {
   display: inline-flex;
   gap: 3px;
   align-items: center;
}

.post-content .kg-product-card-rating-star {
   display: inline-flex;
   width: 20px;
   height: 20px;
   color: var(--color-border);
}

.post-content .kg-product-card-rating-active {
   color: var(--color-accent);
}

.post-content .kg-product-card-button,
.post-content .kg-product-card-btn-accent {
   display: inline-block;
   background: var(--color-accent);
   color: #fff;
   padding: 10px 18px;
   border-radius: 100px;
   text-decoration: none;
   font-weight: 700;
   border: none;
   align-self: flex-start;
}

.post-content .kg-product-card-button:hover,
.post-content .kg-product-card-btn-accent:hover {
   color: #fff;
   border: none;
}

@media (max-width: 480px) {
   .post-content .kg-product-card-container {
      padding: 14px;
   }

   .post-content .kg-product-card-image {
      max-height: 180px;
   }
}

/* ===========================================================================
   7. NFT card
   =========================================================================== */
.post-content .kg-nft-card {
   display: block;
   border-radius: var(--radius-card);
   overflow: hidden;
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   text-decoration: none;
   color: var(--color-text);
}

.post-content .kg-nft-image {
   width: 100%;
   max-height: 520px;
   height: auto;
   object-fit: cover;
   display: block;
}

.post-content .kg-nft-metadata {
   padding: 12px 16px 16px;
}

.post-content .kg-nft-header {
   margin-bottom: 4px;
}

.post-content .kg-nft-title {
   font-weight: 700;
   font-size: 1rem;
   margin: 0;
   color: var(--color-text);
}

.post-content .kg-nft-creator {
   font-size: 0.8rem;
   color: var(--color-text-muted);
}

@media (max-width: 480px) {
   .post-content .kg-nft-metadata {
      padding: 10px 12px 12px;
   }
}

/* ===========================================================================
   8. Before / After card
   =========================================================================== */
.post-content .kg-before-after-card {
   position: relative;
   width: 100%;
   border-radius: var(--radius-card);
   overflow: hidden;
   background: var(--color-border);
}

.post-content .kg-before-after-card-image-before,
.post-content .kg-before-after-card-image-after {
   width: 100%;
   display: block;
   object-fit: cover;
}

/* ===========================================================================
   9. File card
   =========================================================================== */
.post-content .kg-file-card {
   border-radius: var(--radius-card);
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   overflow: hidden;
}

.post-content .kg-file-card .kg-file-card-container {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 20px 24px;
   width: 100%;
   text-decoration: none;
   color: var(--color-text);
   background: none;
   min-height: unset;
   border-radius: unset;
   border: none;
}

.post-content .kg-file-card .kg-file-card-contents {
   display: flex;
   flex-direction: column;
   gap: 4px;
   flex: 1;
}

.post-content .kg-file-card .kg-file-card-title {
   font-weight: 700;
   font-size: 0.95rem;
   color: var(--color-text);
   margin: 0;
}

.post-content .kg-file-card .kg-file-card-caption,
.post-content .kg-file-card .kg-file-card-filename,
.post-content .kg-file-card .kg-file-card-filesize {
   font-size: 0.8rem;
   color: var(--color-text-muted);
   margin: 0;
}

.post-content .kg-file-card .kg-file-card-metadata {
   display: flex;
   gap: 8px;
   align-items: center;
}

.post-content .kg-file-card .kg-file-card-icon {
   flex-shrink: 0;
   width: 48px;
   height: 48px;
   min-width: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-accent);
   border-radius: 50%;
   color: #fff;
}

.post-content .kg-file-card .kg-file-card-icon svg {
   width: 22px;
   height: 22px;
   color: #fff;
}

/* Ghost's file card SVG includes its own circle outline; hide it so the icon div provides the shape */
.post-content .kg-file-card .kg-file-card-icon svg circle {
   stroke: transparent;
}

.post-content .kg-file-card .kg-file-card-medium {
   padding: 14px 18px;
}

.post-content .kg-file-card .kg-file-card-small {
   padding: 10px 14px;
   font-size: 0.9rem;
}

@media (max-width: 480px) {
   .post-content .kg-file-card .kg-file-card-container {
      padding: 16px;
      gap: 12px;
   }
}

/* ===========================================================================
   10. Paywall card
   =========================================================================== */
.post-content .kg-paywall-card {
   text-align: center;
   padding: 40px 20px;
   border-top: 10px solid var(--color-border);
   border-bottom: 10px solid var(--color-border);
}

.post-content .kg-paywall-card-heading {
   font-size: 1.3rem;
   font-weight: 700;
   margin: 0 0 10px;
   color: var(--color-text);
}

.post-content .kg-paywall-card-body {
   font-size: 0.95rem;
   color: var(--color-text-muted);
   margin: 0 auto 22px;
   max-width: 460px;
   line-height: 1.6;
}

/* ===========================================================================
   11. Signup card
   =========================================================================== */
.post-content .kg-signup-card {
   border: 10px solid var(--color-border);
   overflow: hidden;
}

.post-content .kg-signup-card-container {
   padding: 40px 20px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0;
}

.post-content .kg-signup-card-image {
   width: 100%;
   height: auto;
   display: block;
   max-height: 300px;
   object-fit: cover;
}

.post-content .kg-signup-card-header {
   font-size: 1.3rem;
   font-weight: 700;
   margin: 0 0 10px;
   color: var(--color-text);
}

.post-content .kg-signup-card-subheader {
   font-size: 0.95rem;
   font-weight: 400;
   color: var(--color-text-muted);
   margin: 0 0 22px;
   line-height: 1.6;
}

.post-content .kg-signup-card-form {
   width: 100%;
   margin-bottom: 0;
}

.post-content .kg-signup-card-fields {
   display: flex;
   justify-content: center;
   gap: 10px;
   flex-wrap: wrap;
}

.post-content .kg-signup-card-input {
   font-size: 1rem;
   padding: 10px 16px;
   border: 1px solid var(--color-border-input);
   border-radius: 100px;
   outline: none;
   min-width: 220px;
   flex: 1 1 220px;
   max-width: 340px;
   background-color: var(--color-bg);
   color: var(--color-text);
   transition: border-color var(--duration-base) var(--easing-base);
   appearance: none;
   -webkit-appearance: none;
}

.post-content .kg-signup-card-input:focus {
   border-color: var(--color-accent);
}

.post-content .kg-signup-card-input::placeholder {
   color: var(--color-placeholder);
}

.post-content .kg-signup-card-button,
.post-content .kg-signup-card-btn-accent {
   background: var(--color-accent);
   color: #fff;
   padding: 10px 22px;
   border-radius: 100px;
   border: none;
   font-weight: 700;
   cursor: pointer;
   white-space: nowrap;
   appearance: none;
   -webkit-appearance: none;
}

.post-content .kg-signup-card-button:hover,
.post-content .kg-signup-card-btn-accent:hover {
   color: #fff;
}

.post-content .kg-signup-card-disclaimer {
   font-size: 0.8rem;
   color: var(--color-text-muted);
   margin: 14px 0 0;
   line-height: 1.5;
}

@media (max-width: 480px) {
   .post-content .kg-signup-card-container {
      padding: 24px 16px;
   }

   .post-content .kg-signup-card-fields {
      flex-direction: column;
      align-items: stretch;
   }

   .post-content .kg-signup-card-input {
      max-width: 100%;
   }
}

/* ===========================================================================
   12. Code card
   =========================================================================== */
.post-content .kg-code-card {
   min-width: 100%;
   margin: 30px 0 25px;
}

.post-content .kg-code-card pre,
.post-content .kg-code-card code {
   margin: 0;
}

/* ===========================================================================
   13. Bookmark card
   =========================================================================== */
.post-content .kg-bookmark-card {
   margin: 50px 0 40px;
}

.post-content .kg-bookmark-card+.kg-bookmark-card {
   margin-top: 20px;
}

.post-content .kg-bookmark-card .kg-bookmark-container {
   overflow: hidden;
   min-height: 140px;
   transition: transform var(--duration-fast) var(--easing-base);
   text-decoration: none;
   border-radius: var(--radius-card);
   border: 1px solid var(--color-accent);
   background-color: var(--color-bg);
   background-image: none;
   color: var(--color-text);
}

.post-content .kg-bookmark-card .kg-bookmark-container:hover {
   transform: translateY(-2px);
}

.post-content .kg-bookmark-container,
.post-content .kg-bookmark-content,
.post-content .kg-bookmark-metadata {
   display: flex;
}

.post-content .kg-bookmark-title,
.post-content .kg-bookmark-metadata {
   font-weight: 700;
}

.post-content .kg-bookmark-content {
   flex-direction: column;
   padding: 20px;
   flex-grow: 1;
   align-items: flex-start;
   justify-content: start;
}

.post-content .kg-bookmark-title {
   font-size: 18px;
   line-height: 1.3;
}

.post-content .kg-bookmark-description {
   font-size: 15px;
   line-height: 1.3;
   display: -webkit-box;
   overflow-y: hidden;
   max-height: 40px;
   margin-top: 12px;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
}

.post-content .kg-bookmark-metadata {
   font-size: 14px;
   height: 22px;
   margin-top: 18px;
   align-items: center;
   flex-wrap: wrap;
}

.post-content .kg-bookmark-metadata .kg-bookmark-icon {
   width: 22px;
   height: 22px;
   margin-right: 8px;
}

.post-content .kg-bookmark-author,
.post-content .kg-bookmark-publisher {
   height: 24px;
}

.post-content .kg-bookmark-publisher {
   overflow: hidden;
   max-width: 240px;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.post-content .kg-bookmark-author:after {
   margin-right: 6px;
   margin-left: 6px;
   content: '•';
}

.post-content .kg-bookmark-thumbnail {
   position: relative;
   min-width: 30%;
   max-height: 100%;
}

.post-content .kg-bookmark-thumbnail img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
}

@media (max-width: 479px) {
   .post-content .kg-bookmark-card {
      margin: 30px 0;
   }

   .post-content .kg-bookmark-container {
      flex-direction: column;
   }

   .post-content .kg-bookmark-content {
      order: 2;
   }

   .post-content .kg-bookmark-publisher {
      max-width: 140px;
   }

   .post-content .kg-bookmark-thumbnail {
      width: 100%;
      min-height: 160px;
      order: 1;
   }
}

/* ===========================================================================
   14. Image card
   =========================================================================== */
.post-content .kg-image-card img {
   width: 100%;
   height: auto;
}

@media (min-width: 768px) {

   .post-content .kg-image-card.kg-width-full img,
   .post-content .kg-image-card.kg-width-full figcaption {
      position: relative;
      right: 50%;
      left: 50%;
      width: calc(100vw - 85px - 85px - 20px);
      margin-right: calc(-50vw + 85px + 10px);
      margin-left: calc(-50vw + 85px + 10px);
   }
}

@media (min-width: 768px) and (max-width: 1299px) {
   .post-content .kg-image-card.kg-width-wide img {
      width: 110%;
      margin-left: -5%;
   }
}

@media (min-width: 1300px) {
   .post-content .kg-image-card.kg-width-wide img {
      width: calc(1200px - 85px - 85px);
   }

   .post-content .kg-image-card.kg-width-wide img,
   .post-content .kg-image-card.kg-width-wide figcaption {
      margin-left: calc((700px - 1200px) / 2 + 85px);
   }

   .post-content .kg-image-card.kg-width-wide figcaption {
      width: 900px;
   }
}

/* ===========================================================================
   15. Gallery card
   =========================================================================== */
.post-content .kg-gallery-card img {
   width: 100%;
   height: auto;
}

.post-content .kg-gallery-card .kg-gallery-container {
   display: flex;
   flex-direction: column;
   margin: 15px auto;
}

.post-content .kg-gallery-card .kg-gallery-row {
   display: flex;
   flex-direction: row;
   justify-content: center;
}

.post-content .kg-gallery-card .kg-gallery-image img {
   display: block;
   margin: 0;
}

.post-content .kg-gallery-card .kg-gallery-row:not(:first-of-type) {
   margin: 10px 0 0 0;
}

.post-content .kg-gallery-card .kg-gallery-image:not(:first-of-type) {
   margin: 0 0 0 10px;
}

@media (min-width: 768px) and (max-width: 1299px) {
   .post-content .kg-gallery-card .kg-gallery-container {
      width: 110%;
      margin-left: -5%;
   }
}

@media (min-width: 1300px) {
   .post-content .kg-gallery-card .kg-gallery-container {
      width: calc(1200px - 85px - 85px);
   }

   .post-content .kg-gallery-card .kg-gallery-container,
   .post-content .kg-gallery-card figcaption {
      margin-left: calc((700px - 1200px) / 2 + 85px);
   }

   .post-content .kg-gallery-card figcaption {
      width: 900px;
   }
}

/* ===========================================================================
   16. Embed card
   =========================================================================== */
.post-content .kg-embed-card .js-reframe {
   margin-bottom: 0;
}

/* ===========================================================================
   17. CTA card
   =========================================================================== */
.post-content .kg-cta-card {
   border-radius: var(--radius-card);
   overflow: hidden;
   font-family: var(--font-ui);
}

/* Background variants */
.post-content .kg-cta-card.kg-cta-bg-grey {
   background: var(--color-surface);
}

.post-content .kg-cta-card.kg-cta-bg-white {
   background: var(--color-bg);
}

/* Link colour */
.post-content .kg-cta-card.kg-cta-link-accent a {
   color: var(--color-accent);
}

/* Button */
.post-content .kg-cta-card a.kg-cta-button {
   max-width: 100%;
}

.post-content .kg-cta-card a.kg-cta-button.kg-style-accent {
   background-color: var(--color-accent);
   color: var(--color-button-text);
}
@media (prefers-color-scheme: light) {
.post-content .kg-cta-card a.kg-cta-button{
   background-color: var(--color-bg);
   color: var(--color-text);
}
}

@media (prefers-color-scheme: dark) {
.post-content .kg-cta-card a.kg-cta-button{
   background-color: var(--color-text);
   color: var(--color-bg);
}
}