.event-card {
	--c-highlight: var(--c-black);
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"name round"
		"info info";
	justify-content: start;
	align-items: center;
	margin: 4px;
	padding: 4px;
	width: calc(100% - 8px);
	font-family: titillium-regular;
	font-size: 16px;
	font-weight: normal;
	background: var(--c-white);
	border-left: 4px solid var(--c-highlight);
	border-radius: 4px;
	cursor: pointer;
}

.event-ongoing {
	--c-highlight: var(--c-red);
}

.event-head {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"title"
		"description"
		"termination"
		"place"
		"date";
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: titillium-regular;
	font-size: 16px;
	font-weight: normal;
}

.event-data {
	justify-self: start;
	display: flex;
	flex-flow: row nowrap;
	justify-content: start;
	align-items: center;
	margin: 4px;
	padding: 0;
}

.event-title {
	grid-area: title;
	justify-self: center;
	margin: 32px 8px;
	font-family: titillium-medium;
	font-size: 1.5rem;
	font-weight: normal;
	letter-spacing: 0.1em;
	text-align: center;
}

.event-subtitle {
	margin: 8px;
	font-family: titillium-medium;
	font-size: 1.2rem;
	font-weight: normal;
}

.event-description {
	grid-area: description;
	padding: 8px;
	width: calc(100% - 8px);
	background: var(--c-white);
	border-left: 4px solid var(--c-black);
	border-radius: 4px;
}

.event-termination {
	grid-area: termination;
	padding: 8px;
	width: calc(100% - 8px);
	background: var(--c-white);
	border-left: 4px solid var(--c-black);
	border-radius: 4px;
}

.event-place {
	grid-area: place;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"track"
		"map";
}

.event-date {
	grid-area: date;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:
		"weekend weekend weekend"
		"day1 day2 day3";
}

.event-data i {
	margin: 0 8px 0 0;
	width: 1rem;
	color: var(--c-highlight);
}

.event-expiry i {
	color: var(--c-red);
}

.event-name {
	grid-area: name;
	font-family: titillium-medium;
	font-size: 1rem;
	font-weight: normal;
}

.event-round {
	grid-area: round;
	justify-self: end;
}

.event-deadline,
.event-score,
.event-info {
	grid-area: info;
}

.event-track {
	grid-area: track;
}

.event-map {
	grid-area: map;
	padding: 8px;
	width: calc(100% - 8px);
	background: var(--c-white);
	border-left: 4px solid var(--c-black);
	border-radius: 4px;
}

.event-weekend {
	grid-area: weekend;
}

.event-day {
	display: flex;
	flex-flow: column nowrap;
	justify-content: end;
	margin: 4px;
	padding: 4px;
	background: var(--c-white);
	border-left: 4px solid var(--c-black);
	border-radius: 4px;
}

.event-day-1 {
	grid-area: day1;
}

.event-day-2 {
	grid-area: day2;
}

.event-day-3 {
	grid-area: day3;
}