Landing page hero

<!--hero-->
<div id="hero" class="sectionhero">
  <div class="sectionhero_container">
    <div>
      <h1>Landing page hero</h1>
      <p class="page-intro">This layout can be acomplished with just one image, providing the subjects focal area is contained within a square area in the centre of the image canvas. This area is the demo.</p>
    </div>
    <div class="heroimage">&nbsp;</div>
  </div>
</div>
<!--/hero-->

.heroimage {
	background-image: url(https://peelregion.ca/sites/default/files/2024-03/hero-put-out-waste.jpg);
	background-position: center;
}
div.sectionhero {
	width: 100%;
    background: #F5F5F5;
}
div.sectionhero_container {
    display: grid;
    grid-gap: 0;
    grid-template-columns: 3fr 2fr;
    padding: 0;
    margin: auto;
	width: 100%;
	max-width: 1280px;
	min-height: 375px;
}
.sectionhero_container > div:nth-of-type(1) {
    justify-self: end;
    padding: 62px 40px 62px 0;
	box-sizing: border-box;
    align-self: center;
}

@media (max-width: 1320px) {
	.sectionhero_container > div:nth-of-type(1) {
		padding: 62px 20px;
	}
}

@media (max-width: 1060px) {
	div.sectionhero_container {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 930px) {
	div.sectionhero_container {
		grid-template-columns: 1fr;
	}
	div.sectionhero_container {
		min-height: unset;
	}
	.sectionhero_container > div:nth-of-type(1) {
		min-height: 100px;
		padding: 42px 20px;
		order: 2;
	}
	.sectionhero_container > div:nth-of-type(2) {
		min-height: 0;
        height: 0;
        padding-bottom: 46.625%;
	}
	.sectionhero_container > div:nth-of-type(2) {
		min-height: 0;
        height: 0;
        padding-bottom: 46.625%;
	}
}

@media (max-width: 530px) {
	.sectionhero_container > div:nth-of-type(2) {
        padding-bottom: 56.625%;
	}
}