.event-card {
	height: 10rem;
	background-color: white;
	border-block-start: 2px solid var(--color-1);
	padding: 1rem 1.5rem;
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: repeat(3, 1fr);
	grid-template-areas:
		'tags tags'
		'title dates'
		'address dates';
	gap: 1rem;
	align-items: center;
	position: relative;

	p { margin: 0; }

	h3 {
		grid-area: title;
		font-size: 1.25rem;
		font-weight: 600;
		color: black;
		text-transform: uppercase;
		text-wrap: balance;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;

		a::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 1;
		}
	}

	.tags {
		grid-area: tags;
		display: flex;
		gap: 0.5rem;

		span {
			text-transform: capitalize;

			> b { padding-inline-end: 0.5rem; }
		}
	}

	address {
		grid-area: address;
		color: lightgray;
		font-size: 1rem;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.dates {
		grid-area: dates;
		place-self: start end;

		:is(.startDate, .endDate) > span { display: none; }

		:is(.isPast, .isGoing) {
			display: grid;
			gap: 0.5rem;
			align-items: center;
		}

		.event-state { padding: 0; }

		.isPast {
			color: lightgray;
			text-transform: uppercase;
		}

		.isGoing { color: black; }

		.isLive { color: var(--red-alert); }
	}

	:is(.state, .date__icon, .address__icon, .heading) { display: none; }

	@media screen and (min-width: 50rem) {
		width: 100%;
		height: 12rem;
		grid-template-columns: 4fr 1fr 2fr;
		grid-template-rows: auto auto auto 1fr;
		grid-template-areas:
			'tags dates dates'
			'title dates dates'
			'address address .'
			'heading heading .';
		gap: 0.5rem;
		color: inherit;
		text-decoration: none;
		transition: box-shadow ease 0.3s;
		padding: 0;
		align-items: flex-start;
		overflow: hidden;

		&:is(:hover, :focus-visible) { box-shadow: 0 2px 8px rgb(0 0 0 / 0.3); }

		.tags {
			padding: 1rem 0 0 1.5rem;
			align-self: start;
		}

		h3 {
			font-size: 2rem;
			white-space: nowrap;
			max-width: 100%;
			padding-inline-start: 2rem;
			padding-block: 0;
			margin-block: 0;
			align-self: start;
		}

		.dates {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: 1 / 3;
			justify-items: end;
			font-size: 1.125rem;
			font-weight: bold;
			row-gap: 0.25rem;

			:is(.startDate, .endDate) > span { display: inline; }

			:is(.isPast, .isGoing, .isLive) {
				display: inline-flex;
				flex-direction: row;
				gap: 0.5rem;
				align-items: baseline;
				padding: 0.25rem 1rem;
				grid-row: 1;
				align-self: start;
				height: fit-content;
			}

			.isGoing {
				background-color: var(--color-1);
				color: white;
			}

			p.event-state {
				grid-row: 2;
				padding: 0;
				justify-self: end;
			}
		}

		address {
			padding-inline-start: 2rem;
			padding-block: 0.5rem;
			color: black;
			font-size: 1.125rem;
			font-weight: 600;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: clip;
			overflow-clip-margin: content-box;

			.address__icon {
				display: inline;
				height: 1rem;
				margin-inline-end: 0.5rem;
			}
		}

		.heading {
			grid-area: heading;
			max-width: 100%;
			max-height: calc(2 * 0.9rem);
			padding-inline: 1rem;
			padding-block-end: 1rem;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: clip;
			overflow-clip-margin: padding-box;
			overflow-wrap: break-word;
			text-overflow: ellipsis;
			hyphens: auto;
			font-size: 0.75rem;
			font-weight: 400;
			line-height: 1rem;
			text-wrap: pretty;
		}
	}
}