.events-list {
	width: 1075px;
	margin: 50px auto 100px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 55px 42px;
}

.single-event {
	background-color: #f8f8f8;
}

.single-event a {
	display: flex;
    flex-direction: column;
    height: 100%;
}

.single-event .image {
	width: 330px;
	height: 270px;
	display: grid;
}

.single-event .image > * {
	grid-area: 1/1/-1/-1;
}

.single-event .image .overlay {
	background-color: #000;
	opacity: 0.5;
}

.single-event .image img {
	max-width: 100%;
	height: auto;
}

.single-event .event-meta {
	text-align: center;
	background-color: #161414;
	border-top: 1px solid #4a4a49;
	padding: 8px 0;
}

.single-event .event-meta .date,
.single-event .event-meta .start-time {
	font-size: 1.375em;
	color: #fff;
}

.single-event .event-meta .date {
	font-weight: bold;
}

.single-event .event-meta .date .pipe {
	width: 3px;
	height: 18px;
	background-color: #c0ea6a;
	background-color: var(--green, #c0ea6a);
	margin: 0 10px;
	display: inline-block;
}

.single-event .content-wrapper {
	padding: 38px 0 51px;
	text-align: center;
}

.single-event .content-wrapper .event-title {
	font-size: 2.500em;
	font-weight: bold;
	margin-bottom: 12px;
}

.single-event .content-wrapper .event-location {
	font-size: 1.375em;
}

.single-event .content-wrapper .line {
	width: 128px;
	height: 2px;
	background-color: #c0ea6a;
	background-color: var(--green, #c0ea6a);
	margin: 20px auto 25px;
}

.single-event .content-wrapper .content {
	font-size: 0.938em;
}

.single-event .content-wrapper .content p {
	margin: 0;
}

.single-event .button:hover {
	background-color: #c0ea6a;
	background-color: var(--green, #c0ea6a);
	color: #000;
}

.single-event .button {
	background-color: #000;
	color: #c0ea6a;
	color: var(--green, #c0ea6a);
	font-size: 1.063em;
	display: table;
	margin: auto auto -26px;
}

.single-event .button span {
	padding: 15px 30px;
	display: block;
}

@media (max-width: 1100px) {
	.events-list {
		width: 90%;
		grid-gap: 40px 10px;
	}

	.single-event .image {
		width: unset;
	}
}

@media (max-width: 900px) {
	.events-list {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.events-list {
		grid-template-columns: 1fr;
	}
}