.image-container {
	position: relative;
	display: inline-block;
	width: 100%;
}

	.image-container img {
		display: block;
		width: 100%;
		height: auto;
	}

	.image-container .overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* Solid white from 0% to 30%, then fade to transparent by 60% */
		background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, /* Solid white at start */
		rgba(255, 255, 255, 1) 10%, /* Stays solid longer */
		rgba(255, 255, 255, 0.9) 20%, /* Slow initial fade */
		rgba(255, 255, 255, 0.7) 30%, /* Gradual change */
		rgba(255, 255, 255, 0.4) 40%, /* Faster change */
		rgba(255, 255, 255, 0.1) 50%, /* Rapid fade near end */
		rgba(255, 255, 255, 0) 100% /* Fully transparent */
		);
		display: flex;
		align-items: center;
	}

.image-container .text {
	font-family: "DM Serif Display", sans-serif;
	padding: 20px;
	color: #575D90;
	font-size: 44px;
 line-height:44px;
	max-width: 100%; /* controls where the fade starts */
}

@media screen and (max-width: 700px) {
	.image-container .text {
		font-size: 24px;
		line-height: 30px;
	}
}