CSS Grid vs Lea: 1-0

dabblet.css

/**
 * CSS Grid vs Lea: 1-0
 */

.slide {
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 2.5rem;
	box-sizing: border-box;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	overflow: auto;
	gap: 0 .5em;
	outline: 2px solid red; outline-offset: -2px;
}

h1 { grid-column-end: span 2 }

.slide > * { outline: 2px dashed green; }

img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

body {
	font-size: 2em;
}

dabblet.html

<article class="slide heading-2x1 dont-resize heading-MxN" style="--columns:2; --rows:1;/* contain: size; */" data-title="Textbook" id="textbook" data-index="12" data-visit="1">
	<h1>Textbook</h1>
	<article>	
		<ul>
			<li><em>Design of Everyday Things</em> by <br>Don Norman</li>
			<li>Designers' bible</li>
			<li>Required reading in many companies/jobs that produce tangible and software artifacts for use</li>
		</ul>	
	</article>
	<img src="https://designftw.mit.edu/lectures/introduction/img/doet.jpg" alt="">
</article>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}