.hook {
	display: grid;
	grid-template-columns: 1fr 6fr 1fr 7fr 1fr;
	grid-template-rows: 1fr;
	padding: 4rem 0;
	background-color: whitesmoke;
}

.hook .imageBox {
	grid-column: 2/3;
}

.hook .imageBox img {
	width: 100%;
}

.hook .textBox {
	grid-column: 4/5;
	color: var(--dark);	
}

.hook h2 {
	margin: 1.5rem 0 0 0;
}

.hook a:not(.button) {
	text-decoration: underline
}


@media(max-width: 1050px) {
	.hook {
		grid-template-columns: var(--mobileGutter) 1fr var(--mobileGutter);
		grid-template-rows: max-content max-content;
		padding-bottom: 0;
	}
	.hook .imageBox {
		grid-column: 1/4;
		grid-row: 2/3;
		line-height: 0; /* без этого небольшой отступ снизу от картинки */
	}
	.hook .imageBox img {
		border: 0;
		padding-top: 4rem;
	}	
	.hook .textBox {
		grid-column: 2/3;
		grid-row: 1/2;
	}
}