/* Visual mosaic hero pattern
---------------------------------------------------------------------------- */

.cn-visual-hero {
	background: var(--cn-bg);
	color: var(--cn-text);
	isolation: isolate;
	min-height: clamp(44rem, 70vw, 58rem);
	overflow: hidden;
	position: relative;
}

.cn-visual-hero > *,
.cn-visual-hero__intro > *,
.cn-visual-hero__gallery > * {
	margin-inline: 0 !important;
	max-width: none !important;
}

.cn-visual-hero__intro {
	align-items: start !important;
	margin-block: 0;
	position: relative;
	z-index: 2;
}

.cn-visual-hero__title-column,
.cn-visual-hero__copy-column {
	margin: 0 !important;
}

.has-cn-visual-code-editor .cn-visual-hero__intro {
	align-items: start !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.78fr);
	row-gap: clamp(1.5rem, 3vw, 2.5rem);
}

.has-cn-visual-code-editor .cn-visual-hero__editor-column {
	align-self: center;
	grid-column: 2;
	grid-row: 1 / span 2;
	justify-self: center;
	margin: 0 !important;
	min-width: 0;
	width: 100%;
}

.has-cn-visual-code-editor .cn-visual-hero__title-column,
.has-cn-visual-code-editor .cn-visual-hero__copy-column {
	grid-column: 1;
}

