@import url('https://fonts.googleapis.com/css2?family=Angkor&display=swap');
:root{
	--mainbg:#151a15;
	--maintext:black;
	--mainheader: white;
	--cards:#a7b3a2;
	
html * {box-sizing: border-box;}


body{
	font-family: "system-ui", sans-serif;
	font-size: 100%;
	line-height: 135%;
	color: var(--maintext);
	background-color: var(--mainbg);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas: 
	 "hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr"
	 "nav nav nav nav nav nav nav nav nav nav nav nav"
	  "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{
	background-image: linear-gradient(#0009,#0002),url("images/leaf.jpg");
	font-family:"Angkor Static" ;
	color: var(--mainheader);
	grid-area: hdr;
	display:grid;
	grid-template-columns: subgrid;
}
header>* {
	grid-column: span 12;
}
ul{
	grid-area: nav;
	list-style: none;
	display:grid;
	grid-template-columns: subgrid;
}

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: var(--cards);
	width: 332px;
	padding: 1em;
	text-align: center;
	grid-column: span 12 ;
	border-style: double;
	border-color: black;
}
.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;
	}
}