.btn {
    text-decoration: none;
	font-weight: normal;
	font-size: var(--h5-font-size);
    line-height: var(--h5-line-height);
	font-family: inherit;
	background: var(--gray);
	color: var(--white);
	padding: 12px 14px;
	box-sizing: border-box;
    display: inline-block;
	letter-spacing: 0;
	border-radius: 8px;
	border: 1px solid var(--gray);
	outline: none;
	transition: all 300ms;
}
@media (hover: hover) {
	.btn:hover {
		color: var(--white);
		background: var(--light-gray);
		border-color: var(--light-gray);
		transition: all 300ms;
	}
}

.btn.btn-primary {
	background: var(--brand-primary);
	border-color: var(--brand-primary);
}
@media (hover: hover) {
	.btn.btn-primary:hover {
		background: var(--brand-primary-accent);
		border-color: var(--brand-primary-accent);
	}
}

.btn.btn-secondary {
	background: var(--brand-secondary);
	border-color: var(--brand-secondary);
}
@media (hover: hover) {
	.btn.btn-secondary:hover {
		background: var(--brand-secondary-accent);
		border-color: var(--brand-secondary-accent);
	}
}