html {
	min-height: 100%;
}

body {
	font-family: 'Inter', Avenir, sans-serif;
	padding: 25px;
	margin: 0;
	height: 100%;
	background-color: lightgreen;
}

main {
	padding: 10px;
	border: 10px solid green;
	max-width: 1220px;
	border-radius: 100px;
	margin: 0 auto;
	background-color: #F0FDCE;
	height: 100vh;
}

header {
	width: calc(1220px - 20px - 20px);
	height: 400px;
	margin: 0 auto;
	background-image: url(img/nc-crocbuzz-header-bg.jpeg);
	background-position: center center;
	background-repeat: no-repeat;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	border: 10px solid green;
}

h1 {
	text-align: center;
	color: green;
}

p {
	text-align: center;
	color: black;
}


.parent {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
}
    
.div1 {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
}

.div2 {
    grid-column: span 6 / span 6;
    grid-row: span 5 / span 5;
    grid-column-start: 4;
}

.div3 {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
    grid-column-start: 10;
}

.div4 {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
    grid-row-start: 3;
}

.div5 {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
    grid-column-start: 10;
    grid-row-start: 3;
}

.div6 {
    grid-column: span 3 / span 3;
    grid-row-start: 5;
}

.div7 {
    grid-column: span 3 / span 3;
    grid-column-start: 10;
    grid-row-start: 5;
}
        

@media only screen and (max-width: 1179px) {
	header {
		width: 90%;
		background-position: right center;
	}
}