/* This is the default layout and styling for the page. */
.site-page {
	display: grid;
	grid-template-columns: minmax(auto, 650px); /* One colulm */
	grid-template-rows: auto; /*one or many rows */
	column-gap: 1rem;
	row-gap: 1rem;
	grid-template-areas: "main";
	justify-content: center;
	margin: 1rem;
}


/*--------------------------------------------------------------
General styling
--------------------------------------------------------------*/
img {
	display: block;
	border: 0;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
Page:
--------------------------------------------------------------*/
.page-title {
	font-size: 200%;
	margin: 0;
	color: ivory;
}

.page-intro {
	font-size: 130%;
	margin: 0;
	color: ivory;
}

/*--------------------------------------------------------------
Cards:
--------------------------------------------------------------*/
.cards {
	justify-content: center;
	padding: 0;
	/*grid-area: main; */
	/*border: 2px solid brown;*/
}

.cards a {
	display: block;
	/* margin-bottom: 1rem; */
	text-decoration: none;
}

/* Default layout and styling for each card on the page. */
/* This is for mobile devices. */
.card {
	display: grid;
	/*grid-template-columns: minmax(auto, 650px);*/
	grid-template-columns: auto;
	grid-template-rows: auto;
	column-gap: 1rem;
	row-gap: 1rem;
	grid-template-areas: 
		"title"
		"photo"
		"text"
		"button";
			
	/*font-family: "Raleway";*/
	border-radius: 6px;
	padding: 1rem;
	font-size: 90%;
	color: black;
	background: ivory;
	/*margin: 2.5rem;*/
	box-shadow: 1px 1px 10px 1px grey;
}

.card-header {
	grid-area: title;
	margin: 0;
	font-size: 220%;
	/*font-size: 1.4rem;*/
	/*line-height: 1em;*/
	text-align: center;
}

/*
.cards a:focus ,
.cards a:hover  {
	background: hsl(0, 0%, 97%);
}
*/

.card-text {
	grid-area: text;
	font-size: 140%;
	color: black;
	margin: 0;
}

.card-image {
	grid-area: photo;
	border-radius: 4px;
	margin: auto; /* Centers the image. */
	width: 130px;
}

.card-footer {
	grid-area: footer;
}

.card-button {
	grid-area: button;
}



/* ############################################# */
/* These settings are for larger screens. */
/* ############################################# */
@media screen and (min-width: 600px) {
	.card {
		display: grid;
		grid-template-columns:  1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: auto auto 2rem;
		column-gap: 1rem;
		row-gap: 1rem;
		grid-template-areas: 
			"title title title title title"
			"photo text text text text"
			"photo button button button footer";
		/*justify-content: center;*/
		margin: 1rem;
	}
}