abdullahtarawneh.com/assets/scss/index/hero.scss

.hero .container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas:
		"img"
		"txt"
		"cta";
	@media (min-width: 600px) {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			"txt img"
			"cta img";
	}
	gap: 1em;
}
.hero img {
	grid-area: img;
	width: 100%;
	max-height: 160px;
	@media (min-width: 600px) {max-height: unset;}
}
.hero .cta {
	grid-area: cta;
	align-self: start;
}
.hero .headline {
	grid-area: txt;
	font-size: clamp(1.4em, 7vw, 3em);
	line-height: 1.2;
	align-self: end;
	@media (min-width: 600px) {
		max-width: 11ch;
	}
}