.event-card {
	position: relative;
	height: 8rem;
	background-color: white;
	border: 1px solid black;
	border-radius: 0.25rem;
	padding: 1rem;
	display: grid;
	grid-template-columns: 3fr 1fr;
	grid-template-rows: repeat(3, 1fr);
	grid-template-areas:
		'tags dates'
		'title dates'
		'address state';
	align-items: center;
	gap: 0.5rem;
	color: black;
	cursor: pointer;

	dl, dd, h3 { margin: 0; }

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

	.dates {
		grid-area: dates;
		place-self: start end;
		display: grid;
		grid-template-columns: auto 1fr;
		justify-items: end;
		column-gap: 0.25rem;
		font-size: 0.75rem;
		font-weight: 700;
	}

	h3 {
		grid-area: title;
		text-transform: uppercase;
		letter-spacing: 0.001em;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	address {
		grid-area: address;
		font-size: 0.75rem;
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.event-state {
		grid-area: state;
		place-self: end;
	}

	&[data-state="past"] { .dates { color: dimgray; } }

	h3 a {
		outline: none;

		&::after {
			content: "";
			position: absolute;
			inset: 0;
		}

		&:focus, &:focus-visible { color: var(--color-1-desaturated); }
	}

	&:focus-within {
		box-shadow: 0 0 0 3px var(--color-1-desaturated);
		border: 1px solid var(--color-1);
	}
}