/* comment this out if you center */
#journal { max-width: 800px; }

/* if you want to center it */
/*
#journal { display: flex; width: 100%; justify-content: center; }
#journal p { width: auto; }
#journal #indices { width: 300px; flex: 0 0 300px; padding: 3em 0 0 54px; }
*/

/* change this one with the width you want for your journal */
#journal #articles { flex: 0 0 900px; }
#journal #articles .paginator { margin: 36px 0; text-align: left; }
#journal #articles .paginator a.previous:before { content: 'Previous'; }
#journal #articles .paginator a.next:before { content: 'Next'; }
#journal #articles article { width: 100%; }
#journal #articles article figure { max-height: 400px; width: 100%; text-align: center; margin-bottom: 1em; }
#journal #articles article figure img { width: 100%; }
#journal #articles article figure figcaption {  }
#journal #articles article h2 a { font-weight: var(--bold); }
#journal #articles article .date { opacity: 0.5; }
#journal #articles .separator { margin: 54px 0; }
#journal #articles .separator div {  }
#journal #articles .separator div:before { content: '-'; }

#journal #articles article p img { width: 100%; }
#journal #articles article p iframe { width: 100%; }

@media only screen and (max-width: 900px) 
{
    #journal #articles { width: 100%; flex: 0 0 100%; }
    #journal #articles article { width: 100%; }
}