.hero{
	background-repeat: no-repeat;
}
.hero h2{
	text-transform: none;
}

.hero article > .wrapper {
	display: block;
}


@media (max-width: 767px){
	.hero.graduation01,
	.hero.graduation02{
		background-position: center center;

	}
	.hero.graduation01 .content h1,
	.hero.graduation02 .content h1{
		font-size: 2.1rem;
	}
	.hero.july4th img{
		height:auto;
		width:100%;
	}
}
@media (min-width: 768px){
	.hero.graduation01,
	.hero.graduation02,
	.hero.july4th{
		min-height: 75vh;
		background-size: cover;
	}
	.hero.graduation01 .content .text,
	.hero.graduation02 .content .text,
	.hero.july4th .content .text{
		text-align: left;
	}
	.hero.graduation01 .content h1,
	.hero.graduation02 .content h1,
	.hero.july4th .content h1{
		margin-bottom: 1rem;
		line-height: 125%;
	}
	.hero.graduation02{
		background-position: center bottom;
	}
	.hero.july4th .content{
		width:100%;

	}
	.hero.july4th .content .wrapper{
		height:60%;
		flex-direction: row;
		gap:5%;
		margin:10% auto;
	}
	.hero.july4th .content .wrapper .text{
		padding-bottom:2%;
		display:flex;
		flex-direction: column;
		justify-content: flex-end;
	}
}