header.css

header {
	background: white;
	position: fixed;
	top:0;
	height: 100px;
	width: 100%;
	color: black;
	overflow:hidden;

	box-shadow: 0 5px 10px rgba(0,0,0,0.5);

	z-index: 100;
}

header img {
	height: 100px;
	transition: transform 0.2s ease-in-out;
}

header a:first-child img, header a:last-child img{
	width: 80%;
	object-fit: contain;
}

header a{
	display: inline-block;
	width: 40%;
	text-align: center;
	height: 100%;
}

header a:nth-child(2) {
	width: 20%;
}
header a:nth-child(2) img {
	height: 80px;
}

header a:first-child {
	text-align: left;

	background: linear-gradient(to right, rgba(255,255,255,0) 50%, rgba(255,255,255,1.0)), url('/flourish_bg.png');
	background-position: center center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
header a:first-child img {
	position: absolute;
	height: initial;
	max-height: 450px;
	width: 80%;
	top: 50%;
	transform:translateY(-50%);
}
header a:first-child:hover img {
	transform:translateY(-50%)scale(1.02);
}
header a:first-child:active img {
	transform:translateY(-50%)scale(1);
}

header a:last-child {
	text-align: right;

	background: linear-gradient(to left, rgba(255,255,255,0) 70%, rgba(255,255,255,1.0)), url('/sweetspace/bg.png');
	background-position: center center;
	background-size: cover;
}

header a:hover img {
	transform: scale(1.02);
}

header a:active img {
	transform: scale(1);
}

@media(max-width: 750px) {
	header a:nth-child(2) {
		display: none;
	}
	header a{
		width: 50%;
	}
}