body {
	
}

.event {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(7, auto);
	grid-template-areas: 
		"a  a"
		"b  b"
		"c  c"
		"d  d"
		"e  f"
		"e  g"
		"h  h"
	;
}
@media(min-width:40em){
	.event{
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr auto auto auto 1.5fr 1fr;
		grid-template-areas: 
			"a  a  a"
			"b  d  d"
			"c  d  d"
			"c  e  f"
			"g  g  g"
			"h  h  h"
	;
	}
}

@media(min-width:60em){
	.event{
		grid-template-columns: 1fr 1fr 1fr auto 1fr 1fr;
		grid-template-rows: repeat (4, auto);
		grid-template-areas: 
			"a  a  a  a  a  a"
			"b  b  d  d  d  e"
			"c  c  c  g  g  f"
			"h  h  h  h  h  h"
	;
	}
}
.checks__top{
	grid-area: a;
}
.event__title {
	grid-area: b;
}
.event__subtitle {
	grid-area: c;
}
.event__image {
	grid-area: d;
}
.event__date {	
	grid-area: e;
}
.event__location {	
	grid-area: f;
}
.event__address {
	grid-area: g;
}
.checks__bottom{
	grid-area: h;
}

/* Other Styles */
.checks__top, .checks__bottom{
 	width: auto;
	height: 3em;
	background-color: #FFF;
	background-size: 50px 50px;
	background-position: 0 0, 25px 25px;
	background-image: 
		linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
		linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
}
.event__title {
	background-color: black;
	color: white;
	font-weight: 800;
	padding: 1rem;
	font-size: 2.5em;
	display: flex;
	align-items: flex-end;
	font-family: serif;
	line-height: 1.2em;
}
@media (min-width:30em) {
	.event__title {
		font-size: 8vw;
	}
}
@media (min-width:40em) {
	.event__title {
		font-size: 6vw;
		padding: 1.5rem 1rem;
	}
}
@media (min-width:50em) {
	.event__title {
		font-size: 7vw;
	}
}
.event__subtitle{
	background-color: white;
	color: black;
	display: flex;
	align-items: center;
	padding: 1rem;
	font-size: 1em;
	font-family: serif;
	font-weight: 700;
	font-style: italic;
}
@media (min-width:30em) {
	.event__subtitle {
		font-size: 1.1em;
	}
}
@media (min-width:33em) {
	.event__subtitle {
		font-size: 1.2em;
	}
}
@media (min-width:36em) {
	.event__subtitle {
		font-size: 1.3em;
	}
}
@media (min-width:40em) {
	.event__subtitle {
		font-size: 2em;
	}
}
@media (min-width:50em) {
	.event__subtitle {
		font-size: 2.1em;
	}
}
@media (min-width:51em) {
	.event__subtitle {
		font-size: 2.2em;
	}
}

.event__date {
	background-color: black;
	color: white;
	font-weight: 700;
	padding: 1rem;
	font-family: serif;
	font-size: 1.5em;
}
@media (min-width:30em) {
	.event__date {
		font-size: 1.75em;
		padding: 2rem;
	}
}
@media (min-width:40em) {
	.event__date {
		font-size: 1.2em;
	}
}
@media (min-width:42em) {
	.event__date {
		font-size: 1.25em;
	}
}
@media (min-width:44em) {
	.event__date {
		font-size: 1.3em;
	}
}
@media (min-width:46em) {
	.event__date {
		font-size: 1.4em;
	}
}
@media (min-width:48em) {
	.event__date {
		font-size: 1.5em;
	}
}
@media (min-width:50em) {
	.event__date {
		font-size: 1.6em;
	}
}
@media (min-width:60em) {
	.event__date {
		font-size: 2.5em;
		padding: 2rem;
	}
}
.event__location {
	background-color: white;
	color: black;
	font-weight: 500;
	font-family: serif;
	padding: 1rem 1rem;
	font-size: 1.5em;
	align-self: center;
}
@media (min-width:30em) {
	.event__location {
		font-size: 2em;
	}
}
@media (min-width:40em) {
	.event__location {
		font-size: 1.5em;
	}
}
@media (min-width:42em) {
	.event__location {
		font-size: 1.6em;
	}
}
@media (min-width:44em) {
	.event__location {
		font-size: 1.7em;
	}
}
@media (min-width:46em) {
	.event__location {
		font-size: 1.8em;
	}
}
@media (min-width:48em) {
	.event__location {
		font-size: 1.9em;
	}
}
@media (min-width:50em) {
	.event__location {
		font-size: 2em;
	}
}

em.mint{
	color:#00FFB8;
	font-style: normal;
}
.event__address {
	background-color: black;
	color: white;
	font-family: serif;
	font-weight: 500;
	padding: 1rem ;
	
}
@media (min-width:30em) {
	.event__address {
		font-size: 1.1em;
		font-weight: 300;
	}
}
@media (min-width:40em) {
	.event__address {
		font-size: 1.2em;
		font-weight: 300;
		text-align: center;
	}
}

.event__time {
	background-color: pink;	
	color: saddlebrown;
	font-weight: 700;
	padding: 1rem;
	
}
@media (min-width:60em) {
	.event__time {
		font-size: 1.5em;
		padding: 2rem;
	}
}
.event__image {
}
.event__image img {
	display: block;
	width: 100%;
	height: 100%;
/*	positioning image in the grid*/
	object-fit: cover;
	object-position: left top;
}



/* Styles... */