<article>
	<img src="https://random.imagecdn.app/380/220" alt="Let's talk about text">
	<h2>Let's talk about text, and how CSS improve its properties</h2>
	<p>Leo nibh felis Maecenas vel eu felis. mattis faucibus Sed sollicitudin metus Aenean Phasellus lorem nec sodales eget, quam, ultricies ante. Praesent sed Praesent a, lorem. Morbi auctor libero. hendrerit in</p>
	<a href="#"></a>
</article>

@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700&display=swap");

p {
	display: -webkit-box;
	-webkit-line-clamp: 3; /* number of lines to show */
	-webkit-box-orient: vertical;
	overflow: hidden;

	margin: 0;
	font-size: 18px;
	line-height: 30px;
}

* {
	box-sizing: border-box;
}
body {
	font-family: "Ubuntu", sans-serif;
}

article {
	max-width: 400px;
	margin: 30px auto;
	border: 3px solid #cb9357;
	padding: 15px;
	border-radius: 16px;
	position: relative;
	& > a {
		position: absolute;
		inset: 0;
	}
	img {
		width: 100%;
		height: 220px;
		object-fit: cover;
		object-position: center;
		border-radius: 6px;
	}

	h2 {
		font-size: 24px;
		line-height: 36px;
		margin: 10px 0;
		display: inline;
		background-image: linear-gradient(
			to right,
			currentColor 0,
			currentColor 100%
		);
		background-size: 0 1px;
		background-position: 0 95%;
		transition: background-size 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s,
			color 0.3s ease;
		padding: 0.7% 0;
		background-repeat: no-repeat;
		color: inherit;
	}
	&:hover {
		h2 {
			color: #cb9357;
			background-size: 100% 1px;
		}
	}
}