article {
    flex-grow: 1;
    flex-shrink: 0;
    background-color: var(--background);
    padding: 1rem;
    margin-bottom: 2rem;
    border-radius: 10px;
    align-items: stretch;
}

.articletitle h2 {
	margin-top: 0;
}

article a {
    text-decoration: underline;
}

.article_list a {
    text-decoration: none;
}

article p:first-child {
	margin-top: 0;
}

article .readmore {
	margin-top: 1rem;
}

.articlemeta {
    margin-bottom: 1rem;
    margin-left: .3rem;
}

.articletext img {
	width: 80%;
}

.articlemeta div:first-child {
	font-size: medium;
	font-weight: bold;
}

.articletext {
    margin-bottom: 1rem;
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.multiple_small {
	flex: 0 0 24%;
	margin-right: 1rem;
}

.multiple_big {
	flex: 0 1 72%;
}

.multiple_medium {
	flex: 0 1 50%;
}

.solo {
	flex: 0 0 100%;
}

.articleinner {
    display: flex;
    flex-direction: column-reverse;
    margin-left: .3rem;
}

.article_footer {
    margin-left: 1rem;
    margin-right: 1rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	display: flex;
    flex-direction: column;
    align-items: stretch;
	font-size: x-small;
	color: var(--text-muted);
}

.article_footer_foundations1 {
    display: flex;
    height: 3rem;
}

.article_footer_foundations2 {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

.article_footer_item1 {
    display: flex;
    flex-grow: 0;
    height: 3rem;
    margin-right: 1rem;
    margin-top: .1rem;
}

.article_footer_item2 {
    display: flex; 
    flex-grow: 0;
    flex-direction: column;
}