<div class=grid>
	<img src=lion-statue.png>
	<p><span>Singapore:<br>Lion City</span></p>
</div>
span {
	background: linear-gradient(135deg, yellow, violet);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	padding: 0.5em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}


/* rules for styling 
**************************/
div {
	width: 600px;
	margin: 60px auto auto auto;
	display: grid;
	grid-template-columns: max-content auto;
	grid-gap: 5vw;
	align-items: center;
}
img {
	width: 25vw;
	border: 2px solid rgb(243, 187, 85);
	border-radius: 50%;
	filter: drop-shadow(0 0 20px rgb(243, 187, 85));
}
p {
	font: small-caps bold 46pt/1em shrikhand;
}
@media (max-width: 700px) {
	div {
		width: 90vw;
	}
	p {
		font-size: 32pt;
	}
}
@media (min-width: 900px) {
	img {
		width: 15vw;
	}
}

External CSS

  1. https://fonts.googleapis.com/css?family=Shrikhand

External JavaScript

This Pen doesn't use any external JavaScript resources.