.mobile-only {
	display: none !important;
}

.desktop-only {
	display: inherit !important;
}

@media screen and (max-width: 767px) {
	.mobile-only {
		display: inherit !important;
	}

	.desktop-only {
		display: none !important;
	}

	header {
		padding: 1rem 1.5rem;
		justify-content: space-between;
	}

	/* Implement alternate search element */
	header search form {
		margin: 5rem auto;
		width: 90%;
		height: max-content;
		z-index: 0;
		flex-direction: column;
	}

	header search.search-hidden {
		visibility: hidden;
		opacity: 0;
	}

	header search form input,
	header search form button {
		width: 100% !important;
		padding: 1.25rem 1.5rem;
	}

	header search button {
		display: flex;
		gap: 0.5rem;
	}

	header search #location {
		border-top: 2px solid var(--muted-border-color);
		border-left: none;
	}

	header search .location-dropdown {
		width: calc(90% - 2px);
	}

	main {
		width: auto;
		padding: 1rem;
	}

	main.event-display {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}

	main .event-grid {
		justify-content: center;
	}

	.event-location-display {
		padding: 0 1rem;
	}

	.event-location-display .location-display {
		width: 100%;
	}

	.event-location-display input,
	.event-location-display select {
		font-weight: 500;
		width: 100%;
	}

	.index-display hr {
		margin: 2rem 0;
	}

	.section-display {
		margin: 0;
	}

	.section-display .event-scroll {
		margin-bottom: 1rem;
	}

	.event-item {
		width: 100%;
	}

	.event-display section.event-details {
		width: 100%;
	}

	.event-description-content.collapsed {
		max-height: 10rem;
		mask-image: linear-gradient(black, transparent);
		-webkit-mask-image: linear-gradient(black, transparent);
	}

	.event-details .event-thumbnail-container {
		height: 12rem;
		transition: var(--transition-delay);
	}

	.event-details .event-thumbnail-container.expanded {
		height: 26rem;
		max-height: 26rem;
	}

	.event-details .event-thumbnail-container .expand-button {
		display: flex !important;
		background-color: rgba(197, 47, 33, 0.8);
		border: 2px solid rgba(197, 47, 33, 0.8);
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
		padding: 0.75rem;
		cursor: pointer;
		z-index: 3;
	}

	.event-details .event-thumbnail-container .expand-button img {
		width: 1.25rem;
		height: 1.25rem;
	}

	.event-occurrence {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.event-occurrence .column {
		padding: 0 0.5rem;
	}

	.event-occurrence .date-display:not(.event-occurrences .date-display) {
		font-size: 1rem;
	}

	.event-organiser-small {
		padding: 0.5rem;
	}

	.modal-overlay .modal {
		margin: 0 auto;
		padding: 2rem 1rem;
	}

	.ticket-list {
		max-height: 400px;
	}
}