.card-wrapper:hover {
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

/* .card-link {
    position: absolute;
    z-index: 1;
}

.product-card-content {
    position: relative;
    z-index: 2;
} */

.product-grid-item {
	/* width is (100% - 3rem)/3 as there are 2 gutters of 1.5 rem each*/
	width: calc(33% - 1rem);
	margin-bottom: 1.5rem;
}

.product-text-content {
	border: 1px solid #cfcfcf;
	padding: 0.75rem;
	/* border-top: none; */
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	text-align: center;
	/* overflow: hidden; */
	/* Hide overflow text. It is also making the share options trimmed */
	white-space: nowrap;
	/* Prevent wrapping */
	text-overflow: ellipsis;
	/* Show ellipsis (...) when text is truncated */
}

.art-title {
	font-size: 1.25rem;
	font-weight: 500;
	text-transform: capitalize;
}

.card-link {
	color: #000;
}

.card-link:hover {
	color: #000;
}

.artist-card-name {
	font-size: 0.9375rem;
	color: #555;
	text-transform: capitalize;
}

.artist-card-name:hover {
	color: #ff826b;
}

.art-card-price {
	font-size: 0.875rem;
	font-weight: 500;
	font-family: Montserrat, sans-serif;
	text-transform: capitalize;
}

@media (max-width: 991px) {
	.product-grid-item {
		/* width is (100% - 1.5rem)/2 as there are 1 gutter of 1.5 rem each*/
		width: calc(50% - 0.75rem);
	}
}

/* mobile screens */
@media (min-width:0) and (max-width:575px) {
	.product-grid-item {
		/* width is (100% - 0.75rem)/2 as there are 1 gutter of 0.75 rem*/
		width: calc(50% - 0.375rem);
		margin-bottom: 0.75rem;
	}

	.product-text-content {
		padding: 0.5rem;
	}

	.art-title {
		font-size: 1rem;
	}

	.artist-card-name {
		font-size: 0.875rem;
	}

	.art-card-price {
		font-size: 0.75rem;
	}

}