html * {box-sizing: border-box;}


body {
	font-family: system-ui, sans-serif;
	font-size: 100%;
	line-height: 133%;
	display: grid;
	grid-template-columns: repeat(12, 1fr); 
	grid-template-areas: 
	  "hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr"
	  "mne mne mne mne mne mne mne mne mne mne mne mne"
	  "ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr"
	;
	gap: 4px;
}


header {
	grid-area: hdr;
	display: grid;
	grid-template-columns: subgrid;
}

header>* {
	grid-column: span 12;
}

main {
	grid-area: mne;
	display: grid;
	/* grid-template-columns: subgrid; */
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	row-gap: 3vw;
    justify-items: center; 
}

footer {
	grid-area: ftr;
}

.card {
	margin: 0;
	background-color: #abc8;
	width: 332px;
	padding: 8px; 
	text-align: left;
	/* grid-column: span 12;    */
}

.card figure {
	margin: 0;
	text-align: center;
}

.card img {
	max-width: 300px;
}
.card p {
	min-height: 4em; 
}


/* 

@media (min-width: 664px) {	
	.card {
		grid-column: span 6; 
	}
	header>* {
		grid-column: span 6;
	}
}

@media (min-width: 996px) {
	.card {
		grid-column: span 4; 
	}
	header>* {
		grid-column: span 4;
	}
}

@media (min-width: 1328px) {
	.card, header>*  {
		grid-column: span 3;
	}
}

*/