.header, .main, .sidebar, .sidebar1, .footer{
    background-image: linear-gradient(to right,#106EBE, #0FFCBE);
    border: 2px solid grey;
    padding: 5px;
    border-radius: 5px;
}	
.header {
    grid-area: header;
	 background-image: url('https://www.geocities.ws/ethnictrends/ethnic.png'); 
     background-size: cover; /* Adjust as needed */ 
   	 height: auto; /* Set a height for your header */ 
	 font-family: sans-serif;
	 font-size:14px;
	 color: red;
}

.main{
    grid-area: main;
	font-family:  sans-serif;
	font-size:18px;
	font-weight:;
	text-align: justify;
	color: Darkblack;
	}
.sidebar{
    grid-area: sidebar;
	font-family:  sans-serif;
	font-size:22px;
	font-weight:;
	text-align: justify;
	color: Darkblack;
}
.sidebar1{
    grid-area: sidebar1;
	 font-family: sans-serif;
}
.footer{
    grid-area: footer;
	 font-family: sans-serif;
}

.container{
    display: grid;
    gap: 10px;
    grid-template-areas: 
    "header  header  header  header "
    "main     main    sidebar  sidebar"
    "main    main     sidebar1 sidebar1"
    "footer  footer  footer  footer "
    ;
}

@media screen and (max-width: 576px) {
    .container{
        grid-template-areas: 
        "header"
        "main"
        "sidebar"
        "sidebar1"
        "footer"
        ;
    }
}

@media screen and (min-width:576px) and (max-width:992px) {
    .container{
        grid-template-areas: 
        "header header header "
        "sidebar main  main "
        "sidebar1 footer footer "
        ;
    }
}