.kss_macbook_mockup_for_case_study {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
}

.kss-macbook {
	width: min(1100px, 100%);
}

.kss-macbook__display {
	position: relative;
	background: #1f1f21;
	border-radius: 20px 20px 14px 14px;
	padding: 2.2% 2.2% 2.6%;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

.kss-macbook__camera {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #5d5f67 0%, #121216 72%);
	z-index: 2;
}

.kss-macbook__screen {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	overflow: hidden;
	background: #0b0b0d;
}

.kss-macbook__screen-content {
	--kss-scroll-duration: 14s;
	--kss-screen-position: center top;
	width: 100%;
	height: 100%;
	background-image: var(--kss-screen-image);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: var(--kss-screen-position);
}

.kss-macbook.is-autoscroll .kss-macbook__screen-content {
	animation: kss-macbook-page-scroll var(--kss-scroll-duration) ease-in-out infinite alternate;
}

.kss-macbook__placeholder {
	height: 100%;
	display: grid;
	place-items: center;
	padding: 20px;
	text-align: center;
	color: #d1d1d6;
	font-size: 14px;
	background: linear-gradient(145deg, #141416 0%, #0e0e11 100%);
}

.kss-macbook__base {
	width: 112%;
	margin-left: -6%;
	height: clamp(14px, 2.6vw, 28px);
	border-radius: 0 0 28px 28px;
	background: linear-gradient(180deg, #d4d8df 0%, #aeb5bf 44%, #949da9 100%);
	box-shadow: 0 14px 26px rgba(0, 0, 0, 0.26);
	position: relative;
}

.kss-macbook__base::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: clamp(86px, 14vw, 180px);
	height: 36%;
	border-radius: 0 0 12px 12px;
	background: linear-gradient(180deg, #8f98a5 0%, #b6bdc6 100%);
}

@keyframes kss-macbook-page-scroll {
	from {
		background-position: center top;
	}
	to {
		background-position: center bottom;
	}
}