.menu__frame {
    padding: 1.5rem 0vw 1rem;
    text-align: center;
    position: relative;
    color: var(--color-text-frame);
		z-index: 1000;
    background-color: rgba(255, 255, 255, 0.85);
    	--color-text: #606778;
    	--color-bg: #fff;
    	--color-link: #a2aabd;
    	--color-link-hover: #E1C16E;
    font-family: 'Hatton-Light';
    -webkit-font-smoothing: never;
}

.menu__frame__title {
	font-size: 1rem;
	margin: 0 0 1rem;
}

.menu__frame__links {
	display: inline-block;
	margin: 0 0 1rem;
}

.menu__frame__links a,
.menu__frame__external a {
	margin: 0 0 0 0.3rem;
}

.menu__frame__link--current {
	color: var(--color-text);
}

.menu__frame__external::before {
	content: 'Other side of the mirror is:';
  color: var(--color-text);
}

.menu__frame__link--current:hover {
	color: var(--color-link-hover);
}

@media screen and (min-width: 53em) {
	.menu__frame {
		position: fixed;
		text-align: left;
		top: 0;
		left: 0;
		display: grid;
		align-content: space-between;
		width: 100%;
		max-width: none;
		padding: 2rem 3rem 0.5rem;
		pointer-events: none;
		grid-template-columns: 50% 50%;
		grid-template-rows: auto auto auto;
		grid-template-areas: 'title external'
							'... ...'
							'... ...';
		z-index: 1000;
	}
	.menu__frame__title-wrap {
		grid-area: title;
		display: flex;
	}
	.menu__frame__external {
		margin: 0;
		grid-area: external;
		justify-self: end;
	}
	.menu__frame__links {
		grid-area: links;
		padding: 0;
		justify-self: end;
		margin: 0 0 0 2rem;
	}
	.menu__frame a {
		pointer-events: auto;
	}
}