.banner {
	justify-content: center;
	align-items: center;
	padding: 4em;
	gap: var(--spacing-s);
}

.banner p {
	font-style: italic;
}

.event {
	border-radius: var(--b-radius);
	padding: 1em;

	position: relative;
	background-repeat: repeat-y;
	background-position: right top;
	background-size: 100% auto; /* Adjust width and height as needed */
}

.event svg {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: auto;
}

.event--primary svg path { color: var(--primary--very-dimmed); }
.event--secondary svg path { color: var(--secondary--dimmed); }

.event--outdated {
	filter: opacity(0.3);
}

.event--primary .timebox {
	background-color: var(--primary--very-dimmed);
}

.event--secondary .timebox {
	background-color: var(--secondary--dimmed);
}


.timebox {
	padding: 2em;
	flex: 1;
	justify-content: center;
    align-items: center;
    gap: var(--spacing-s);
	border-radius: var(--b-radius);
}

.timebox .time-boundaries {
	font-size: 1.2em;
	font-weight: bold;
}

.meta {
	flex: 4;
	justify-content: center;
	padding: 2em 0;
}

@media screen and (max-width: 769px) {
	.event svg { display: none; }
	.meta { padding: var(--spacing-s); }
}