.imtw-section,
.imtw-section * {
	box-sizing: border-box;
}

.imtw-section {
	overflow: hidden;
}

.imtw-inner {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	width: 100%;
}

.imtw-layout-media_right .imtw-inner {
	flex-direction: row-reverse;
}

.imtw-media-col,
.imtw-content-col {
	align-items: center;
	display: flex;
	flex: 1 1 0;
	justify-content: center;
	min-width: 0;
}

.imtw-content {
	width: 100%;
}

.imtw-title {
	font-size: clamp(34px, 4vw, 64px);
	font-weight: 800;
	line-height: 1.05;
	margin: 0 0 32px;
}

.imtw-text {
	font-size: 18px;
	line-height: 1.45;
	margin: 0 auto;
}

.imtw-text p {
	margin: 0 0 1em;
}

.imtw-text p:last-child {
	margin-bottom: 0;
}

.imtw-button {
	display: inline-flex;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	margin-top: 46px;
	text-decoration: none;
	transition: background-color 180ms ease, transform 180ms ease;
}

.imtw-button:hover,
.imtw-button:focus {
	color: #ffffff;
	transform: translateY(-1px);
}

.imtw-ipad-stage {
	max-width: 100%;
	min-width: 260px;
	position: relative;
}

.imtw-device {
	filter: drop-shadow(0 30px 22px rgba(0, 0, 0, 0.16));
	position: relative;
	transform-origin: center bottom;
	width: 100%;
}

.imtw-ipad-frame {
	aspect-ratio: 1.62 / 1;
	border-radius: 34px;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.06), inset 0 0 0 13px rgba(0, 0, 0, 0.35);
	margin: 0 auto;
	padding: 28px;
	position: relative;
	transform: perspective(1100px) rotateX(4deg) rotateZ(-2deg);
	width: 91%;
	z-index: 4;
}

.imtw-camera {
	background: #060606;
	border: 2px solid #242424;
	border-radius: 50%;
	height: 11px;
	left: 13px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 11px;
	z-index: 6;
}

.imtw-screen {
	background: #f2f6f7;
	border-radius: 12px;
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.imtw-screen-media {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.imtw-hinge {
	background: linear-gradient(90deg, #171717, #2a2a2a 30%, #101010 70%, #252525);
	border-radius: 999px;
	height: 18px;
	margin: -8px auto 0;
	position: relative;
	width: 76%;
	z-index: 3;
}

.imtw-keyboard {
	background: linear-gradient(180deg, #242424 0%, #171717 78%, #111111 100%);
	border-radius: 10px 10px 34px 34px;
	height: 112px;
	margin: -2px auto 0;
	overflow: hidden;
	padding: 18px 46px 20px;
	position: relative;
	transform: perspective(800px) rotateX(56deg);
	transform-origin: top center;
	width: 100%;
	z-index: 2;
}

.imtw-keys {
	display: grid;
	gap: 7px;
	grid-template-columns: repeat(16, minmax(7px, 1fr));
	margin: 0 auto;
	max-width: 80%;
}

.imtw-keys span {
	background: linear-gradient(180deg, #333333, #171717);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 3px;
	height: 8px;
}

.imtw-trackpad {
	background: #1f1f1f;
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 6px;
	bottom: 16px;
	height: 24px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 22%;
}

.imtw-shadow {
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0) 72%);
	bottom: -10px;
	height: 42px;
	left: 5%;
	position: absolute;
	width: 90%;
	z-index: 1;
}

@media (max-width: 1024px) {
	.imtw-inner,
	.imtw-layout-media_right .imtw-inner {
		flex-direction: column;
	}

	.imtw-media-col,
	.imtw-content-col {
		flex-basis: auto;
		width: 100%;
	}

	.imtw-content {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 640px) {
	.imtw-title {
		font-size: 34px;
	}

	.imtw-ipad-frame {
		border-radius: 22px;
		padding: 18px;
	}

	.imtw-keyboard {
		height: 82px;
		padding: 14px 28px 16px;
	}

	.imtw-keys {
		gap: 4px;
		max-width: 86%;
	}

	.imtw-keys span {
		height: 6px;
	}
}