.sidekick {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 75vh;

	> div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: cover;

		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			filter: contrast(0.75);
		}
	}

	&.mod-horizontal-align-left {
		align-items: flex-start;
		text-align: left;

		&.mod-theme-dark > div:before {
			background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 35%, rgba(0, 0, 0, 0));
		}
	}

	&.mod-horizontal-align-center {
		align-items: center;
		text-align: center;

		&.mod-theme-dark > div:before {
			background: rgba(0, 0, 0, 0.75);
		}
	}

	&.mod-horizontal-align-right {
		align-items: flex-start;
		text-align: left;

		@media (min-width: 768px) {
			align-items: flex-end;
			text-align: right;
		}

		&.mod-theme-dark > div:before {
			background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 35%, rgba(0, 0, 0, 0));

			@media (min-width: 768px) {
				background: linear-gradient(to left, rgba(0, 0, 0, 0.85) 35%, rgba(0, 0, 0, 0));
			}
		}
	}

	&.mod-vertical-align-top {
		justify-content: flex-start;
	}

	&.mod-vertical-align-center {
		justify-content: center;
	}

	&.mod-vertical-align-bottom {
		justify-content: flex-end;
	}

	&.mod-display-type-contain > div {
		@media (min-width: 768px) {
			top: var(--s-md);
			left: var(--s-md);
			width: calc(100% - var(--s-md) * 2);
			height: calc(100% - var(--s-md) * 2);
		}
	}

	> header {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--s-sm);
		width: 100%;

		> img {
			width: 50%;
			max-width: calc(var(--w) * 1.75);
		}

		> div {
			text-wrap: balance;
		}
	}

	&.mod-size-md > header {
		max-width: var(--w-lg);
	}

	&.mod-size-lg > header {
		max-width: var(--w-xl);

		@media (min-width: 768px) {
			gap: var(--s-md);
		}
	}

	&.mod-theme-light > header {
		> h2 {
			color: var(--c-black);
			text-shadow: 0 0 var(--s) var(--c-blue-lt);
		}

		> div {
			color: var(--c-black);
			text-shadow: 0 0 var(--s) var(--c-blue-lt);
		}
	}

	&.mod-theme-dark > header {
		> h2 {
			color: var(--c-white);
			text-shadow: 0 0 var(--s) var(--c-black);
		}

		> div {
			color: var(--c-white);
			text-shadow: 0 0 var(--s) var(--c-black);
		}
	}

	&.mod-horizontal-align-center > header {
		> img {
			margin: 0 auto;
		}
	}
}