Fix Image Galleries Layout

Galleries and their images sometimes don't layout correctly in older Ghost themes. Here is a fix I use...

CSS - Put in Site Header Code Injection between <style></style> tags:

.kg-gallery-container {
    position: relative;
    padding: 0.75em;
}
.kg-gallery-image,
.kg-gallery-row,
img.kg-image,
.kg-embed-card {
    display: flex;
}
.kg-image-card {
    margin: 0 auto 20px;
    width: fit-content;
    width: -moz-fit-content;
}
img.kg-image {
    width: auto;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    max-height: 60vh;
}
figure.kg-card.kg-gallery-card.kg-width-wide {
    margin: 20px 3px;
    padding: 0;
    border: none;
}
.kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
}
.kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 0.75em;
}
.kg-gallery-row:not(:first-of-type) {
    margin: 0.75em 0 0;
}
.kg-gallery-card + .kg-gallery-card,
.kg-gallery-card + .kg-image-card,
.kg-image-card + .kg-gallery-card {
    margin-top: 0.75em;
}
.kg-gallery-card.kg-card-hascaption + .kg-gallery-card,
.kg-gallery-card.kg-card-hascaption + .kg-image-card,
.kg-image-card.kg-card-hascaption + .kg-gallery-card {
    margin-top: 1.75em;
}

JS - Put in Site Footer Code Injection between <script></script> tags:

!function(e,t){t.addEventListener("DOMContentLoaded",function(){t.querySelectorAll(".kg-gallery-image img").forEach(function(e){var t=e.closest(".kg-gallery-image"),a=e.attributes.width.value/e.attributes.height.value;t.style.flex=a+" 1 0%"})})}(window,document);