/* Example CSS file */ 
:root {
	--background-base: #efefef;
	--color-base: #000;
	--color-block-paragraph: var(--color-base);
	--color-block-heading: var(--color-base);
	--font-size-block-heading: 1.5em;
	--font-size-step--1: 0.75em;
	--font-size-step-0: 1em;
	--font-size-step-1: 1.5em;
	--font-size-step-2: 3em;
	--font-size-step-3: 5em;
	--font-size-s: var(--font-size-step--1);
	--font-size-m: var(--font-size-step-0);
	--font-size-l: var(--font-size-step-1);
	--font-size-xl: var(--font-size-step-2);
	--font-size-xxl: var(--font-size-step-3);
	/*--font-size-h1: var(--font-size-xxl);
	--font-size-h2: var(--font-size-xl);
	--font-size-h3: var(--font-size-l);*/
}
img {
	max-inline-size: 100%;
}
body {
	color: var(--color-base);
}
figure {
	padding: 0;
	margin: 0;
}
p {
	color: var(--color-block-paragraph);
}
h1, h2, h3 {
	color: var(--color-block-heading);
	font-size: var(--font-size-block-heading);
}
/*
h1 {
	--font-size-block-heading: var(--font-size-xxl);
}
h2 {
	--font-size-block-heading: var(--font-size-xl);
}
h3 {
	--font-size-block-heading: var(--font-size-l);
}
*/
.card {
	--font-size-block-heading: var(--font-size--1);
	padding: 1em;
	border: 1px dotted red;
	max-inline-size: 60em;
	margin-inline: auto;
}

.with-sidebar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.sidebar {
	flex-basis: 15rem;
	flex-grow: 1;
}
.not-sidebar {
	flex-basis: 0;
	flex-grow: 999;
	min-inline-size: 50%;
}

/* Debug */
.card {
	position: relative;
}
.card:before {
	position: absolute;
	right: 0;
	top: 0;
	background: black;
	color: white;
	content: 'Card';
	font-size: 11px;
	padding: 2px;
	font-family: sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
}