body { min-height: 100vh; display: flex; flex-direction: column; }
section { flex: 1; }
.city-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: top;
    background: light-dark(#746947, #202020);
    border: 1px solid light-dark(#bbbbbb, #444444);
    border-radius: 24px;
    padding: 20px;
    width: min(390px, calc(100% - 32px));
    margin: 24px 12px;
    font: 1rem/1.5 system-ui, sans-serif;
    overflow-wrap: anywhere;
}
.city-photo { width: 100%; }
.city-photo > img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: contain;
    border-radius: 12px;
}
.city-name { font-size: 1.8rem; font-weight: 700; margin: 16px 0; }
.city-facts { width: 100%; text-align: left; margin: 0 0 16px; }
.city-facts > div { padding: 8px 0; border-bottom: 1px solid light-dark(#b7ab85, #444); }
.city-facts dt { font-size: .85rem; font-weight: 500; }
.city-facts dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 650; }
.city-container .city-post-count, .city-container .city-location { font: inherit; margin-bottom: 12px; }
.city-photo-credit { font-size: .7rem; line-height: 1.5; margin: 16px 0 0; }
.city-photo-credit a { color: inherit; text-underline-offset: 2px; }
@media (max-width: 1023px) {
    .left-chapter, .right-chapter { display: none; }
    .content { width: 100%; font-size: medium; }
}