.stars {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: 16px;
}

.stars::before {
    content: '★★★★★';
    letter-spacing: 2px;
    background: -webkit-gradient(linear, left top, right top, from(#fc0), to(#f0f0f0));
    background: linear-gradient(90deg, #fc0 var(--percent), #f0f0f0 var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main-container {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	border: solid 1px var(--contrast-3);
}

.main-grid-wrap {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

.full-grid {
	display: block;
	width: 100%;
	padding: 20px;
}

.half-grid {
	display: block;
	width: 50%;
	padding: 20px;
}

.score-feature {
	background: var(--base);
	margin: 40px 20px;
	padding: 20px;
	display: flex;
    flex-wrap: wrap;
	align-content: flex-start
}

.feature-title {
	display: block;
	width: 66%;
	font-size: 16px;
}

.stars-score {
	display: block;
	width: 33%;
}

.main-container .pros-col ul li::marker {
	color: green;
}

.main-container .cons-col ul li::marker {
	color: red;
}

@media (max-width: 768px) {
	.main-grid-wrap {
		flex-direction: column;
	}
	
	.score-feature {
		margin: 0px !important;
		margin-bottom: 40px !important;
    	align-items: center;
	}
	
	.half-grid {
		width: 100% !important;
	}
	
	.feature-title, .stars {
		font-size: 14px;
	}
}

.main-container hr {
		width: 90%;
    background: var(--contrast-3) !important;
    margin: auto !important;
    margin-top: 0px !important;
    margin-bottom: 30px !important;
    text-align: center !important;
}

.main-container figure {
	margin: auto;
	padding: 20px !important;
	width: 280px;
}

.main-container .pros-col ul {
	list-style: none;
	list-style-image: url('https://www.dreamgrow.com/wp-content/uploads/2022/08/check-circle-svgrepo-com-1.svg')
}

.main-container .cons-col ul {
	list-style: none;
	list-style-image: url('https://www.dreamgrow.com/wp-content/uploads/2022/08/times-circle-svgrepo-com-1.svg')
}

.main-container ul li::marker {
	font-size: 22px;
}