* {
	padding: 0;
	margin: 0;
	box-sizing: content-box;
}
body {
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	margin: 5em 0;
	background-color: hsl(210, 46%, 95%);
}
.card {
	display: grid;
	grid-gap: 2em;
	grid-template-columns: 300px;
	grid-template-rows: 210px 250px 80px;
	grid-template-areas: "thumbnail" "text" "footer";
	background-color: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 1px 7px 9px 5px rgba(0,0,0,0.39);
	-webkit-box-shadow: 1px 7px 9px 5px rgba(0,0,0,0.39);
	-moz-box-shadow: 1px 7px 9px 5px rgba(0,0,0,0.39);
}
.card__thumbnail {
	grid-area: thumbnail;
	width: 100%;
	height: 100%;
}
.card__content, .card__footer {
	padding: 0em 1em;
}
.card__content {
	grid-area: text;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.card__footer {
	grid-area: footer;
	background-color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.card__thumbnail-user {
	height: 3em;
	border-radius: 45px;
}
.card__info-user {
	display: flex; 
	align-items: center;
	gap: 0.6em;
	width: 1000px;
}
.card__share {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.card__flex-end {
	justify-content: flex-end;
}
.card__share-icon {
	border-radius: 45px;
	width: 3em;
	height: 3em;
	background-color: hsl(214, 17%, 51%);
	display: flex;
	justify-content: center;
	align-items: center;
}
.card__share-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.6em;
	color: white;
}
.card__share-items {
	display: flex;
	column-gap: 0.6em;
	font-size: 1.8rem;
}
.card__hidden {
	display: none;
}
.bg-dark {
	background-color: hsl(217, 19%, 35%);
}
@media (min-width: 1024px) {
	body {
		margin: 0;
	}
	.card {
		grid-template-rows: 200px 50px;
		grid-template-columns: 300px 500px; 
		grid-gap: 0;
	}
	.card__thumbnail {
		background-color: orange;
		grid-row: 1/4; 
	}
	.card__content {
		grid-column: 2;
		grid-row: 1/3; 
		padding: 2em;
	}
	.card__footer {
		grid-column: 2;
		padding: 0.5em;
	}
}