/* 
#################################################
Default layout and styling for this page.
This is for mobile devices. 
####################################################
*/
.site-page {
	display: grid;
	grid-template-columns: minmax(auto, 650px);
	grid-template-rows: auto;
	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";
		
	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%;
	color: black;
	/*font-size: 1.4rem;*/
	/*line-height: 1rem; */
	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-left: auto;
	margin-right: auto;
	width: 130px;
	width: 75%;
}

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

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

.disable-button {
	display: none;
}

.temp-placeholder {
	font-size: 120px;
	color: red;
}



/* ############################################# */
/* These settings are for larger screens. */
/* ############################################# */
@media screen and (min-width: 600px) {
		
	/* Layout and styling for each card on the page. */
	/* This is for larger screen devices. */ 
	.card {
		display: grid;
		/*grid-template-columns: minmax(auto, 650px);*/
		/*grid-template-columns:  130px auto;*/
		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;
	}
	
	.card-image {
		grid-area: photo;
		border-radius: 4px;
		/*margin: auto; */
		width: 130px;
		width: 100%;
	}
}