* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Montserrat", sans-serif;
}
body {
	background-color: royalblue;
}
main {
	display: grid;
	grid-template-columns: repeat(3, 33%);
	grid-template-rows: repeat(2, 50vh);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	place-content: center;
}
.s1 {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 25vh;
	width: 25%;
}
.parent1 {
	display: grid;
	grid-template-columns: repeat(2, 100px);
	grid-template-rows: repeat(2, 100px);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	place-content: center;
}
.parent2 {
	display: grid;
	grid-template-columns: repeat(3, 100px);
	grid-template-rows: repeat(1, 100px);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	place-content: center;
}
.parent3 {
	display: grid;
	grid-template-columns: repeat(6, 50px);
	grid-template-rows: repeat(6, 50px);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	place-content: center;
}
.parent4 {
	display: grid;
	grid-template-columns: repeat(3, 100px);
	grid-template-rows: repeat(3, 100px);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	place-content: center;
}
.parent5 {
	display: grid;
	grid-template-columns: repeat(4, 80px);
	grid-template-rows: repeat(4, 80px);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	place-content: center;
}
.parent6 {
	display: grid;
	grid-template-columns: repeat(5, 60px);
	grid-template-rows: repeat(5, 60px);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	place-content: center;
}

.div1 {
	grid-area: 1 / 1 / 2 / 2;
	background-color: red;
	border: 1px solid black;
}
.div2 {
	grid-area: 1 / 2 / 2 / 3;
	background-color: black;
	border: 1px solid black;
}
.div3 {
	grid-area: 2 / 1 / 3 / 2;
	background-color: black;
	border: 1px solid black;
}
.div4 {
	grid-area: 2 / 2 / 3 / 3;
	background-color: red;
	border: 1px solid black;
}
.div5 {
	grid-area: 1 / 1;
	background-color: red;
	border: 1px solid black;
}
.div6 {
	grid-area: 1 / 3;
	background-color: yellow;
	border: 1px solid black;
}
.div7 {
	grid-area: 1/1/7/7;
	background-color: green;
	border: 1px solid black;
}
.div8 {
	grid-area: 2/2/6/6;
	background-color: cadetblue;
	border: 1px solid black;
}
.div9 {
	grid-area: 2/2/4/4;
	background-color: yellow;
	border: 1px solid black;
}
.div10{
	grid-area: 1/1;
	background-color: yellow;
	border: 1px solid black;
}
.div11{
	grid-area: 1/3;
	background-color: cadetblue;
	border: 1px solid black;
}
.div12{
	grid-area: 2/2;
	background-color: red;
	border: 1px solid black;
}
.div13{
	grid-area: 3/1;
	background-color: purple;
	border: 1px solid black;
}
.div14{
	grid-area: 3/3;
	background-color: green;
	border: 1px solid black;
}
.div15{
	grid-area: 1/1/3/3;
	background-color: pink;
	border-radius: 100px;
	border: 1px solid black;
}
.div16{
	grid-area: 2/2/4/4;
	background-color: plum;
	border-radius: 100px;
	border: 1px solid black;
}
.div17{
	grid-area: 3/3/5/5;
	background-color: purple;
	border-radius: 100px;
	border: 1px solid black;
}
.div18{
	grid-area: 1/1/1/5;
	background-color: red;
	border: 1px solid black;
}
.div19{
	grid-area: 2/1/6/1;
	background-color: purple;
	border: 1px solid black;
}
.div20{
	grid-area: 5/2/5/6;
	background-color: green;
	border: 1px solid black;
}
.div21{
	grid-area: 1/5/5/6;
	background-color: yellow;
	border: 1px solid black;
}
.div22{
	grid-area: 2/2/3/4;
	background-color: green;
	border: 1px solid black;
}
.div23{
	grid-area: 3/3/5/2;
	background-color: yellow;
	border: 1px solid black;
}
.div24{
	grid-area: 5/3/4/5;
	background-color: red;
	border: 1px solid black;
}
.div25{
	grid-area: 2/4/4/4;
	background-color: purple;
	border: 1px solid black;
}
.div26{
	grid-area: 3/3/3/3;
	background-color: blue;
	border: 1px solid black;
}