<commit_before>$breakpoint-grid: 1079px;
$breakpoint-mobile-larger: 640px;
$grid-block-size: 360px;

// this section doesn't work without js!
.no-js #meet-us {
	display: none;
}

.team-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
	margin-top: 10%;
}

.team-grid__item {
  list-style: none;
  display: block;
  float: left;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: $easeInOutQuad;
  @include if-wider-than($breakpoint-grid) {
  	float: none;
  	position: absolute;
	}
}

.team-grid__item--animate {
	opacity: 1;
}

// Nodes appended by JS
.team-grid__item--appended {
	display: none;
	@include if-wider-than($breakpoint-grid) {
		display: block;
	}
}

//
// Individual nodes
//
.team-grid__item--employee {
	width: 100%;
	position: relative;
	opacity: 1;

	// Alternate rows on mobile
	// need max-width here to
	// avoid affecting the desktop view
	@media (max-width: $breakpoint-grid - 1px) {
		&:nth-of-type(even) {
			.team-grid__image {
				float: right;
			}
			.team-grid__caption {
				left: 0;
			}
		}
	}

	@include if-wider-than($breakpoint-grid) {
		position: absolute;
		width: $grid-block-size;
		height: $grid-block-size;

		&:nth-of-type(1) {
			top: $grid-block-size * 0; // first row
			left: $grid-block-size * 0; // first col
		}

		&:nth-of-type(2) {
			top: $grid-block-size * 1; // second row
			left: $grid-block-size * 1; // second col
		}

		&:nth-of-type(3) {
			top: $grid-block-size * 2; // third row
			left: $grid-block-size * 0; // first col
		}
	}

}

//
// Image
//
.team-grid__image {
  display: inline-block;
  transition: transform 250ms $easeOutQuad;
  vertical-align: top;
  width: 50%;
  @include if-wider-than($breakpoint-grid) {
  	width: 100%;
  }
}

//
// Text
//
.team-grid__caption {
	display: inline-block;
	width: 50%;

	// vertical centering
	display: flex;
	justify-content: center;
	align-items: center;

	// we need absolute here as well
	// to ensure it spans to 100% height
	position: absolute;
	left: 50%;
	top: 0;
	height: 100%;

	@include if-wider-than($breakpoint-grid) {
			position: absolute;
			left: $grid-block-size;
			top: 0;
			width: $grid-block-size;
			height: $grid-block-size;
	}
}

// cetering fallback
.no-flexbox .team-grid__caption {
	margin: 15%;
}

.flexbox .team-grid__caption__inner {
	// different widths could cause the flexbox
	// to miss-align the columns
	min-width: 130px;
}

.team-grid__text-points {
	list-style: none;
	margin-left: 0;
	margin-bottom: 0;
}

.team-grid__title {
	font-size: 1.6rem;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 1rem;
	margin-left: 0;
	@include if-wider-than($breakpoint-mobile-larger) {
		font-size: 2rem;
	}
}

.team-grid__text-points__item {
	font-size: 1.3rem;
	line-height: 1.1;
	@include if-wider-than($breakpoint-mobile-larger) {
		font-size: 1.5rem;
		line-height: 1.2;
	}
}

//
// Animations (for employees)
//
.js.no-touch {

	.team-grid__item--employee,
	.team-grid__text-points__item,
	.team-grid__title {
		opacity: 0;
		transition-property: opacity, transform;
		transition-duration: 250ms;
		transition-timing-function: $easeOutQuad;
	}

	.team-grid__title,
	.team-grid__text-points__item {
		opacity: 0;
		transform: translateX(-10%);
	}

	.team-grid__title {
		transition-duration: 380ms; // a little longer for a "punchline" :)
	}

	.grid-show {

		.team-grid__item--employee {
			opacity: 1;
		}

		.is-fully-visible {

			.team-grid__title,
			.team-grid__text-points__item {
				opacity: 1;
				transform: translateX(0%);
			}

			.team-grid__text-points__item {
				@for $i from 1 through 3 {
					&:nth-of-type(#{$i}) {
						transition-delay: $i * 100ms;
					}
				}
			}

		}

	}
}<commit_msg>grid: adding Z for performance<commit_after>$breakpoint-grid: 1079px;
$breakpoint-mobile-larger: 640px;
$grid-block-size: 360px;

