main {
	max-width: 800px;
}
.calendar {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	
	> h2 {
		position: relative;
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: flex-start;
		> span {
			position: relative;
			font-size: 1rem;
			font-weight: 200;
			background: white;
			margin: 0;
			padding-right: 1rem;
		}
		&:after {
			content: "";
			position: absolute;
			left: 0;
			top: 50%;
			width: 100%;
			height: 1px;
			background: #ccc;
			z-index: -1;
		}
	}
	
	> article {
		border: 1px solid black;
		margin-block: 1rem;
		padding: 1rem;
		display: flex;
		flex-direction: row-reverse;
		gap: 1rem;
		
		> div:first-child {
			flex: 4;
			display: flex;
			flex-direction: column;
			h2 {
				font-size: 2rem;
				order: 2;
				margin-block: 1rem;
			}
			h3 {
				font-size: 1.2rem;
				order: 3
			}
			h4 {
				font-size: 1rem;
				order: 1;
			}
			time {
				font-weight: 100;
			}
		}
		> div:last-child {
			text-align: center;
			flex: 1;
			font-size: 1rem;
			font-weight: 100;
			> * {
				display: block;
				font-size: 3rem;
				font-weight: 500;
				line-height: 1;
				margin: 0;
			}
		}
	}
}