TODO: multi grid

	
	repeat(auto-fit, minmax(max-content, 1fr))
	
	grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));
	
	repeat(auto-fill, minmax(min-content, 387px));
	
	repeat(auto-fill, minmax(min-content, 505px))
	
	
	remove display flex from the main element tag or remove align-items: center;
	
	grid-template-columns:repeat(auto-fit, minmax(min-content, 400px));
	justify-content: center;
	
	Add align-self to the first P
	The footer does not require align-self, since it is only text and it is centered
	
	
	    grid-template-columns: fit-content(400px);
		
		
		
		
		
		
		grid-auto-flow: column;
		grid-template-columns: repeat(2, 1fr);

    grid-auto-columns: min-content;

			

    display: flex;
    /* grid-auto-columns: max-content; */
    /* grid-auto-flow: column; */
    flex-wrap: wrap;
    justify-content: center;