/* ---------- ARTICLES LISTING ---------- */

.articles {display: flex; flex-direction: column; margin: var(--gapSmall) 0 0 0;
	> div:not(.bannerWrap) {padding: 0 0 var(--gap) 0; margin: 0 0 var(--gap) 0; border-bottom: 2px solid var(--lighterGrey); display: flex; align-items: center; overflow: hidden}
	> div > div {flex: 1}
	> div > div > div {margin-bottom: 4px;}
	h4 {margin-bottom: 0;}
	h4 a {padding: 2px 0 6px 0; display: block; font-size: calc(var(--fontSize) + 0.1rem)}
	img.logo {max-height: 100px; height: auto; width: 100px; margin-right: var(--gap)}
	.bannerWrap {padding:0; margin-top: 0 !important;}
	img.firstImage {max-height: 100px; height: auto; max-width: 150px; margin-left: var(--gap)}
	p {word-wrap: break-word; white-space: normal}
}

@container content (min-width: 1500px) {
	.articles {flex-direction: row; flex-wrap: wrap; gap: var(--gapLarge)}
	.articles > div:not(.bannerWrap) {width: calc( 50% - var(--gapLarge));}
}

@media screen and (max-width: 1024px) {
	.articles {margin: 0;}
}

@media screen and (max-width: 768px) {
	.articles > div:not(.bannerWrap) {padding: 0 0 var(--gapLarge) 0; margin: 0 0 var(--gapLarge) 0; flex-direction: column; flex-wrap: wrap;}
	.articles > div img.logo {display: none}
	.articles > div img.firstImage {order: 2; margin: var(--gapSmall) auto 0 auto; max-width: 250px;}
}


/* ---------- ARTICLE VIEW ---------- */

.articleWrap {width: 100%;}



/* INFO */

.articleInfo {display: flex; margin: 26px 0; align-items: center; justify-content: space-between;
	.articleDate {align-self: flex-end}
	.articleAuthor {display: flex; align-self: flex-start; flex-wrap: wrap; align-items: center;}
	a {font-weight: bold}
	img {margin: 0px 10px 0px 0px; vertical-align: middle; width: auto; max-height: 30px}
}


/* PEREX */

.articlePerex, .articleBodyContainer {max-width: 2500px; margin: 0 auto}

.articlePerex {background: var(--lighterGrey); padding: 22px 26px; margin: 0 auto 26px auto; border-radius: 0 22px 22px 22px}
.articlePerex, .articlePerex * {font-size: calc(var(--fontSize) + 0.1rem); line-height: 1.5}



/* BODY */

.articleBodyContainer {max-width: 2500px; margin: 0 auto; display: flex; overflow-x: hidden;}


/* ARTICLE - TEXT FORMAT */

.articleBody {
	* {text-wrap: pretty; word-wrap: break-word; overflow-wrap: anywhere;}
	:is(h2,h3,h4,h5,h6) {font-weight: bold; margin-bottom: 0; text-align: left; display: initial; text-wrap: pretty;}
	:is(h2,h2 a) {font-size: 28px;}
	:is(h3,h3 a) {font-size: 26px;}
	:is(h4,h4 a) {font-size: 24px;}
	:is(h5,h5 a) {font-size: 22px;}
	:is(h6,h6 a) {font-size: 20px;}
	em {color: red; font-weight: bold;}
	:is(ul,ol) {margin: 0px; padding: 0px;}
	:is(li,dd) {margin: 0px 0px 0px 25px; padding: 3px 0px;}
}


@container content (min-width: 1500px) {
	.articleBody {column-count: 2; column-gap: 84px; column-rule: 1px outset var(--lighterGrey)}
}

.articleBody {text-align: justify; margin: 0 auto; line-height: 1.4;
	&:first-letter {font-size: 28px; font-weight: bold; margin: 0px 2px 0px 14px;}
}




/* IMAGE BOX */

.articleImages {max-width: 320px; text-align: center; margin: 0px 0px 20px 35px; display: flex; flex-direction: column;
	a {line-height: 17px; color: #777; font-size: 14px; margin: 0 0 var(--gapSmall) 0; text-wrap: pretty}
	a:hover {color: #555; text-decoration: none;}
	a img {display: block; width: 300px; height: auto; margin: 0 0 6px 0; border: 1.5px solid var(--lightGrey);}
	a img:hover {border: 1.5px solid var(--linkHover); box-shadow: var(--materialShadow);}
	&:empty {display: none;}
}


.articleWrap .bannerWrap {margin: calc( var(--gapLarge) + var(--gapSmall)) auto}


/* RELATED */

.authorArticles {margin-top: var(--gapLarge);}

.articleRelated {
	h5, h5 * {font-size: var(--fontSizeLarge);}
	h5 {margin: 0 0 var(--gapSmall) 0}
	li {border-bottom: 1px solid var(--lighterGrey); padding: 0 0 var(--gapSmall) 0; margin: 0 0 var(--gapSmall) 0; list-style: none; font-size: var(--fontSizeSmall);}
	li, li * {line-height: 1.4;}
	li:last-child {border-bottom: none}
	li h4 {margin-bottom: 3px}
	li h4 a {display: block;}
}



@media screen and (max-width: 1024px) {
	.articlePerex {text-align: justify}
	.articleBodyContainer {flex-direction: column;}
	.articleImages {order: 1; flex-direction: row; overflow-x: auto; width: 100%; max-width: none; margin: 22px auto; gap: 12px;}
	.articleBody {order: 2; overflow-wrap: break-word; word-wrap: break-word}
	.articleBody, .articleBody * {font-size: calc(var(--fontSize) + 0rem);}
	.articleBody :is(iframe,img,table) {width: 100%; overflow-x: auto;}
}