.content-main-section {
	width: 100%;
}

/* Incomming from SPA */
main {
	display: flex;
	flex-direction: column;
	gap: var(--padding-gap-primary);
}

#category-selector {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	width: 100%;
}
.events-header {
	border: var(--border-primary);
}
#category-selector a {
	width: 100%;
	text-align: center;
}
#events {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	gap: var(--padding-gap-primary);
}
/* Checken of .event-article nog bestaat anders kunnen de regels weg */
.event-article {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	border: var(--border-primary);
	background-color: var(--color-secondary);
}
.event-article-sub {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.event-article-sub-sub {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 20px;
}
.event-article-sub-sub > section {
	display: flex;
	gap: 10px;
	flex-direction: column;
}
.event-article-sub-sub > section > section {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
}
.event-article > img {
	width: 100%;
	border-bottom: var(--border-primary);
}
.event-article-sub > p {
	padding: 10px;
	text-align: center;
}
.event-article-sub-sub > a {
	margin-bottom: 10px;
	width: 80%;
}
@media screen and (min-width: 1000px) {
	#category-selector {
		width: 100%;
		flex-direction: row;
	}
	#category-selector a {
		width: fit-content;
		text-align: center;
	}
	.event-article {
		flex-direction: row;
		gap: 0;
	}
	.event-article-sub {
		align-items: flex-start;
		justify-content: center;
		gap: 10px;
		border-left: var(--border-primary);
		height: 100%;
		padding: 10px;
	}
	.event-article-sub-sub {
		flex-direction: row;
	}
	.event-article-sub-sub > section {
		flex-direction: row;
	}
	.event-article-sub > p {
		text-align: start;
		padding: 0;
	}
	.event-article > img {
		height: 350px;
		width: auto;
		border: none;
	}
	.event-article-sub-sub > a {
		width: 300px;
		margin: 0;
	}
}