/***** Mobile Menu (burger) ************/
:root {
    --burger-width: 2.5rem;
    --line-ht: 0.25rem;
    --space: 0.25rem;
	--background-width: 2.5rem;
	--background-height: 1.25rem;
}

.burger-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

	/* background-color: hsl(0, 0%, 100%); */
	/* width: var(--background-width);
	height: var(--background-height); */

	transition: all var(--trans-duration) linear;
}

#nav-burger {
    position: relative;
    display: grid;
	grid-template-columns: var(--burger-width);
	gap: var(--space);
    border: none;
	background-color: transparent;
    cursor: pointer;
	z-index: 999999;
    transition: all 0.1s ease-in-out;

	span {
		display: block;
		width: var(--burger-width);
		height: var(--line-ht);
		background-color: hsl(0, 0%, 0%);
		border-radius: 0.2em;
		opacity: 1;
		transform: rotate(0deg);
		transition: .25s ease-in-out;
	}

	&:hover,
	&:focus {
		span {
			background-color: var(--background-button);
		}
	}
}

.showMobileMenu #nav-burger span:nth-child(1) {
    transform: rotate(44deg);
	transform-origin: 10% 50%;
	width: calc(var(--burger-width) * 0.82);
}

.showMobileMenu #nav-burger span:nth-child(3) {
    transform: rotate(-44deg);
	transform-origin: 20% 60%;
	width: calc(var(--burger-width) * 0.82);
}

.showMobileMenu #nav-burger span:nth-child(2) {
    opacity: 0;
}

/* .showMobileMenu #nav-burger:before {
	content: 'close'
} */

@media (width >= 46.875rem) { /* 750px */
	:root {
	    --burger-width: 3.75rem;
		--line-ht: 0.375rem;
		--space: 0.375rem;
		--background-width: 3.75rem;
		--background-height: 1.875rem;
	}
	/* #nav-burger {
		grid-template-columns: var(--burger-width) auto;
		grid-template-areas:
			'span text'
			'span text'
			'span text';
	}

	#nav-burger span {
		grid-area: span;
	}

	#nav-burger::after {
		content: 'MENU';
		font-family: var(--ff-primary);
		font-weight: 400;
		font-size: 2rem;
		color: hsl(0, 0%, 100%);
		grid-area: text;
		margin-left: var(--space);
	} */
}
/***** end Mobile Menu (burger) ********/
