<article>
	<h2>Let's talk about outline, 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="#">Read More</a>
</article>

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

article > a {
	outline: 2px solid #fff;
	outline-offset: -4px;
	transition: outline-offset 0.1s ease;
	&:hover {
		outline: 2px solid #cb9357;
		outline-offset: 2px;
	}
	display: inline-flex;
	margin: 15px 0 10px;
	text-decoration: none;
	background: #cb9357;
	color: #222;
	font-weight: 700;
	padding: 15px 30px;
	border-radius: 100px;
}

* {
	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;
	img {
		width: 100%;
		height: 220px;
		object-fit: cover;
		object-position: center;
		border-radius: 6px;
	}

	h2 {
		font-size: 24px;
		line-height: 36px;
		margin: 10px 0;
	}

	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;
	}
}