@font-face {
	font-family: 'SofiaSans';
	src: url('./myFont/SofiaSans-Black.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
   }
@font-face {
	font-family: 'SofiaSans';
	src: url('./myFont/SofiaSans-Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'SofiaSans';
	src: url('./myFont/SofiaSans-BlackItalic.woff2') format('woff2');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'SofiaSans';
	src: url('./myFont/SofiaSans-BoldItalic.woff2') format('woff2');
	font-weight: bold;
	font-style: italic;
}



@font-face {
	font-family: 'Blogger_Sans';
	src: url('./myFont/Blogger_Sans.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
   }
@font-face {
	font-family: 'Blogger_Sans';
	src: url('./myFont/Blogger_Sans-Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Blogger_Sans';
	src: url('./myFont/Blogger_Sans-Italic.woff2') format('woff2');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'Blogger_Sans';
	src: url('./myFont/Blogger_Sans-Bold_Italic.woff2') format('woff2');
	font-weight: bold;
	font-style: italic;
}


#header-container {
	display: grid;
	font-family: "Blogger_Sans";
	font-weight: bold;
	font-style: italic;
	justify-content: center;
	font-size: 40px;
	background-color: rgb(163, 207, 163);
}


.wrapper {
	display: grid;
	grid-template-rows: auto;
	font-family: "Blogger_Sans";
	font-weight: bold;
	justify-items: center;
	margin-top: 50px;
    font-size: 30px;
	grid-template-columns: repeat(4, 1fr [col-start]);
    grid-gap: 20px;
	background-color: rgb(233, 221, 154);
}

.content {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	font-family: "Blogger_Sans";
	font-weight: normal;
	font-size: 15px;
	grid-gap: 20px;
	margin-top: 100px;

}

.panel-title {
	font-family: "Blogger_Sans";
	font-weight: bold;
	font-style: italic;

	margin: 40px;
    text-align: center;
}


.home-images {
	display: grid;
	grid-template-columns: [line1] 300px [line2] 400px [line3] 600px [line4] auto [line5];
	/* grid-template-columns: [line1] 400px [line2] 600px [line3] auto [line4]; */
  	/* grid-template-rows: [row1] 25% [row2] auto [row3] auto [row4]; */
	grid-gap: 20px;
}

@media (min-width: 1000px) and (max-width: 1500px) {
	.content {
		grid-template-columns: auto auto;
	}

	.wrapper {
		grid-template-columns: auto auto;
	}

	.home-images {
		grid-template-columns: auto auto;
	}
	
}

@media (min-width: 1500px) and (max-width: 1700px) {
	.home-images {
		grid-template-columns: auto auto auto;
	}
}

@media  (max-width: 1000px) {
	.content{
		grid-template-columns: auto;
	}

	.wrapper {
		grid-template-columns: auto;
	}

	.home-images {
		grid-template-columns: 800px;
		justify-items: center;
		margin-left: 60px;
		grid-gap: 60px;
	
	}
	
}