/* Libre Baskerville italic */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librebaskerville/v16/kmKhZrc3Hgbbcjq75U4uslyuy4kn0qNcWxEQDO-Wyrs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librebaskerville/v16/kmKhZrc3Hgbbcjq75U4uslyuy4kn0qNcWx8QDO-WyrubOA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}*/

article.case-study {
	max-width:512px;
	margin:64px auto;

	font-size:16px;
	text-align:left;
}
@media (max-width:544px) {
	article.case-study {
		margin:0 24px;
	}
}

article.case-study h2 {
	display:block;
	font-family:"Boldonse", monospace;
	font-size:24px;

	color:light-dark(var(--light-main-bg), var(--dark-main-bg));
	background:light-dark(var(--light-main-text), var(--dark-main-text));
	box-shadow:16px 16px 0 light-dark(var(--light-main-bg), var(--dark-main-bg));
	padding:16px 24px;
	margin-top:64px;
	margin-bottom:64px;
}

article.case-study h3 {
	font-family:"Boldonse", monospace;
	font-size:18px;

	margin-top:96px;
}

article.case-study p {
	font-size:16px;
}

article.case-study p.intro {
	font-size:20px;
	font-style:italic;
	margin-bottom:32px;
}

article.case-study p.quote {
	font-family:"Libre Baskerville", serif;
	font-style:italic;
	font-size:20px;

	margin-top:32px;
	margin-bottom:32px;
}

article.case-study figure,
article.case-study .screenshot-container {
	margin:32px -128px;
	width:calc(100% + 256px);
}
@media (max-width:800px) {
	article.case-study figure,
	article.case-study .screenshot-container {
		margin:32px 0;
		width:100%;
	}

	article.case-study .screenshot-container:before,
	article.case-study .screenshot-container:after {
		background:none;
	}

}


article.case-study figure.fit-width {
	margin:32px 0;
	width:100%;
}

article.case-study figure img {
	width:100%;
	border:8px solid light-dark(var(--light-main-text), var(--dark-main-text));
	background:light-dark(var(--light-main-text), var(--dark-main-text));
	box-sizing:border-box;
}
article.case-study figure figcaption {
	text-align:center;
}

article.case-study .preview-content {
	display:none;
}


/*
article.case-study figure.horizontal {
	display:flex;
	flex-direction:row;
	margin:32px -128px;
	width:calc(100% + 256px);
	gap:16px;
}
article.case-study figure.horizontal.image-right {
	flex-direction:row-reverse;
}

article.case-study figure.horizontal img {
	display:block;
	flex:1;
	width:50%;
}
article.case-study figure.horizontal figcaption {
	flex-grow:1;
	flex-shrink:1;

}*/


article.case-study ul.kpis {
	display:flex;
	flex-direction:row;

	list-style:none;
	padding:0;
	margin:32px 0;
}
article.case-study li {
	flex:1;
}
article.case-study li span {
	display:block;
	text-align:center;
}

article.case-study li span.number {
	font-size:32px;
	font-weight:bold;
}