.hero__text {
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: -.2px;
	line-height: 1.5
}
.section-hero{
	background-color: #F9FAE0;
}
.hero {
	padding: calc(var(--header-height, 71px) + 4rem) 0 8rem;
	position: relative
}
@media (min-width: 48em) {
	.hero {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		padding: calc(var(--header-height, 82px) + 7.5rem) 0 9rem
	}
}
@media (min-width: 75em) {
	.hero:after {
		content: "";
		height: calc(100% - var(--header-height));
		top: var(--header-height);
		width: 1px;
		background-color: rgba(125, 93, 22, .2);
		position: absolute;
		left: 50%
	}
}
.hero__grid {
	border-bottom: solid 1px rgba(125, 93, 22, .2);
	padding-bottom: 4rem;
	display: grid;
	max-width: 60rem;
	margin: 0 auto;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(4, auto);
	grid-template-areas: "image" "title" "text" "button";
}
@media (min-width: 48em) {
	.hero__grid {
		max-width: unset;
		column-gap: 0;
		border-bottom: none;
		padding-bottom: 0;
		grid-template-columns: 1fr auto 7.2rem 50%;
		grid-template-rows: 1fr auto auto 1fr;
		grid-template-areas: ". . . image""title title title image""text text text image""button button . image"
	}
}
@media (min-width: 75em) {
    .hero__grid {
        grid-template-areas: ". . . image""title title . image""text button . image"". . . image"
    }
}

.hero__title {
	line-height: .99;
	letter-spacing: normal;
	color: #573F1C;
	text-transform: uppercase;
	grid-area: title;
	margin-bottom: 2rem
}
@media (min-width: 48em) {
	.hero__title {
		margin-bottom: 5rem
	}
}
.hero__text {
	font-size: 1rem;
	color: #573F1C;
	grid-area: text;
	margin-bottom: 4rem;
	text-align: justify;
}
@media (min-width: 48em) {
	.hero__text {
		padding-right: 1rem;
	}
}
@media (min-width: 75em) {
	.hero__text {
		padding-right: 1.5rem;
	}
}
.hero__button{
	grid-area: button;
	margin: 0 auto
}
.hero__image{
	grid-area: image;
	margin-bottom: 4rem;
	max-width: 100vw;
	text-align: center;
    margin: 0 auto
}
.hero__image img{
    display: block;
    object-fit: contain;
    overflow: hidden;
    width: 40vw;
    height: auto;
}
@media (min-width: 48em){
    .hero__image img {
        max-width: 50vw;
        height: 50vw
        }
}

@media (min-width: 48em) {
	.hero__image {
		max-width: 40vw;		
	}
}