#discover {
	margin-bottom: 4em;
	display: flex;
	flex-direction: column;
	gap: 1em;
	align-items: center;
	color: white;
}

#discover .heading {
	color: currentColor;
}

#discover .heading em {
	color: var(--color-yellow);
}

#discover img {
	width: 100%;
}

#discover > div a {
	display: none;
}

@media screen and (min-width: 768px) {
	
	#discover {
		border: var(--border-line);
		border-radius: 10px;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		padding: 4em 0 4em 4em;
		overflow: hidden;
	}
	
	#discover,
	#discover .heading em {
		transition: 
			background-color 300ms,
			color 300ms;
	}

	#discover > div {
		transform-origin: top left;
		transition: transform 300ms;
	}

	#discover > div a {
		display: inline-block;
	}

	#discover > a {
		display: none;
	}

	#discover img {
		width: 50%;
		transform: scale(1);
		margin: -2% -2% -2% 0; 
		transition: transform 300ms;
	}

	#discover:hover {
		background-color: var(--color-yellow);
		color: var(--color-mid-green);
	}

	#discover:hover > div {
		transform: scale(1.1);
	}

	#discover:hover .heading span {
		color: currentColor;
	}

	#discover:hover img {
		transform: scale(0.8);
	}

	#discover:hover .button--sungold-green {
		background-color: var(--color-mid-green);
		color: var(--color-yellow);
	}

}