:root {
	/* COLORS */
	--black: #000;
	--white: #fff;

	--grey:             #ccc;
	--grey-dark:        #4c4c4c;
	--grey-medium:		#999;
	--grey-light:		#e5e5e5;
	--grey-ultra-light:	#f2f2f2;

	--brand-primary:    #ffa409;
	--brand-secondary:  #969696;

	/* FONTS */
	--font-primary:   'Roboto Condensed', sans-serif;
	--font-secondary: 'Exo', sans-serif;

	/* GRID */
	--grid-column: 1fr;

	/* ALIGNMENT */
	--spacing: 30px;
}

@media (min-width: 768px) {
	:root {
	    --grid-column: repeat(4, 1fr);
	    --spacing: 60px;
	}
}

/* PAGE */
body {
	font-family: var(--font-primary);
}


.main {
	margin-left: auto;
	margin-right: auto;
	max-width: 1170px;
	width: 100%;
}

/* TYPOGRAPHY */
.page-title {
	font-family: var(--font-primary);
	font-size: clamp(2rem, 2.5vw, 3.5rem);
	text-align: center;
}


/* GRID */
.cards-grid {
	display: grid;
	gap: 30px;
	grid-template-columns: var(--grid-column);
	margin-top: var(--spacing);
}

a.card-link,
a.card-link:visited {
	background-color: var(--white);
	border: 1px solid var(--grey-light);
	color: var(--grey-medium);
	border-radius: 8px;
	display: grid;
	grid-template-rows: 1fr auto;
	text-decoration: none;
	transition: box-shadow .3s cubic-bezier(.25,.8,.25,1);
}

a.card-link:hover,
a.card-link:focus {
	box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0px 0px rgba(0,0,0,0.22);
}

.card-content {
	padding: 15px;
}

.card-footer {
	border-top: 1px solid var(--grey-light);
	color: var(--grey-dark);
	padding: 10px 15px;
}

.card-title {
	color: var(--brand-primary);
	margin-top: 0;
}