@import url('https://fonts.googleapis.com/css2?family=Domine:wght@700&family=Gloock&display=swap');

main {
  width: 80vw;
  margin: 0 auto;
	background-color: ;
 border: 2px solid #000;
padding: 20px;
}
	@media screen and (max-width: 430px) {
	main { width: 95vw; padding: 0;}
	}
.container {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  gap: 5px 5px; 
  grid-template-areas: 
    "header header header"
    "article1 article2 article3"
    "article4 article5 article6"
    "footer footer footer";
}

.header { grid-area: header; }
.header h1 {
font-family: 'Gloock', serif;
font-weight: 400;
font-size: 6rem;
line-height: 2rem;
text-align: center;
white-space: nowrap;
}
	@media screen and (max-width: 430px) {
	.header h1 {
	font-size: 1.9rem;
	margin: 0;
	}
	}
.article1 { grid-area: article1; }
.article2 { grid-area: article2; }
.article3 { grid-area: article3; }
.article4 { grid-area: article4; }
.article5 { grid-area: article5; }
.article6 { grid-area: article6; }
.footer { grid-area: footer; align-self: end; text-align: center;}

h3 {
	font-family: 'Domine', serif;
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.3rem;
}

p {
	font-family: 
}
.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: space-between;
    align-items: baseline;
    }

.flex-item:nth-child(1) {
    order: 1;
    flex: 0 1 auto;
    align-self: auto;
	width: 33%;
	text-align: left;
    }

.flex-item:nth-child(2) {
    order: 2;
    flex: 0 1 auto;
    align-self: auto;
	width: 33%;
	text-align: center;
	font-style: italic;
    }

.flex-item:nth-child(3) {
    	order: 3;
    	flex: 0 1 auto;
    	align-self: auto;
	width: 33%;
	text-align: right;
    }