.header {
	display: flex;
	flex-wrap: wrap;
	background-color: var(--c-black);

	@media (min-width: 1024px) {
		justify-content: space-between;
	}

	.header__bikepacking {
		@media (min-width: 1024px) {
			width: 33%;
		}

		> img {
			display: block;
			width: 80px;
			max-width: 100%;
		}
	}

	.header__basecamp {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex: 1;
		padding-right: var(--s-xs);
		background-color: var(--c-red-lt);

		@media (min-width: 768px) {
			justify-content: flex-start;
			padding-right: 0;
			padding-left: var(--s-sm);
			background-color: var(--c-black);
		}
		@media (min-width: 1024px) {
			justify-content: center;
			width: 33%;
			padding-left: 0;
		}

		> svg {
			display: block;
			width: 250px;
			max-width: 100%;
			height: inherit;
			
			#text path {
				fill: var(--c-black);

				@media (min-width: 768px) {
					fill: var(--c-red-lt);
				}
			}
		}
	}

	.header__actions {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: var(--s-xs);

		@media (min-width: 768px) {
			justify-content: flex-end;
			width: 30%;
		}
		@media (min-width: 1024px) {
			width: 33%;
			padding-left: 0;
		}

		.header__actions__icons {
			display: flex;
			align-items: center;

			@media (min-width: 768px) {
				margin-right: var(--s-xs);
			}
			@media (min-width: 1024px) {
				margin-right: var(--s-sm);
			}

			> a {
				position: relative;
				display: block;
				margin: 0 8px;

				&:first-of-type {
					margin-left: 0;
				}

				> img {
					display: block;
					max-width: 100%;
				}

				> span {
					position: absolute;
					top: -5px;
					right: -5px;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 18px;
					height: 18px;
					border-radius: 50%;
					font-size: 11px;
					color: var(--c-black);
					background-color: var(--c-blue-lt);
				}
			}
		}

		.header__actions__login {
			display: flex;
			justify-content: center;
			align-items: center;
			text-decoration: none;
			font-family: var(--f-condensed);

			@media (min-width: 768px) {
				margin-right: var(--s-xs);
			}

			> span {
				padding-right: var(--s-xs);
				text-transform: uppercase;
				color: var(--c-red-lt);
			}

			> img {
				max-width: 40px;
				clip-path: polygon(50% 0, 100% 20%, 100% 80%, 50% 100%, 0 80%, 0 20%);
			}
		}

		> img {
			display: block;
		}
	}
}