style.css

/* @import url("https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.1/github-markdown.css"); */

:root {
	--color-neutral-95: hsl(220 10% 95%);
	--color-neutral-90: hsl(220 10% 90%);
	--color-neutral-80: hsl(220 10% 80%);
	--color-neutral-70: hsl(220 10% 70%);
	--color-neutral-60: hsl(220 10% 60%);
	--color-neutral-50: hsl(220 10% 50%);
	--color-neutral-40: hsl(220 10% 40%);
	--color-neutral-30: hsl(220 10% 30%);
	--color-neutral-20: hsl(220 10% 20%);
	--color-neutral-10: hsl(220 10% 10%);
}

html {
	font: 100%/1.5 system-ui;
	counter-reset: figure;
	background: var(--color-neutral-95);
	max-width: min(75vw, 80em);
	margin: 0 auto;
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
	line-height: 1.1;
	font-weight: 600;
	text-wrap: balance;
}

h1, h2 {
	border-bottom: 1px solid var(--color-neutral-80);
	padding-bottom: .2em;
}

h1 {
	margin-block: 1em .5rem;
	font-size: clamp(2.5em, 150% + 2vh + 2vw, 10vmin);
	font-weight: 800;

	small {
		display: block;
		width: fit-content;
		padding: .2em .5em;
		margin-inline: auto;
		color: white;
		background: var(--color-neutral-40);
		font-size: 40%;
		text-transform: uppercase;
		white-space: nowrap;
	}
}

h2 {
	font-size: 180%;
	color: var(--color-neutral-30);
}

h3 {
	font-size: 130%;
}

/* Lists */

ul, ol {
	padding-inline-start: 2em;
}

li {
	&::marker {
		color: var(--color-neutral-40);
	}

	+ li {
		margin-top: .2em;
	};
}

/* Sectioning elements */

header {
	padding-block: 1em;
	text-align: center;
}

main {
	background: white;
	color: var(--color-neutral-20);
	border-radius: 1rem;
	padding: 0.1rem 2rem;
}

/* Figures */

figure {
	margin: 1em 0;
	padding: .5rem;
	margin-inline: -.5em;
	border: 1px solid var(--color-neutral-80);
	box-shadow: 0 .1em .2em var(--color-neutral-95);
	text-align: center;
	background: white;
    width: 100%; 
  
    
   

	> figcaption {
		font: 500 75% var(--font-sans);
		background: var(--color-neutral-95);
		padding: .5rem;
		margin: -.5rem;
		margin-top: .5rem;
		counter-increment: figure;
		text-align: left;

		&::before {
			content: "Figure & Insights " counter(figure) ": ";
			font-weight: bold;
			color: var(--color-neutral-40);
		}

		a:not(:hover, :focus, :active) {
			color: inherit;
			text-decoration: underline;
			text-decoration-color: color-mix(in lab, currentColor, transparent 70%);
		}
	}
}
figure img {
    max-width: 100%; 
    height: auto;
}