header img {
	//border: 1px solid blue;
}

header div {
	//border: 1px solid red;
}


#header-top {
	max-width: 96vw;
}

header nav {
    grid-template-columns: minmax(auto, 96vw);
}

section#intro {
    grid-template-columns: 200px minmax(auto, calc(96vw - 4em - 225px));
    column-gap: 4em;
    //background-color: blue;
    
	line-height: 1.2em;
}

#intro img {
	max-width: 225px;
}

section#news {
    grid-template-columns: minmax(auto, 96vw);
}

section#contact-section {
    grid-template-columns: minmax(auto, 96vw);
}



#contact-info {
	max-width: 96vw;
}







@supports(padding: max(0px)) { 
    
	#header-top {
		width: 96vw - max(2vw, env(safe-area-inset-left)) - max(2vw, env(safe-area-inset-right));
		padding-left: max(2vw, env(safe-area-inset-left));
		padding-right: max(2vw, env(safe-area-inset-right));
	}

	#bios {
		padding-left: max(1em, env(safe-area-inset-left));
		padding-right: max(1em, env(safe-area-inset-right));
	}

	section#banner aside {
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
	}

	section#intro {
		//background-color: purple;
	}

	section#intro {
		grid-template-columns: 200px minmax(auto, calc(96vw - 4em - 225px - env(safe-area-inset-left) - env(safe-area-inset-right)));
		padding-left: max(1em, env(safe-area-inset-left));
		padding-right: max(1em, env(safe-area-inset-right));
	}
	
	section#news {
		grid-template-columns: minmax(auto, 96vw - env(safe-area-inset-left) - env(safe-area-inset-right));
	}

	section#contact-section {
		grid-template-columns: minmax(auto, 96vw - env(safe-area-inset-left) - env(safe-area-inset-right));
	}

	footer {
		padding-left: max(1em, env(safe-area-inset-left));
		padding-right: max(1em, env(safe-area-inset-right));
	}
	
	#contact-info {
		padding-left: max(1em, env(safe-area-inset-left));
		padding-right: max(1em, env(safe-area-inset-right));
	}
}