button {
	background-color: hsla(0, 0%, 0%, 0);
	border: 1px solid hsl(0, 0%, 60%);
	border-radius: 0.5rem;
	padding: 0.5em 0.75em;
	transition: background-color 0.2s ease;
}

button:hover {
	background-color: hsla(0, 0%, 100%, 0.12);
	cursor: pointer;
}

button:active {
	background-color: hsla(0, 0%, 100%, 0.06);
	transition: none;
}

.tour-block {
	max-width: 1200px;
	margin-inline: auto;
}

.tour-block > * {
	border-bottom: 1px solid hsl(0, 0%, 60%);
}

.tour-block > *:last-child {
	border-bottom: none;
}

.show-slide {
	display: grid;
	align-items: center;
	grid-template-areas: "time venue buttons";
	grid-template-columns: 10ch 1fr auto;
	gap: 1.5rem;
	padding: 1rem 1.5rem;
}

.venue {
	grid-area: venue;
}

.venue h2 {
	font: var(--h2);
}

.date-time {
	grid-area: time;
	text-align: center;
}

.location {
	display: none;
	grid-area: location;
	text-align: center;
}

.date-time .date, .location .city {
	font: var(--h3);
}

.date-time .time, .location .address {
	font: var(--p);
}

.show-buttons {
	grid-area: buttons;
	display: grid;
	grid-template-areas: "maps bandsintown" "calendar calendar";
	justify-items: center;
	gap: 0.5rem;
}

.show-buttons .maps {
	grid-area: maps;
}

.show-buttons .bandsintown {
	grid-area: bandsintown;
}

.show-buttons .calendar {
	grid-area: calendar;
}

@media only screen and (min-width: 961px) {
	.date-time .date {
		font: var(--h2);
	}

	.date-time .time {
		font: var(--h3);
		font-weight: 400;
	}
}

@media only screen and (max-width: 960px) {
	.show-buttons {
		grid-template-areas: "maps" "bandsintown" "calendar";
	}
}

@media only screen and (max-width: 768px) {
	.show-slide {
		display: grid;
		grid-template-areas:
			"venue venue"
			"time location"
			"buttons buttons";
		grid-template-columns: auto auto;
		gap: 0.5rem;
		align-items: baseline;
	}

	.venue {
		text-align: center;
	}

	.venue p {
		display: none;
	}

	.location {
		display: block;
	}

	.show-buttons {
		margin-top: 1rem;
	}

	.show-buttons button {
		font: var(--p2);
	}
}