.event-card {
	height: 10rem;
	background-color: white;
	border-top: 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;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;

		a::before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			cursor: pointer;
		}
	}

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

		span {
			text-transform: capitalize;

			> b { padding-right: 0.5rem; }
		}
	}

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

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

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

		.isEnded, .isGoing {
			display: grid;
			gap: 0.5rem;
			align-items: center;
		}

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

		.isGoing { color: black; }

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

	.state, & .date__icon, & .address__icon, & .properties, & .heading { display: none; }

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

		&:hover, &:focus { box-shadow: black 0 2px 8px; }

		.tags { padding: 1.5rem 0 0 1.5rem; }

		h3 {
			font-size: 2rem;
			white-space: nowrap;
			max-width: 100%;
			padding-left: 2rem;
			place-self: center start;
		}

		.dates {
			width: max-content;
			place-self: start end;
			flex-direction: row-reverse;
			text-align: right;
			font-size: 1.125rem;
			font-weight: bold;

			.startDate > span, & .endDate > span { display: inline; }

			.isEnded, & .isGoing, & .isLive {
				display: inline-flex;
				flex-direction: row;
				gap: 0.5rem;
				align-items: baseline;
				padding: 0.25rem 1rem;
			}

			.state {
				justify-self: end;
				display: block;
			}

			svg { height: 1rem; }

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

		address {
			padding-left: 2rem;
			color: black;
			font-size: 1.125rem;
			font-weight: 600;

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

		.heading {
			grid-area: heading;
			max-width: 100%;
			max-height: calc(2 * 0.9rem);
			padding: 0 1rem;
			place-self: center start;
			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;
		}

		.properties {
			grid-area: properties;
			place-self: end;
			display: grid;
			padding: 0 1.5rem 1.5rem 0;
			text-align: right;
			font-weight: bold;
		}
	}
}