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

body{
	font-family: "system-ui", sans-serif;
	font-size: 100%;
	line-height: 135%;
	color:#F0F0F0;
	background-color: #999999;
	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: splan 12;
}


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

.card{
	margin: 0;
	background-color: black;
	width: 332px;
	padding: 1em;
	text-align: center;
	grid-column: span 12 ;
}
.card figure{
	margin: 0;
}
.card img{
	width: 300px;
	height:auto;
	
}
.card p {
	min-height: 4em;
}

@media (min-width: 664px) {

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

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