.cn-visual-hero__eyebrow {
	color: var(--cn-accent);
	font-family: var(--cn-font-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0 0 clamp(1rem, 2vw, 1.35rem) !important;
	text-transform: uppercase;
}

.cn-visual-hero__title {
	color: var(--cn-text);
	font-size: clamp(3.1rem, 7.6vw, 7.25rem);
	font-weight: 620;
	letter-spacing: 0;
	line-height: 0.94;
	margin: 0 !important;
	max-width: 11.5ch !important;
}

.cn-visual-hero__copy-column {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	justify-items: start;
	padding-block-start: clamp(2.75rem, 7vw, 5.75rem);
}

.has-cn-visual-code-editor .cn-visual-hero__copy-column {
	padding-block-start: 0;
}

.cn-visual-hero__description {
	color: var(--cn-text-muted);
	font-size: clamp(1rem, 1.35vw, 1.16rem);
	line-height: 1.55;
	margin: 0 !important;
	max-width: 31rem !important;
}

.cn-visual-hero__buttons {
	display: none !important;
}

.cn-visual-hero__scroll {
	align-items: center;
	color: var(--cn-text-muted);
	display: grid;
	font-size: 0.75rem;
	gap: 0.45rem;
	justify-items: center;
	left: 50%;
	line-height: 1;
	position: absolute;
	text-decoration: none;
	bottom: clamp(1.25rem, 3vw, 2.5rem);
	transform: translateX(-50%);
	z-index: 4;
}

.cn-visual-hero__scroll:hover,
.cn-visual-hero__scroll:focus-visible {
	color: var(--cn-text);
}

.cn-visual-hero__scroll i {
	align-items: center;
	border: 1px solid var(--cn-border-strong);
	border-radius: 999px;
	display: flex;
	font-size: 1.4rem;
	font-style: normal;
	height: 3.1rem;
	justify-content: center;
	width: 3.1rem;
}

.cn-visual-hero__gallery {
	align-items: end;
	display: grid;
	gap: clamp(0.5rem, 1vw, 0.85rem);
	grid-template-columns: minmax(21rem, 1.55fr) repeat(4, minmax(8rem, 0.72fr));
	margin-block-start: clamp(2.75rem, 7vw, 5.25rem);
	position: relative;
	z-index: 1;
}

.cn-visual-hero__code-stack {
	--cn-code-stack-top: clamp(1.2rem, 2.2vw, 2rem);
	height: clamp(17rem, 27vw, 25rem);
	justify-self: center;
	max-width: min(100%, 38rem);
	position: relative;
	width: clamp(20rem, 34vw, 38rem);
}

.cn-visual-hero__code-stack--intro {
	height: clamp(17rem, 27vw, 25rem);
	width: clamp(20rem, 34vw, 38rem);
}

.cn-visual-hero__gallery .cn-visual-hero__code-stack {
	grid-column: -2 / -1;
}

.cn-visual-hero__code-editor {
	align-self: end;
	background: #161616;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: clamp(1rem, 1.8vw, 1.5rem);
	box-shadow: 0 1.1rem 3rem rgba(0, 0, 0, 0.16);
	color: #e5e5e5;
	display: grid;
	font-family: var(--cn-font-mono);
	grid-template-rows: auto minmax(0, 1fr);
	height: clamp(15rem, 23vw, 22rem);
	margin: 0 !important;
	min-width: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.cn-visual-hero__code-stack .cn-visual-hero__code-editor {
	animation: cn-visual-code-stack 32s cubic-bezier(0.16, 1, 0.3, 1) infinite both;
	bottom: 0;
	height: calc(100% - var(--cn-code-stack-top));
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: var(--cn-code-stack-top);
	transform-origin: top center;
	will-change: opacity, transform;
}

.cn-visual-hero__code-stack .cn-visual-hero__code-editor:nth-child(1) {
	animation-delay: -1s;
}

.cn-visual-hero__code-stack .cn-visual-hero__code-editor:nth-child(2) {
	animation-delay: 3s;
}

.cn-visual-hero__code-stack .cn-visual-hero__code-editor:nth-child(3) {
	animation-delay: 7s;
}

.cn-visual-hero__code-stack .cn-visual-hero__code-editor:nth-child(4) {
	animation-delay: 11s;
}

.cn-visual-hero__code-stack .cn-visual-hero__code-editor:nth-child(5) {
	animation-delay: 15s;
}

.cn-visual-hero__code-stack .cn-visual-hero__code-editor:nth-child(6) {
	animation-delay: 19s;
}

.cn-visual-hero__code-stack .cn-visual-hero__code-editor:nth-child(7) {
	animation-delay: 23s;
}

.cn-visual-hero__code-stack .cn-visual-hero__code-editor:nth-child(8) {
	animation-delay: 27s;
}

.cn-visual-hero .cn-code-stack-cursor {
	--cn-cursor-scale: 0.62;
	left: clamp(3.1rem, 13%, 5rem);
	top: clamp(4.2rem, 25%, 5.4rem);
	z-index: 20;
}

.cn-visual-hero .cn-code-stack-cursor .cn-cursor__click-ring,
.cn-visual-hero .cn-code-stack-cursor .cn-cursor__press-target,
.cn-visual-hero .cn-code-stack-cursor .cn-cursor__hover-target {
	display: none;
}

.cn-visual-code__tabs {
	align-items: stretch;
	background: #141414;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	display: flex;
	min-height: clamp(2.75rem, 4vw, 3.35rem);
	overflow: hidden;
}

.cn-visual-code__tab {
	appearance: none;
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: rgba(245, 245, 245, 0.62);
	display: flex;
	flex: 1 1 0;
	font-size: clamp(0.58rem, 0.82vw, 0.78rem);
	font-weight: 650;
	gap: 0.45rem;
	line-height: 1;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	padding: 0 clamp(0.8rem, 1.7vw, 1.35rem);
	text-align: left;
	white-space: nowrap;
}

.cn-visual-code__tab.is-active {
	background: #232323;
	color: #f1f1f1;
}

.cn-visual-code__tab:not(.is-active):hover,
.cn-visual-code__tab:not(.is-active).is-cn-roaming-hovered {
	background: rgba(245, 245, 245, 0.04);
	color: rgba(245, 245, 245, 0.84);
}

.cn-visual-code__tab:focus-visible {
	box-shadow: inset 0 0 0 1px rgba(245, 245, 245, 0.34);
	outline: 0;
}

.cn-visual-code__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cn-visual-code__status {
	background: rgba(245, 245, 245, 0.1);
	border-radius: 999px;
	color: rgba(245, 245, 245, 0.72);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0.48rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1;
	margin-inline-start: 0.25rem;
	padding: 0.2rem 0.32rem;
	text-transform: uppercase;
}

.cn-visual-code__tab.is-active .cn-visual-code__status {
	background: rgba(245, 245, 245, 0.16);
	color: #f4f4f4;
}

.cn-visual-code__file-icon {
	align-items: center;
	background: #d8d8d8;
	border-radius: 0.12rem;
	color: #171717;
	display: inline-flex;
	font-size: 0.42rem;
	font-weight: 800;
	height: clamp(0.82rem, 1.2vw, 1.05rem);
	flex: 0 0 auto;
	justify-content: center;
	line-height: 1;
	position: relative;
	width: clamp(0.72rem, 1vw, 0.92rem);
}

.cn-visual-code__file-icon::after {
	background: #a8a8a8;
	clip-path: polygon(0 0, 100% 100%, 0 100%);
	content: "";
	height: 0.34rem;
	position: absolute;
	right: 0;
	top: 0;
	width: 0.34rem;
}

.cn-visual-code__file-icon--js {
	background: #efefef;
	color: #171717;
}

.cn-visual-code__file-icon--md {
	background: #d8d8d8;
	color: #262626;
}

.cn-visual-code__body {
	background: #161616;
	min-height: 0;
	overflow: hidden;
	padding: clamp(1rem, 1.8vw, 1.45rem) clamp(0.9rem, 1.7vw, 1.35rem);
	position: relative;
}

.cn-visual-code__panel[hidden] {
	display: none;
}

.cn-visual-code__panel {
	height: 100%;
	overflow: hidden;
}

.cn-visual-code__lines {
	color: rgba(245, 245, 245, 0.78);
	counter-reset: cn-code-line;
	display: grid;
	font-size: clamp(0.62rem, 0.88vw, 0.82rem);
	gap: clamp(0.28rem, 0.5vw, 0.4rem);
	line-height: 1.1;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cn-visual-code__lines li {
	counter-increment: cn-code-line;
	display: grid;
	grid-template-columns: 2.15rem minmax(0, 1fr);
	min-width: 0;
}

.cn-visual-code__lines li::before {
	color: rgba(245, 245, 245, 0.42);
	content: counter(cn-code-line);
	font-variant-numeric: tabular-nums;
	padding-inline-end: 0.85rem;
	text-align: right;
}

.cn-visual-code__lines code {
	background: transparent !important;
	border: 0;
	border-radius: 0;
	color: inherit;
	display: block;
	font-family: inherit;
	font-size: inherit;
	overflow: hidden;
	padding: 0 !important;
	white-space: nowrap;
}

.cn-code-comment {
	color: #767676;
}

.cn-code-keyword {
	color: #cfcfcf;
}

.cn-code-name {
	color: #a8a8a8;
}

.cn-code-string,
.cn-code-plain {
	color: #f4f4f4;
}

.cn-code-check {
	background: rgba(245, 245, 245, 0.12);
	border-radius: 999px;
	color: #f4f4f4;
	display: inline-flex;
	font-size: 0.68em;
	font-weight: 850;
	letter-spacing: 0.06em;
	line-height: 1;
	margin-inline-end: 0.45rem;
	padding: 0.22rem 0.34rem;
	text-transform: uppercase;
}

.cn-code-caret {
	background: rgba(245, 245, 245, 0.72);
	display: inline-block;
	height: 1em;
	margin-inline-start: 0.12rem;
	vertical-align: -0.14em;
	width: 1px;
}

.cn-visual-code-card--terminal .cn-visual-code__lines,
.cn-visual-code-card--server .cn-visual-code__lines,
.cn-visual-code-card--qa .cn-visual-code__lines,
.cn-visual-code-card--deploy .cn-visual-code__lines {
	counter-reset: none;
	gap: clamp(0.24rem, 0.44vw, 0.36rem);
}

.cn-visual-code-card--terminal .cn-visual-code__lines li,
.cn-visual-code-card--server .cn-visual-code__lines li,
.cn-visual-code-card--qa .cn-visual-code__lines li,
.cn-visual-code-card--deploy .cn-visual-code__lines li {
	animation: cn-visual-terminal-line 32s linear infinite both;
	counter-increment: none;
	grid-template-columns: minmax(0, 1fr);
	opacity: 0;
	transform: translateY(0.28rem);
}

.cn-visual-code-card--terminal .cn-visual-code__lines li::before,
.cn-visual-code-card--server .cn-visual-code__lines li::before,
.cn-visual-code-card--qa .cn-visual-code__lines li::before,
.cn-visual-code-card--deploy .cn-visual-code__lines li::before {
	content: none;
}

.cn-visual-code-card--terminal {
	--cn-terminal-line-base: 15s;
}

.cn-visual-code-card--server {
	--cn-terminal-line-base: 19s;
}

.cn-visual-code-card--qa {
	--cn-terminal-line-base: 23s;
}

.cn-visual-code-card--deploy {
	--cn-terminal-line-base: 27s;
}

:is(.cn-visual-code-card--terminal, .cn-visual-code-card--server, .cn-visual-code-card--qa, .cn-visual-code-card--deploy) .cn-visual-code__lines li:nth-child(1) {
	animation-delay: calc(var(--cn-terminal-line-base) + 0.08s);
}

:is(.cn-visual-code-card--terminal, .cn-visual-code-card--server, .cn-visual-code-card--qa, .cn-visual-code-card--deploy) .cn-visual-code__lines li:nth-child(2) {
	animation-delay: calc(var(--cn-terminal-line-base) + 0.25s);
}

:is(.cn-visual-code-card--terminal, .cn-visual-code-card--server, .cn-visual-code-card--qa, .cn-visual-code-card--deploy) .cn-visual-code__lines li:nth-child(3) {
	animation-delay: calc(var(--cn-terminal-line-base) + 0.42s);
}

:is(.cn-visual-code-card--terminal, .cn-visual-code-card--server, .cn-visual-code-card--qa, .cn-visual-code-card--deploy) .cn-visual-code__lines li:nth-child(4) {
	animation-delay: calc(var(--cn-terminal-line-base) + 0.59s);
}

:is(.cn-visual-code-card--terminal, .cn-visual-code-card--server, .cn-visual-code-card--qa, .cn-visual-code-card--deploy) .cn-visual-code__lines li:nth-child(5) {
	animation-delay: calc(var(--cn-terminal-line-base) + 0.76s);
}

:is(.cn-visual-code-card--terminal, .cn-visual-code-card--server, .cn-visual-code-card--qa, .cn-visual-code-card--deploy) .cn-visual-code__lines li:nth-child(6) {
	animation-delay: calc(var(--cn-terminal-line-base) + 0.93s);
}

:is(.cn-visual-code-card--terminal, .cn-visual-code-card--server, .cn-visual-code-card--qa, .cn-visual-code-card--deploy) .cn-visual-code__lines li:nth-child(7) {
	animation-delay: calc(var(--cn-terminal-line-base) + 1.1s);
}

:is(.cn-visual-code-card--terminal, .cn-visual-code-card--server, .cn-visual-code-card--qa, .cn-visual-code-card--deploy) .cn-visual-code__lines li:nth-child(8) {
	animation-delay: calc(var(--cn-terminal-line-base) + 1.27s);
}

:is(.cn-visual-code-card--terminal, .cn-visual-code-card--server, .cn-visual-code-card--qa, .cn-visual-code-card--deploy) .cn-visual-code__lines li:nth-child(9) {
	animation-delay: calc(var(--cn-terminal-line-base) + 1.44s);
}

:is(.cn-visual-code-card--terminal, .cn-visual-code-card--server, .cn-visual-code-card--qa, .cn-visual-code-card--deploy) .cn-visual-code__lines li:nth-child(10) {
	animation-delay: calc(var(--cn-terminal-line-base) + 1.61s);
}

:is(.cn-visual-code-card--terminal, .cn-visual-code-card--server, .cn-visual-code-card--qa, .cn-visual-code-card--deploy) .cn-visual-code__lines li:nth-child(11) {
	animation-delay: calc(var(--cn-terminal-line-base) + 1.78s);
}

:is(.cn-visual-code-card--terminal, .cn-visual-code-card--server, .cn-visual-code-card--qa, .cn-visual-code-card--deploy).has-cn-code-manual-tab .cn-visual-code__lines li {
	animation: none;
	opacity: 1;
	transform: none;
}

.cn-visual-code-card--deploy .cn-visual-code__body::before,
.cn-visual-code-card--deploy .cn-visual-code__body::after {
	border-radius: 999px;
	bottom: clamp(0.6rem, 1vw, 0.85rem);
	content: "";
	height: 2px;
	left: clamp(0.9rem, 1.7vw, 1.35rem);
	position: absolute;
	right: clamp(0.9rem, 1.7vw, 1.35rem);
}

.cn-visual-code-card--deploy .cn-visual-code__body::before {
	background: rgba(245, 245, 245, 0.18);
}

.cn-visual-code-card--deploy .cn-visual-code__body::after {
	animation: cn-visual-deploy-progress 32s linear infinite both;
	background: #f4f4f4;
	transform: scaleX(0);
	transform-origin: left center;
}

.cn-visual-code-card--terminal .cn-visual-code__lines li:last-child code::after,
.cn-visual-code-card--server .cn-visual-code__lines li:last-child code::after,
.cn-visual-code-card--qa .cn-visual-code__lines li:nth-last-child(2) code::after,
.cn-visual-code-card--deploy .cn-visual-code__lines li:nth-last-child(2) code::after {
	animation: cn-visual-terminal-caret 1.1s steps(2, end) infinite;
	background: currentColor;
	content: "";
	display: inline-block;
	height: 0.9em;
	margin-inline-start: 0.18rem;
	vertical-align: -0.1em;
	width: 1px;
}

.cn-visual-code-card--qa .cn-visual-code__lines li:nth-last-child(2) code,
.cn-visual-code-card--deploy .cn-visual-code__lines li:nth-last-child(2) code {
	font-size: 1.08em;
	font-weight: 750;
}

@keyframes cn-visual-code-stack {
	0% {
		opacity: 0;
		transform: translateY(2.4rem) scale(0.96);
		z-index: 8;
	}

	2.5%,
	12% {
		opacity: 1;
		transform: translateY(0) scale(1);
		z-index: 8;
	}

	16%,
	24% {
		opacity: 1;
		transform: translateY(calc(var(--cn-code-stack-top) * -0.58)) scale(0.94);
		z-index: 7;
	}

	28%,
	36% {
		opacity: 0.76;
		transform: translateY(calc(var(--cn-code-stack-top) * -1.08)) scale(0.88);
		z-index: 6;
	}

	40%,
	48% {
		opacity: 0.42;
		transform: translateY(calc(var(--cn-code-stack-top) * -1.52)) scale(0.82);
		z-index: 5;
	}

	52%,
	60% {
		opacity: 0.2;
		transform: translateY(calc(var(--cn-code-stack-top) * -1.86)) scale(0.78);
		z-index: 4;
	}

	64%,
	72% {
		opacity: 0.08;
		transform: translateY(calc(var(--cn-code-stack-top) * -2.14)) scale(0.74);
		z-index: 3;
	}

	76%,
	100% {
		opacity: 0;
		transform: translateY(calc(var(--cn-code-stack-top) * -2.34)) scale(0.7);
		z-index: 1;
	}
}

@keyframes cn-visual-terminal-line {
	0%,
	0.5% {
		opacity: 0;
		transform: translateY(0.28rem);
	}

	1.5%,
	12% {
		opacity: 1;
		transform: translateY(0);
	}

	13%,
	100% {
		opacity: 0;
		transform: translateY(-0.12rem);
	}
}

@keyframes cn-visual-terminal-caret {
	50% {
		opacity: 0;
	}
}

@keyframes cn-visual-deploy-progress {
	0%,
	84% {
		opacity: 0;
		transform: scaleX(0);
	}

	85% {
		opacity: 1;
		transform: scaleX(0);
	}

	97% {
		opacity: 1;
		transform: scaleX(1);
	}

	98%,
	100% {
		opacity: 0;
		transform: scaleX(1);
	}
}

.cn-visual-hero > .cn-visual-hero__cursor {
	left: clamp(34rem, 56vw, 58rem);
	top: clamp(16rem, 25vw, 23rem);
	z-index: 5;
}

.cn-visual-hero__gallery > .cn-visual-hero__cursor {
	left: clamp(5rem, 15vw, 13rem);
	top: clamp(0.75rem, 4vw, 3.5rem);
	z-index: 5;
}

.cn-visual-hero__image {
	--cn-cut-left-height: 0;
	--cn-cut-left-width: 0;
	--cn-cut-right-height: 0;
	--cn-cut-right-width: 0;
	--cn-cut-radius: clamp(1.25rem, 2vw, 2.2rem);
	background: var(--cn-bg-card);
	border-radius: clamp(1.25rem, 2.2vw, 2.25rem) clamp(1.25rem, 2.2vw, 2.25rem) 0 0;
	display: block;
	height: clamp(18rem, 30vw, 31rem);
	margin: 0 !important;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.cn-visual-hero__image::before,
.cn-visual-hero__image::after {
	background: var(--cn-bg);
	content: "";
	display: block;
	height: var(--cn-cut-left-height);
	pointer-events: none;
	position: absolute;
	top: 0;
	width: var(--cn-cut-left-width);
	z-index: 2;
}

.cn-visual-hero__image::before {
	border-bottom-right-radius: var(--cn-cut-radius);
	left: 0;
}

.cn-visual-hero__image::after {
	border-bottom-left-radius: var(--cn-cut-radius);
	height: var(--cn-cut-right-height);
	right: 0;
	width: var(--cn-cut-right-width);
}

.cn-visual-hero__image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.cn-visual-hero__image--one {
	--cn-cut-right-height: clamp(2.5rem, 4.2vw, 4.5rem);
	--cn-cut-right-width: 31%;
	height: clamp(18rem, 30vw, 31rem);
}

.cn-visual-hero__image--two {
	--cn-cut-left-height: clamp(1rem, 2vw, 2rem);
	--cn-cut-left-width: 10%;
	--cn-cut-right-height: clamp(3rem, 5vw, 5.25rem);
	--cn-cut-right-width: 25%;
	height: clamp(15.5rem, 26vw, 27rem);
}

.cn-visual-hero__image--three {
	--cn-cut-left-height: clamp(1.6rem, 3vw, 3rem);
	--cn-cut-left-width: 13%;
	--cn-cut-right-height: clamp(3.7rem, 5.8vw, 6.2rem);
	--cn-cut-right-width: 20%;
	height: clamp(16.5rem, 27vw, 28rem);
}

.cn-visual-hero__image--four {
	--cn-cut-left-height: clamp(4rem, 6.5vw, 6.8rem);
	--cn-cut-left-width: 22%;
	height: clamp(19rem, 32vw, 33rem);
}

@media (max-width: 900px) {
	.cn-visual-hero {
		min-height: 0;
	}

	.cn-visual-hero__intro {
		align-items: start !important;
	}

	.has-cn-visual-code-editor .cn-visual-hero__intro {
		grid-template-columns: 1fr;
	}

	.has-cn-visual-code-editor .cn-visual-hero__editor-column,
	.has-cn-visual-code-editor .cn-visual-hero__title-column,
	.has-cn-visual-code-editor .cn-visual-hero__copy-column {
		grid-column: 1;
		grid-row: auto;
	}

	.cn-visual-hero__copy-column {
		padding-block-start: 0;
	}

	.cn-visual-hero__title {
		max-width: 12ch !important;
	}

	.cn-visual-hero__scroll {
		display: none;
	}

	.cn-visual-hero__gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-block-start: clamp(2.5rem, 9vw, 4rem);
	}

	.cn-visual-hero__code-stack {
		grid-column: 1 / -1;
		height: clamp(15rem, 42vw, 21rem);
		max-width: min(100%, 34rem);
	}

	.cn-visual-hero__code-stack--intro {
		justify-self: start;
		width: min(100%, 34rem);
	}

	.cn-visual-hero__cursor {
		display: none;
	}

	.cn-visual-hero__image,
	.cn-visual-hero__image--one,
	.cn-visual-hero__image--two,
	.cn-visual-hero__image--three,
	.cn-visual-hero__image--four {
		height: clamp(13rem, 42vw, 22rem);
	}

	.cn-visual-hero__image--one {
		--cn-cut-right-width: 26%;
	}

	.cn-visual-hero__image--two,
	.cn-visual-hero__image--three {
		--cn-cut-left-width: 0;
		--cn-cut-left-height: 0;
		--cn-cut-right-width: 20%;
	}

	.cn-visual-hero__image--four {
		--cn-cut-left-width: 20%;
	}
}

@media (max-width: 560px) {
	.cn-visual-hero {
		padding-top: 6rem !important;
	}

	.cn-visual-hero__gallery {
		gap: 0.5rem;
		grid-template-columns: 1fr;
	}

	.cn-visual-hero__code-stack {
		height: 16rem;
	}

	.cn-visual-code__tab {
		padding-inline: 0.75rem;
	}

	.cn-visual-hero__image,
	.cn-visual-hero__image--one,
	.cn-visual-hero__image--two,
	.cn-visual-hero__image--three,
	.cn-visual-hero__image--four {
		--cn-cut-left-height: 0;
		--cn-cut-left-width: 0;
		--cn-cut-right-height: 0;
		--cn-cut-right-width: 0;
		height: 16rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-visual-hero__cursor {
		display: none;
	}

	.cn-visual-hero__code-stack .cn-visual-hero__code-editor {
		animation: none;
		opacity: 0;
		transform: none;
	}

	.cn-visual-hero__code-stack .cn-visual-hero__code-editor:first-child {
		opacity: 1;
	}

	.cn-visual-code-card--terminal .cn-visual-code__lines li,
	.cn-visual-code-card--server .cn-visual-code__lines li,
	.cn-visual-code-card--qa .cn-visual-code__lines li,
	.cn-visual-code-card--deploy .cn-visual-code__lines li,
	.cn-visual-code-card--deploy .cn-visual-code__body::after,
	.cn-visual-code-card--terminal .cn-visual-code__lines li:last-child code::after,
	.cn-visual-code-card--server .cn-visual-code__lines li:last-child code::after,
	.cn-visual-code-card--qa .cn-visual-code__lines li:nth-last-child(2) code::after,
	.cn-visual-code-card--deploy .cn-visual-code__lines li:nth-last-child(2) code::after {
		animation: none;
	}

	.cn-visual-code-card--terminal .cn-visual-code__lines li,
	.cn-visual-code-card--server .cn-visual-code__lines li,
	.cn-visual-code-card--qa .cn-visual-code__lines li,
	.cn-visual-code-card--deploy .cn-visual-code__lines li {
		opacity: 1;
		transform: none;
	}
}