@media screen and (max-width: 1024px) {
	#id-nav-items {
		overflow-y: scroll;
	}

	.c-mmd-popup-overlay > .c-mmd-popup-container {
		min-width: 100%;
		border-radius: 0;
	}

	.c-mmd-popup-header button {
		margin-inline: auto;
	}
}

@media screen and (max-width: 768px) {
	#id-menu {
		width: calc(30px + 1.5rem);
	}
	nav #id-nav-logo-container a { pointer-events: none; }
	nav #id-nav-logo-container > h1, 
	nav #id-nav-logo-container > #id-toggle-menu { display: none; }

	.c-mmd-main-head { padding-inline: 1rem; }
	.c-mmd-main-head h2 { font-size: 1.25rem; }
	.c-mmd-main-head p {
		display: none;
	}

	#id-side-panel {
		position: absolute;
		right: 0;
		z-index: 2;
		border: none;
	}
	.c-mmd-side-panel[data-open="true"] {
		width: 40%;
	}
	#id-side-panel > div {
		width: 40vw;
	}

	.c-mmd-main-head .c-mmd-hamburger-menu {
		display: inline-block;
	}
	.c-mmd-main-head .c-mmd-header-actions {
		display: none;
		position: absolute;
		top: 60px;
		right: 0;
		width: calc(100% - 30px - 1.5rem); /* subtract the menu width */
		padding: 1rem;
		background-color: white;
		border-bottom: 1px solid #E8EAED;
		box-shadow: 0 6px 8px rgba(0, 0, 0, .1);
		box-sizing: border-box;
	}
}

@media screen and (max-width: 600px) {
	.c-mmd-side-panel[data-open="true"] {
		width: 55%;
	}
	#id-side-panel > div {
		width: 55vw;
	}
}

@media screen and (max-width: 450px) {
	.c-mmd-side-panel[data-open="true"] {
		width: 70%;
	}
	#id-side-panel > div {
		width: 70vw;
	}
}