// this section doesn't work without js!
.no-js #meet-us {
	display: none;
}

.team-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
	margin-top: 10%;
}

.team-grid__item {
  list-style: none;
  display: block;
  float: left;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: $easeInOutQuad;
  transform: translateZ(0);
  @include if-wider-than($breakpoint-grid) {
  	float: none;
  	position: absolute;
	}
}

.team-grid__item--animate {
	opacity: 1;
}

// Nodes appended by JS
.team-grid__item--appended {
	display: none;
	@include if-wider-than($breakpoint-grid) {
		display: block;
	}
}

//
// Individual nodes
//
.team-grid__item--employee {
	width: 100%;
	position: relative;
	opacity: 1;

	// Alternate rows on mobile
	// need max-width here to
	// avoid affecting the desktop view
	@media (max-width: $breakpoint-grid - 1px) {
		&:nth-of-type(even) {
			.team-grid__image {
				float: right;
			}
			.team-grid__caption {
				left: 0;
			}
		}
	}

	@include if-wider-than($breakpoint-grid) {
		position: absolute;
		width: $grid-block-size;
		height: $grid-block-size;

		&:nth-of-type(1) {
			top: $grid-block-size * 0; // first row
			left: $grid-block-size * 0; // first col
		}

		&:nth-of-type(2) {
			top: $grid-block-size * 1; // second row
			left: $grid-block-size * 1; // second col
		}

		&:nth-of-type(3) {
			top: $grid-block-size * 2; // third row
			left: $grid-block-size * 0; // first col
		}
	}

}

//
// Image
//
.team-grid__image {
  display: inline-block;
  transition: transform 250ms $easeOutQuad;
  vertical-align: top;
  width: 50%;
  @include if-wider-than($breakpoint-grid) {
  	width: 100%;
  }
}

//
// Text
//
.team-grid__caption {
	display: inline-block;
	width: 50%;

	// vertical centering
	display: flex;
	justify-content: center;
	align-items: center;

	// we need absolute here as well
	// to ensure it spans to 100% height
	position: absolute;
	left: 50%;
	top: 0;
	height: 100%;

	@include if-wider-than($breakpoint-grid) {
			position: absolute;
			left: $grid-block-size;
			top: 0;
			width: $grid-block-size;
			height: $grid-block-size;
	}
}

// cetering fallback
.no-flexbox .team-grid__caption {
	margin: 15%;
}

.flexbox .team-grid__caption__inner {
	// different widths could cause the flexbox
	// to miss-align the columns
	min-width: 130px;
}

.team-grid__text-points {
	list-style: none;
	margin-left: 0;
	margin-bottom: 0;
}

.team-grid__title {
	font-size: 1.6rem;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 1rem;
	margin-left: 0;
	@include if-wider-than($breakpoint-mobile-larger) {
		font-size: 2rem;
	}
}

.team-grid__text-points__item {
	font-size: 1.3rem;
	line-height: 1.1;
	@include if-wider-than($breakpoint-mobile-larger) {
		font-size: 1.5rem;
		line-height: 1.2;
	}
}

//
// Animations (for employees)
//
.js.no-touch {

	.team-grid__item--employee,
	.team-grid__text-points__item,
	.team-grid__title {
		opacity: 0;
		transition-property: opacity, transform;
		transition-duration: 250ms;
		transition-timing-function: $easeOutQuad;
	}

	.team-grid__title,
	.team-grid__text-points__item {
		opacity: 0;
		transform: translateX(-10%);
	}

	.team-grid__title {
		transition-duration: 380ms; // a little longer for a "punchline" :)
	}

	.grid-show {

		.team-grid__item--employee {
			opacity: 1;
		}

		.is-fully-visible {

			.team-grid__title,
			.team-grid__text-points__item {
				opacity: 1;
				transform: translateX(0%);
			}

			.team-grid__text-points__item {
				@for $i from 1 through 3 {
					&:nth-of-type(#{$i}) {
						transition-delay: $i * 100ms;
					}
				}
			}

		}

	}
}
{'fraction_non_alphanumeric': 0.15829911246522718, 'fraction_numerical': 0.025036428666048483, 'mean_word_length': 2.946680606377418, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2106140', 'n_tokens_mistral': 3389, 'n_tokens_neox': 2963, 'n_words': 620}