:root {
	--creator-cards-background-color: #F0F0F0;
	--creator-cards-primary-color: #000459; /* blue */
	--creator-cards-secondary-color: #ED0678; /* pink */
	--creator-cards-content-color: #444444;
	--creator-cards-content-font-size: .875rem;

/* https://www.joshwcomeau.com/shadow-palette/ */
	--shadow-color: 0deg 0% 0%;
	--shadow-elevation-high:
    0px 0.5px 0.5px hsl(var(--shadow-color) / 0.09),
    0px 1.2px 1.1px -0.4px hsl(var(--shadow-color) / 0.08),
    0px 2px 1.9px -0.8px hsl(var(--shadow-color) / 0.08),
    0px 3.2px 3px -1.2px hsl(var(--shadow-color) / 0.07),
    0px 5.1px 4.8px -1.7px hsl(var(--shadow-color) / 0.07),
    0px 8px 7.5px -2.1px hsl(var(--shadow-color) / 0.06),
    0px 12.2px 11.4px -2.5px hsl(var(--shadow-color) / 0.05),
    -0.1px 17.9px 16.8px -2.9px hsl(var(--shadow-color) / 0.05),
    -0.1px 25.5px 23.9px -3.3px hsl(var(--shadow-color) / 0.04),
    -0.1px 35.1px 32.9px -3.7px hsl(var(--shadow-color) / 0.04);
}

.page-creators-wrapper {
	margin: 0 auto;
	max-width: 1280px;
	padding: 2rem 1rem 4rem 1rem;
}

.page-creators-header-image {
	display: block;
	margin: 0;	
	width: 100%;
    height: auto;
}

.page-creators-heading {
	margin: 0;
	padding-bottom: 1rem;
	text-align: center;
	font-size: 2rem !important;
	color: var(--creator-cards-primary-color);
}

.page-creators-listen {
	margin: 0;
	padding-bottom: 1rem;
	text-align: center;
	font-size: 1.25rem;
	color: var(--creator-cards-secondary-color);
}

.page-creators-description {
	margin: 0;
	padding-bottom: 1rem;	
	text-align: center;
	color: var(--creator-cards-content-color);
}

.page-creators-pricing {
	margin: 0;
	padding-bottom: 3rem;
	text-align: center;
	font-weight: bold;	
	color: var(--creator-cards-primary-color);
}

.creator-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: #FFF;
	margin: 0;
	border-radius: 8px;
	box-shadow: var(--shadow-elevation-high);
}

.creator-card img {
	display: block;
	margin: 0;
	padding-bottom: 1rem;
	border-radius: 8px 8px 0 0;
}

.creator-card-title {
	margin: 0;
	padding: 0 1rem 1rem 1rem;
	color: var(--creator-cards-primary-color);
	font-size: 1.25rem !important;
	text-align: center;
}

.creator-card-tags {
	display: flex;
	gap: .25rem;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0 1rem 1rem 1rem;
	list-style-type: none; /* Remove default bullets */
}

.creator-card-tag {
	position: relative;	
	margin: 0;
	color: var(--creator-cards-primary-color);
	font-size: 0.875rem;
	font-weight: 500;
	list-style-type: circle;
}

.creator-card-tag::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--creator-cards-secondary-color);
    border-radius: 50%;
    margin-right: .25rem; /* Space between the circle and the text */
}

.creator-card-tag:last-child::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--creator-cards-secondary-color);
    border-radius: 50%;
    margin-right: .25rem; /* Space between the circle and the text */
	margin-left: .25rem;
}

.creator-card-content {
	margin: 0;	
	padding: 0 1rem 1rem 1rem;
	flex-grow: 1;
}

.creator-card-content p {
	margin: 0;
	padding-bottom: 1rem;
	color: var(--creator-cards-content-color);
	font-size: var(--creator-cards-content-font-size);
}

.creator-card-button {
	display: flex;
	justify-content: center;
	padding: 0 1rem 1rem 1rem;	
}

.creator-card-button-link {
	width: 100%;	
	margin: 0;
	border-radius: .375rem;
	padding: .75rem;
	background-color: var(--creator-cards-secondary-color);
	color: #FFF;
	font-size: 1rem;
	font-weight: 400;
	text-align: center;
}

/*
 * Responsive cards
 * https: //blog.logrocket.com/responsive-image-gallery-css-flexbox/
*/

:root {
 --gallery-gap: 1.5em;
 --gallery-items-per-row: 1;
}

.creator-cards {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gallery-gap);
}

.creator-card {
	flex: 0 0
	calc(
		(100% - (var(--gallery-gap) * 
		(var(--gallery-items-per-row) - 1))) /
		var(--gallery-items-per-row));
}

@media only screen and (width >= 1024px) {
	.creator-cards {
		--gallery-items-per-row: 3;
	}
}

@media only screen and (768px < width < 1024px) {
	.creator-cards {
		--gallery-items-per-row: 2;
	}
}