h1.title + p {
	color: var(--grey);
	font-size: 24px;
	letter-spacing: 0.72px;
	margin-bottom: 30px;
}
.compare-count {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	font-weight: inherit;
}
.clear-all {
	padding: 10px 30px;
	border-radius: 12px;
	background: var(--white);
	margin-bottom: 30px;
	color: var(--grey);
	font-weight: 500;
	transition: color .2s linear, background-color .2s linear;
}
.compare-page {
	margin-bottom: 120px;
	.items {
		display: flex;
		gap: 10px;
		height: 100%;
		overflow-x: auto;
		padding-bottom: 30px;
		> .snippet {
			display: grid;
			grid-template-rows: auto 1fr;
			flex-direction: column;
			flex: 0 0 340px;
			.snippet-wrapper {
				display: flex;
				flex-direction: column;
				height: 100%;
				flex: 1 1 auto;
			}
			:where(.add-compare, .add-favorites) {
				opacity: 1;
				pointer-events: all;
			}
			.table-box {
				margin-top: 2px;
				border-radius: 16px;
				padding: 20px;
				background: var(--white);
				display: flex;
				flex-direction: column;
				.table {
					&:first-child {
						margin-bottom: 10px;
					}
					&:not(:first-child) {
						margin-top: auto;
					}
					.thead {
						color: var(--blue);
						font-weight: 700;
						letter-spacing: 0.48px;
						margin-left: 10px;
						margin-bottom: 4px;
					}
					.tbody {
						display: flex;
						flex-direction: column;
						gap: 4px;
						> div {
							display: flex;
							flex-direction: column;
							border-radius: 10px;
							overflow: hidden;
							p {
								padding: 10px;
								min-height: 40px;
								&:first-child {
									color: var(--blue);
									font-size: 14px;
									letter-spacing: 0.42px;
									background: #eaecec;
								}
								&:last-child {
									color: var(--grey);
									font-weight: 500;
									letter-spacing: 0.48px;
									background: var(--grey-white);
								}
							}
						}
					}
				}
			}
		}
	}
}
.empty-compare {
	margin-bottom: 120px;
	h1 {
		display: none;
	}
	.title {
		display: flex;
		align-items: center;
		gap: 10px;
		&::before {
			content: '\e920';
			font: 100 40px / 1 icon;
			color: var(--blue);
		}
	}
	p {
		color: var(--grey);
		font-size: 24px;
		letter-spacing: 0.72px;
		margin-bottom: 10px;
	}
	.green-btn {
		width: fit-content;
		padding-inline: 30px;
	}
}
@media screen and (max-width: 1500px) {
	.empty-compare,
	.compare-page {
		margin-bottom: 100px;
	}
}
@media screen and (max-width: 1280px) {
	.empty-compare {
		.title {
			font-size: 30px;
		}
		p {
			font-size: 20px;
		}
	}
	.empty-compare,
	.compare-page {
		margin-bottom: 80px;
	}
}
@media screen and (max-width: 768px) {
	.compare-page .items > .snippet {
		flex: 0 0 min(340px, calc(50vw - 14px));
		.table-box .table {
			.thead {
				font-size: 14px;
			}
			.tbody > div p {
				padding: 10px;
				&:first-child {
					font-size: 12px;
					letter-spacing: 0.36px;
					min-height: initial;
				}
				&:last-child {
					font-size: 14px;
					letter-spacing: 0.42px;
					min-height: 37px;
				}
			}
		}
	}
	.empty-compare {
		.title {
			font-size: 24px;
		}
		p {
			font-size: 16px;
		}
	}
	.empty-compare,
	.compare-page {
		margin-bottom: 80px;
	}
}
@media screen and (max-width: 386px) {
	.compare-page .items > .snippet {
		flex: 0 0 calc(100vw - 40px);
	}
}
@media (hover:hover) {
	.clear-all:hover {
		background-color: var(--orange);
		color: var(--white);
	}
}