@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
	font-family: "Lora";
	src: url("/fonts/Lora-Regular.woff") format("woff"),
	     url("/fonts/Lora-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: fallback; 
}
@font-face {
	font-family: "Lora";
	src: url("/fonts/Lora-Bold.woff") format("woff");
	font-weight: bold;
	font-style: normal;
	font-display: fallback; 
}
@font-face {
	font-family: "Lora";
	src: url("/fonts/Lora-Italic.woff") format("woff");
	font-weight: normal;
	font-style: italic;
	font-display: fallback; 
}
@font-face {
	font-family: "Lora";
	src: url("/fonts/Lora-BoldItalic.woff") format("woff");
	font-weight: bold;
	font-style: italic;
	font-display: fallback; 
}
body {
	font-family: "Lora", system-ui, sans-serif;
	font-size: 100%;
	line-height: 133%;
	background-color: #000;
	color: #fff;
} 

main {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 0;
}

section {
color: color(display-p3 1 1 0); 
    
}




h2 {
	text-transform: capitalize;
	font-size: 300%;
	line-height: 120%;
}