<article>
	<img src="https://random.imagecdn.app/400/250" alt="Let's talk about text">
	<h2>Let's talk about text & 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: 250px;
		object-fit: cover;
		object-position: center;
		border-radius: 6px;
	}

	h2 {
		font-size: 24px;
		line-height: 32px;
		margin-bottom: 10px;
		text-decoration: underline 1px white;
		text-underline-offset: -1px;
		transition: all 0.3s ease;
	}
	&:hover {
		h2 {
			color: #cb9357;
			text-decoration: underline 1px #cb9357;
			text-underline-offset: 5px;
		}
	}
}