/* Rating */
.rating {
	background: white;
	border-radius: 25px;
	padding: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 90%;
}

.rating input {
	display: none;
}

.rating label {
	font-size: 0;
}

.rating label.hearts::before {
	content: '';
	display: block;
	width: 35px;
	height: 35px;
	cursor: pointer;
	opacity: .3;
}

.rating label.hearts::before {
	background: url(icons/heart-solid.svg) no-repeat center center;
	background-size: 35px;
}

/* Hover effect */
.rating.effect input:checked + label ~ label.hearts::before, .rating.effect:hover input:hover + label ~ label.hearts::before {
	background: url(icons/heart-regular.svg) no-repeat center center;
	background-size: 35px;
	opacity: .3;
}

.rating.effect:hover input + label ~ label.hearts::before {
	background: url(icons/heart-solid.svg) no-repeat center center;
	background-size: 35px;
}

.rating.effect:hover label.hearts::before {
	opacity: 1;
}

.rating.effect input:checked ~ label.hearts::before {
	opacity: 1;
}

/* TABLET */
@media ( min-width: 768px ) {
	.rating {
		width: 35%;
	}
}

/* PC */
@media ( min-width: 1024px ) {
	.rating {
		width: 20%;
	}
}