h2 {
	text-align: center;
}

.listing {
	display: grid;
	grid-template-areas:
		"title title"
		"location date";
	margin-block: 1rem;

	h3 {
		margin-block-end: 0;
		grid-area: title;
	}

	p {
		margin-block: 0;

		&.location {
			grid-area: location;

			span {
				font-weight: bold;
			}
		}

		&.date {
			grid-area: date;
			justify-self: end;
		}
	}
}

@media (max-width: 650px) {
	.listing {
		grid-template-areas:
			"title"
			"location"
			"date";
	}
}