.hp-events {
	padding:75px 10px;
	background-image: linear-gradient(to right, var(--midnight), var(--midnight-2));
	position:relative;
	overflow:hidden;
}
.events-container {
	display:grid;
	gap:5rem;
	width:min(1200px, 100%);
	margin-inline:auto;
}
.hp-events .events-heading {grid-area:events-heading;position:relative;}
.hp-events .events-links {grid-area:events-links;}
.hp-events .events-list {grid-area:events-list;}

.event-item {
	padding-block:3rem;
	border-bottom:1px solid var(--supernova);
}
.event-item:last-child {border-bottom:none;}

.hp-events .events-heading h3, .event-item .event-time {color:#ffffff;}
.hp-events .events-heading h3 {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	border:4px solid var(--supernova);
	border-radius:50%;
	margin:0;
	font-style:italic;
	z-index:1;
	position:relative;
}

.event-item .date {color:var(--supernova);}
.event-item a.event-headline {
	font-family:'Avenir-Black', 'Montserrat', 'Helvetica', sans-serif;
	text-decoration:none;
	color:var(--cerulean);
	font-size:22px;
	line-height:28px;
	display:inline-block;
	margin-bottom:1.4rem;
}
.event-item a.event-headline:hover {color:var(--text-link-hover);}
.event-item a.event-headline:focus:not(:active) {outline:2px solid var(--cerulean);outline-offset:2px;color:var(--text-link-hover);}

.event-item .event-time, .event-item .date {
	font-family:'Avenir-Regular', 'Montserrat', 'Helvetica', sans-serif;
	font-weight:500;
	font-size:18px;
	line-height:22px;
	letter-spacing:0;
	margin-bottom:1.4rem;
}
.event-item .event-time {margin-bottom:0;}
.hp-events .events-heading h3 {
	font-family:'Avenir-Black', 'Montserrat', 'Helvetica', sans-serif;
	color:#fff;
	text-align:center;
	font-size:45px;
	line-height:48px;
}

.events-heading .ball-connector, 
.events-heading .vertical-connector,
.hp-events .events-tail {position:absolute;}

.hp-events .events-tail {
	height:4px;
	background-repeat: repeat-x;
    background: var(--supernova);
}

.events-links .btn-holder {padding-inline:10%;}
.events-links .btn-holder a.btn-rounded-gold:last-child {margin-bottom:0;}

@media screen and (min-width: 1200px) {

	.hp-events .events-container {
		grid-template-columns:repeat(2, 1fr);
		grid-template-areas: "events-heading events-list" "events-links events-list";
	}
	.hp-events .events-heading h3 {
		width:315px;
		height:315px;
		margin-inline:auto;
	}
	.events-heading .ball-connector {
		top:150px;
		left:-5px;
	}
	.events-heading .vertical-connector {
		top:85px;
		left:-5px;
	}
	.hp-events .events-tail {
		width: calc((100vw - 1200px)/2)!important;
    	top: 160px;
    	left: -5px;
	}
	.events-heading .line-4 {display:none;}
	.events-heading .ball-connector-2 {display:none;}
}

@media screen and (max-width: 1199px) {
	.hp-events .events-container {
		grid-template-areas: "events-heading" "events-list" "events-links";
		max-width:650px;
	}
	
	.hp-events .events-heading h3 {
		width:225px;
		height:225px;
		margin-inline:auto;
		font-size:34px;
		line-height:1.3;
	}
	
	.events-heading .ball-connector {
		top:102px;
		left:78px;
	}
	
	.events-heading .vertical-connector {
		top:38px;
		left:75px;
	}
	.events-heading .ball-connector-2 {
		position:absolute;
		top:29px;
		left:-69px;
		transform: rotate(180deg);
	}
	
	.hp-events .events-tail {display:none;}
}

@media screen and (min-width:430px) and (max-width: 667px) {

	.events-heading .ball-connector-2,
	.events-heading .vertical-connector {display:none;}
	
	.hp-events .events-heading {
		height:230px;
	}
	
	.events-heading .ball-connector {
		top:100px;
		left:-45px;
	}
	
	.hp-events .events-heading h3 {
		position:absolute;
		margin:0;
		left:90px;
		top:0;
	}

}

@media screen and (max-width:429px) {
	.events-heading .ball-connector,
	.events-heading .ball-connector-2,
	.events-heading .vertical-connector {display:none;}
}