.group-class {
	border-bottom: 0.5px solid var(--border-border_icon, #babfbf) !important;
}

.single-group-class {
	border-bottom: 3px solid transparent;
	transition: border-bottom 0.3s ease;
}

.single-group-class:hover,
.single-group-class.active {
	font-weight: 700 !important;
	border-bottom: 3px solid var(--bs-secondary-2);
}

.btn-active {
	border: 1px solid var(--bs-accent-one) !important;
	background-color: var(--secondary-100) !important;
}

.sports-title::-webkit-scrollbar,
.group-class::-webkit-scrollbar {
	display: none;
}

@media (max-width: 360px) {
	.single-group-class {
		font-size: 14.2px !important;
	}
}

@media (max-width: 600px) {
	.single-group-class.active {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
}

@media (min-width: 320px) {
	.filter-title {
		padding: 0.75rem;
		margin-right: 0.75rem;
		border: 0.5px solid var(--bs-accent-one);
	}

	.sports-section {
		gap: 36px 24px;
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (min-width: 600px) {
	.sports-section {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 905px) {
	.sports-section {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1240px) {
	.sports-section {
		gap: 48px 20px;
		grid-template-columns: repeat(4, 1fr);
	}

	.filter-title:hover {
		background-color: var(--bs-bg-one) !important;
	}
	.filter-title.btn-active:hover {
		border: 1px solid var(--bs-accent-one) !important;
		background-color: var(--secondary-100) !important;
	}
}

@media (min-width: 1440px) {
	.sports-section {
		gap: 56px 20px;
	}
}