.fr-upcoming-events {
	display: grid;
	gap: calc(var(--default-spacing-unit) * 2.5);
	grid-template-columns: repeat(1, 1fr);
	margin-bottom: calc(var(--default-spacing-unit) * 2.5);

	@media ( min-width: 48rem ) {
		grid-template-columns: repeat(2, 1fr);
	}

	@media ( min-width: 60rem ) {
		grid-template-columns: repeat(3, 1fr);
	}

	@media ( min-width: 90rem ) {
		grid-template-columns: repeat(4, 1fr);
	}
}

.fr-upcoming-event {
	align-items: center;
	border-radius: calc(var(--default-spacing-unit) / 2);
	box-shadow: 0px 8px 16px -8px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-flow: column;
	justify-content: center;
	overflow: hidden;
	text-decoration: none;
}

.fr-upcoming-event-images {
	aspect-ratio: 350/215;
	flex-shrink: 0;
	position: relative;

	.fr-upcoming-event-images__image {
		height: 100%;
		object-fit: cover;
		object-position: center;
		width: 100%;
	}

	.fr-upcoming-event-images__logo {
		left: 50%;
		padding: 40px;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}

	&:has(.fr-upcoming-event-images__logo) {

		&:before {
			background-color: #474747;
			content: "";
			height: 100%;
			left: 0;
			opacity: 0.5;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 1;
		}
	}
}

.fr-upcoming-event-details {
	align-items: center;
	display: flex;
	flex-flow: column;
	flex-grow: 1;
	gap: var(--default-spacing-unit);
	justify-content: center;
	padding: var(--default-spacing-unit) calc(var(--default-spacing-unit) * 1.5) calc(var(--default-spacing-unit) * 1.25);
	text-align: center;

	@media ( min-width: 60rem ) {
		padding: calc(var(--default-spacing-unit) * 1.5) calc(var(--default-spacing-unit) * 2) calc(var(--default-spacing-unit) * 1.75);
	}
}

.fr-upcoming-event__title {
	color: #000;
	font-family: var(--secondary-font-family);
	font-size: 32px;
	font-style: italic;
	font-weight: var(--font-bold);
	letter-spacing: 1px;
	line-height: 1;
}

.fr-upcoming-event-details-footer {
	align-items: center;
	color: #474747;
	display: flex;
	flex-flow: column;
	font-family: var(--secondary-font-family);
	font-style: italic;
	font-weight: var(--font-bold);
	gap: calc(var(--default-spacing-unit) * 0.5);
	justify-content: center;
	line-height: 1;
	margin-top: auto;
}