.board-members-grid {

	.board-member {
		display: grid;
		/* grid-template-rows: subgrid;
		grid-row: span 3; */
		align-content: start;
		gap: 1rem;
	}
}

.board-member {
	.board-member-name {
		font-size: var(--fs-minor-heading);
		font-weight: var(--fw-medium);
	}
	.board-member-title {
		font-size: var(--fs-minor-heading);
		font-weight: var(--fw-regular);
	}
	.board-member-description {
		font-size: var(--fs-body-long-form);
		line-height: 1.4;
	}
	.board-member-image {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		aspect-ratio: 3 / 4;
		&:before {
			content: '';
			display: block;
			position: absolute;
			z-index: -1;
			inset: 0;
			background-color: var(--background-color);
			transform-origin: top left;
			transform: skewY(10deg) translate(0, 15%);
		}
		img {
			transition: all .3s ease;
			transform-origin: center;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}
	/* &:hover {
		img {
			transform: scale(1.05);
		}
	} */
}


/* Fill 1 */
.board-members-grid > div[data-row-even="true"][data-col-even="true"],
.board-members-grid > div[data-row-odd="true"][data-col-odd="true"] {
	--background-color: var(--color-brand-primary--500);
}


/* Fill 2 */
.board-members-grid > div[data-row-even="true"][data-col-odd="true"],
.board-members-grid > div[data-row-odd="true"][data-col-even="true"] {
	--background-color: color-mix(in hsl, #A7A9AC, white 60%);
}