/* Cards is a container for multiple cards. */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	grid-gap: 1.5rem;

	/* If there is only one card, make it full width. */
	> .card:only-child {
		grid-column: 1 / -1;
	}
}

/** Card 
*	- The card is a container for a figure and a paragraph.
*	- The figure contains an image and a figcaption.
*	- The paragraph contains the card text.
*	- The card has an optional badge and button(s).
* 	- example:
*	<div class="card">
*		<figure>
*			<img src="assets/img/piggy-plus.svg" alt="Piggy Plus">
*			<figcaption>Piggy Plus</figcaption>
*		</figure>
*		<p class="card__text">Piggy Plus is awesome</p>
*		<div class="card__badge card__badge--piggy-plus">Piggy Plus</div>
*		<a href="#" class="card__button">Learn More</a>
*	</div>
*/
.card {
	background-color: var(--color-light-gray);
	color: var(--color-primary);
	padding: 1rem;
	border-radius: 0.5rem;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
	position: relative;

	.button {
		margin-left: auto;
	}

	> figure {
		width: 100%;
		margin: 0;
		display: flex;
		padding-bottom: 1rem;
		border-bottom: 1px solid var(--color-primary);

		> img, > svg {
			width: 4rem;
			height: 4rem;
			flex: 0 0 4rem;
		}
		
		> figcaption {
			margin-left: 1rem;
			flex: 1;
			align-self: center;
			font-size: 1.75rem;
		}
	}

}

/* Card Badge located in the upper right corner of the card. */
.card__badge {
	position: absolute;
	top: 5px;
	right: -15px;
	color: var(--color-primary);
	font-size: 1.2rem;
	transform: rotate(25deg);
	padding: 0.1rem;
	border-radius: 50%;
	width: 140px;
	height: 50px;
	line-height: 50px;
	text-align: center;
}

.card__badge--piggy-plus {
	box-shadow: 
		-5px -1px 0 var(--color-piggy-plus),  
		1px -1px 0 var(--color-piggy-plus),
		-1px 2px 0 var(--color-piggy-plus), 
		5px 1px 0 var(--color-piggy-plus);
}

.card__badge--status-camp {
	box-shadow: 
		-5px -1px 0 var(--color-status-camp),  
		1px -1px 0 var(--color-status-camp),
		-1px 2px 0 var(--color-status-camp), 
		5px 1px 0 var(--color-status-camp);
}

.card__text {
	margin-top: 1rem;
}