@import url("./global.css");

#list_tas > div > div.card {
	margin: 8px;
}

#list_tas {
	max-width: 1220px;
}

#list_tas > div > div.card {
	width: 18rem;
}

#product-container > div.card {
	cursor: pointer;
}

#pagination-numbers > li {
	margin-left: -1px !important;
}

#pagination-numbers > li[class *= "purple-300"] > a {
	background-color: inherit;
	color: white;
}

.page-item:first-child .page-link {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.page-item:last-child .page-link {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

div.card > a > img {
	width: 100%;
	height: 300px;
	object-fit: cover;
}

@media screen and (max-width: 1275px) {
	#list_tas {
		max-width: 912px;
	}
}

@media screen and (max-width: 960px) {
	#list_tas {
		max-width: 610px;
	}
}

@media screen and (max-width: 670px) {
	#list_tas > div {
		flex-direction: column;
		padding-left: 20px;
		padding-right: 20px;
	}

	#list_tas > div > div.card {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	#list_tas > div > div.card:first-child {
		margin-top: 0;
	}

	li.page-item {
		margin-bottom: 16px;
	}
}