.standout-employees {
	& .acf-innerblocks-container {
		& > h2 {
			margin-bottom: 0;
		}

		& > p:not(.is-style-align-wide):not(.is-style-align-full) {
			max-width: 780px;
		}
	}

	& .employee-filter-container {
		display: flex;
		align-items: center;
		gap: 10px;
		background: var(--block-background-color);
		position: sticky;
		top: 0;
		z-index: 5;
		transition: transform 0.3s ease;
		margin-block: var(--gap-m);
		margin-inline: calc(-1 * var(--content-margin));
		padding: calc(var(--gap-s) / 2) var(--content-margin);
		padding-block: var(--gap-m);
        overflow: auto;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}

		& .employee-filter {
			padding: .6em .8em;
			line-height: 1;
			border: 1px solid var(--color-text);
			text-decoration: none;
			transition: var(--transition);
			transition-duration: calc(0.5 * var(--transition-duration));
			transition-property: color, background-color;
			cursor: pointer;
			white-space: nowrap;

			@media (hover: hover) {
				&:hover {
					color: var(--color-bg);
					background-color: var(--color-text);
				}
			}

			&.active {
				color: var(--color-bg);
				background-color: var(--color-text);
			}
		}
	}

	& .employee-list-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(1.5 * var(--gap-s));

		& .employee-item {
			line-height: 0;
			aspect-ratio: 90 / 120;
			transition-property: opacity, transform, outline;
			transition-duration: calc(var(--transition-duration, 0.3s) / 3);
			transition-timing-function: ease-in-out;
    		opacity: 1;

			:has(.persistent-highlight) & {
				opacity: .75;
			}

			&.hidden {
				opacity: 0;
				display: none;
			}

			&:hover {
				transform: scale(1.03);
				opacity: 1;
			}

			&.persistent-highlight {
				transform: scale(1.1);
				opacity: 1;
			}

			& img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: left 0 top -1.5em;
			}
		}
	}

	& .employee-item {
		background-color: #000;
		color: var(--color-text-white);

		& span {
			display: block;
			transition: var(--transition);
			transition-duration: 300ms;
			transition-property: opacity;
		}
	}

	& .employee-item-placeholder {
		background-color: var(--color-dark);

		& .employee-item-placeholder-title {
			font-size: 100px;
		}

		& .employee-item-placeholder-count {
			font-size: 22px;
			text-align: right;
		}
	}

	& .employee-highlight-container {
		position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
		width: calc(100% - var(--content-margin));
		z-index: 10;
		transform: translateX(calc(100% + var(--content-margin) * 2));
		/* transform: translateY(100%); */
		transition: transform 300ms ease;

		&.show-employee-highlight-container {
			transform: translateX(0);
			/* transform: translateY(0); */
		}

		& .employee-item {
			position: absolute;
            top: 0;
            left: 0;
            width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding: var(--content-margin);
			line-height: 1.15;
			transition: var(--transition);
			transition-duration: 300ms;
			transition-property: opacity;
			z-index: 3;

			&.active {
				z-index: 9;
			}

			&:not(.active):not(.employee-item-placeholder) {
				opacity: 0;
				pointer-events: none;
			}

			& .employee-photo {
				inset: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
				position: absolute;
				object-fit: contain;
				object-position: top center;
				object-fit: cover;
			}

			& .employee-item-close {
				position: absolute;
				top: calc(var(--header-height) - (1.5 * var(--gap-s)));
				left: 0;
				padding: 1em;
				z-index: 5;

				:is(body:has(#masthead.scroll-down)) & {
					top: 0;
				}
			}
		}

		& .employee-item-placeholder {
			justify-content: space-between;
			z-index: 1;
		}

		&:has(.employee-item.active) .employee-item-placeholder span {
			opacity: 0;
		}

		& .employee-item-overlay {
			text-align: end;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 50%;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.8) 100%);
				pointer-events: none;
				z-index: -1;
			}

			& .employee-name {
				font-size: 30px;
			}

			& .employee-title {
				margin: .1em 0 .5em;
			}

			& a {
				text-decoration: none;
			}
		}
	}
}