/* ========================================
   Component: More Button (.btn-more)
   Black pill button with hover color inversion
   ======================================== */

.btn-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 260px;
	height: 84px;
	background-color: #222;
	color: #fff;
	border: 2px solid #222;
	border-radius: 50px;
	font-family: 'Ubuntu', sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-more:hover {
	background-color: #fff;
	color: #222;
}

.btn-more__arrow {
	display: flex;
	align-items: center;
}

.btn-more__arrow svg {
	width: 12px;
	height: 12px;
}

/* Mobile */
@media (max-width: 767px) {
	.btn-more {
		width: 180px;
		height: 58px;
		font-size: 16px;
	}
}