.header {
	$this: &;
	display: flex;
	justify-content: space-between;
	align-items: center;

	margin: 0 auto;
	padding: var(--global-gutters-default);

	width: 100%;
	max-width: var(--global-containers-default);
	min-height: var(--header-scoped-height, 5rem);

	background: var(--header-scoped-background, var(--global-colors-white));

	position: relative;
	z-index: var(--global-z-index-header);

	&--fixed {
		position: fixed;
		top: 0;
	}

	&--sticky {
		position: sticky;
		top: 0;
	}

	&__column {
		display: flex;
		flex: 1 0 0.05rem;

		&--left {
			justify-content: left;
		}

		&--center {
			text-align: center;
			justify-content: center;
		}

		&--right {
			text-align: right;
			justify-content: flex-end;
		}
	}

	&__logo {
		display: flex;
		align-items: center;
		justify-content: center;

		height: 100%;
		width: 100%;
		max-width: 12.5rem;

		@include media(desktop up) {
			justify-content: flex-start;
		}
	}

	&__menu {
		display: none;
		height: 100%;

		@include media(desktop up) {
			display: flex;
			justify-content: flex-end;
		}
	}
}