.guide {
	position: relative;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 2px solid var(--theme--color--primary);
	color: var(--theme--color--primary);
	display: inline-block;
}
	.guide:hover,
	.guide:focus,
	.guide:active {
		background: var(--theme--color--primary);
		color: rgba(255,255,255, 1);
	}

.guide::after {
	content: '\f175';
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-size: var(--theme--font-size--medium);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}
	.guide--up::after {
		transform: translate(-50%, -50%) rotate(180deg);
	}
	
@media (min-width: 768px) {
	.guide {
		width: 46px;
		height: 46px;
	}
}