/* METHODOLOGY */
.methodology-grid {
	display:flex;
	justify-content:center;
	align-items:flex-start;
	align-content:flex-start;
	gap:0 0;
	flex-wrap:wrap;

	max-width:1280px;
	margin:24px auto;
	padding:0 16px;
}

.methodology-block {
	flex-shrink:0;

	text-align:left;

	max-width:520px;
	margin:24px auto 96px auto;
	border:8px solid light-dark(var(--light-main-text), var(--dark-main-text));;
	background:light-dark(var(--light-main-bg), var(--dark-main-bg));;
}
.methodology-block .title {
	color:light-dark(var(--light-main-bg), var(--dark-main-bg));;
	font-family:"Boldonse", monospace;
	letter-spacing:1px;

	padding:0 24px 8px 24px;
	background:light-dark(var(--light-main-text), var(--dark-main-text));;
}

.methodology-block .content {
	padding:0 24px;
}

.methodology-block img {
	user-drag:none;
	-ms-user-drag: none;
	-moz-user-drag: none;
	-webkit-user-drag: none;
}

.methodology-block.methodology-discovery img {
	width:100%;
	height:auto;
	transform-origin:bottom;
	transform:scale(1) translate(32px, 6px);
}
.methodology-block .screenshot-container {
	margin-top:16px;
	transform-origin:top;
	transform:scale(1.1)
}

@media(max-width: 768px) {
	.methodology-block {
		flex-shrink:1;
	}
	.methodology-block.methodology-discovery img {
		transform:none;
		margin-bottom:-13px;
	}
	.methodology-block .screenshot-container {
		transform:none;
		width:100%;
		margin-left:-8px;
		margin-bottom:-16px;
	}
	.methodology-block .screenshot-container img {
		width:100%;
		height:auto;
	}
	.methodology-block.methodology-usertesting img {
		width:100%;
		height:auto;
	}
}