text: import React from "react";
  import theme from "theme";
  import { Theme, Link, Text, Box, Em, Image, Span, Icon, List, Button, Strong } from "@quarkly/widgets";
  import { Helmet } from "react-helmet";
  import { Override, Section } from "@quarkly/components";
  import * as Components from "components";
  import { FaYoutube, FaTree } from "react-icons/fa";
  export default (() => {
  	return <Theme theme={theme}>
  		<Helmet>
  			<title>
  				Hover & Adaptive | Onboarding Quarkly
  			</title>
  			<meta name={"description"} content={"At this stage, you're going to learn how to change styles for the hover state and mobile devices.\n"} />
  			<meta property={"og:title"} content={"Hover & Adaptive | Onboarding Quarkly"} />
  			<meta property={"og:description"} content={"At this stage, you're going to learn how to change styles for the hover state and mobile devices.\n"} />
  			<link rel={"shortcut icon"} href={"https://uploads.quarkly.io/readme/cra/favicon-32x32.ico"} type={"image/x-icon"} />
  		</Helmet>
  		<Components.HeaderMenu />
  		<Section
  			padding="130px 0px 100px 0px"
  			sm-padding="40px 0"
  			background="--color-darkL2"
  			border-width="0px 0px 3px 0px"
  			border-style="solid"
  			border-color="--color-primary"
  			md-padding="80px 0px 60px 0px"
  			quarkly-title="Hero"
  		>
  			<Override slot="SectionContent" align-items="flex-start" flex-direction="column" />
  			<Text
  				as="h2"
  				font="--headline1"
  				md-font="--headline2"
  				margin="20px 0 0 0"
  				width="33.33%"
  				color="--light"
  				lg-width="80%"
  				md-width="100%"
  			>
  				Hover & Adaptive
  			</Text>
  			<Text
  				as="p"
  				font="--lead"
  				margin="20px 0 0 0"
  				width="66.66%"
  				color="--lightD2"
  				lg-width="80%"
  				md-width="100%"
  			>
  				To bring the pages to life and make them responsive and adaptive, specify custom styles for the hover state and at breakpoints.
  			</Text>
  		</Section>
  		<Section padding="100px 0" sm-padding="40px 0" md-padding="60px 0 60px 0" quarkly-title="Step 1. Set Up Styles for Hover">
  			<Override slot="SectionContent" align-items="flex-start" />
  			<Box position="relative" display="inline-block" margin="0px 0px 0px 21px" quarkly-title="Step">
  				<Text
  					as="p"
  					font="--capture"
  					margin="0 0 20px 0"
  					text-transform="uppercase"
  					color="white"
  					letter-spacing="1px"
  					overflow-wrap="normal"
  					word-break="normal"
  					white-space="normal"
  					text-indent="0"
  					text-overflow="clip"
  					hyphens="manual"
  					display="inline-block"
  					padding="0px 0px 4px 0px"
  					position="relative"
  					z-index="1"
  				>
  					STEP 1 OF 3
  				</Text>
  				<Box
  					background="rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/5f44d57c7f10ba001eace3a0/images/brush-stroke.svg?v=2020-10-16T13:20:42.549Z) 0% 0% /100% no-repeat scroll padding-box"
  					display="inline-block"
  					width="136px"
  					height="46px"
  					position="absolute"
  					top="-8px"
  					right="auto"
  					bottom="auto"
  					left="-29px"
  				/>
  			</Box>
  			<Text
  				as="h2"
  				font="--headline2"
  				md-font="--headline2"
  				margin="0px 0px 20px 0px"
  				color="--dark"
  				sm-font="--headline3"
  			>
  				Set up styles for hover
  			</Text>
  			<Text
  				as="p"
  				font="--lead"
  				margin="0px 0 30px 0"
  				width="50%"
  				color="--darkL2"
  				lg-width="80%"
  				md-width="100%"
  			>
  				An element can be configured to change styles when you mouse over it. In the{" "}
  				<Em>
  					Preview mode{" "}
  				</Em>
  				<Image vertical-align="-5px" src="https://uploads.quarkly.io/5f44d57c7f10ba001eace3a0/images/onboarding-tutorial-code-preview.svg?v=2020-10-24T19:04:24.532Z" margin="0px 0px 0px 0px" />
  				, hover over the example card.{" "}
  				<br />
  				Like it? Let's create this effect together.
  			</Text>
  			<Box display="flex" width="100%" md-flex-direction="column">
  				<List
  					as="ol"
  					list-style-type="none"
  					padding="0px 12px 0px 0px"
  					margin="0px 0px 16px 0px"
  					width="33.33%"
  					box-sizing="border-box"
  					md-padding="0px 0px 0px 0px"
  					md-width="100%"
  				>
  					<Box
  						width="auto"
  						display="flex"
  						align-items="flex-start"
  						justify-content="flex-start"
  						quarkly-title="Item 1"
  						flex-wrap="nowrap"
  						margin="0px 0px 12px 0px"
  						sm-flex-direction="column"
  					>
  						<Text
  							background="--color-indigo"
  							font="--base"
  							color="--lightD2"
  							padding="2px 8px 2px 8px"
  							border-radius="33px"
  							margin="16px 12px 16px 0px"
  							text-align="center"
  							flex="0 0 auto"
  							min-width="12px"
  							border-color="--color-darkL2"
  							border-style="solid"
  							border-width="1px"
  							sm-margin="12px 12px 0px 0px"
  							text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  						>
  							1
  						</Text>
  						<Box width="100%">
  							<Text
  								display="inline-block"
  								font="--base"
  								margin="20px 0px 16px 0px"
  								width="100%"
  								color="--darkL2"
  								sm-margin="12px 0px 16px 0px"
  							>
  								Choose the card{" "}
  								<Em
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									background
  								</Em>
  								{" "}(
  								<Image
  									width="24px"
  									height="24px"
  									vertical-align="top"
  									src="https://artemzhigalin.ru/src/onboarding-tutorial-box.svg"
  									margin="0px 2px 0px 2px"
  								/>
  								<Span
  									color="--primary"
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									Box
  								</Span>
  								{"  "}) and switch the state to{" "}
  								<Em>
  									hover
  								</Em>
  								. This state changes the element look when mousing over it.
  							</Text>
  							<Image src="https://uploads.quarkly.io/5f44d57c7f10ba001eace3a0/images/onboarding-tutorial-hover-state.svg?v=2020-10-29T09:02:03.858Z" border-radius="4px" max-width="100%" />
  							<Text
  								display="inline-block"
  								font="--base"
  								margin="20px 0px 16px 0px"
  								width="100%"
  								color="--darkL2"
  								sm-margin="12px 0px 16px 0px"
  							>
  								Let's change the{" "}
  								<Em>
  									hover
  								</Em>
  								{" "}styles to check out the effect.
  							</Text>
  						</Box>
  					</Box>
  					<Box
  						width="auto"
  						display="flex"
  						align-items="flex-start"
  						justify-content="flex-start"
  						flex-direction="row"
  						quarkly-title="Item 2"
  						margin="0px 0px 12px 0px"
  						sm-flex-direction="column"
  					>
  						<Text
  							background="--color-indigo"
  							font="--base"
  							color="--lightD2"
  							padding="2px 8px 2px 8px"
  							border-radius="33px"
  							margin="16px 12px 16px 0px"
  							text-align="center"
  							flex="0 0 auto"
  							min-width="12px"
  							border-color="--color-darkL2"
  							border-style="solid"
  							border-width="1px"
  							sm-margin="12px 12px 0px 0px"
  							text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  						>
  							2
  						</Text>
  						<Box width="100%">
  							<Text
  								display="block"
  								font="--base"
  								margin="20px 0px 16px 0px"
  								width="100%"
  								color="--darkL2"
  								sm-margin="12px 0px 16px 0px"
  							>
  								Choose the{" "}
  								<Em
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									Background
  								</Em>
  								{" "}property from the{" "}
  								<Em
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									Background
  								</Em>
  								{" "}group. Click in the input field to open the settings window. There, specify the{" "}
  								<Em
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									100% 0%
  								</Em>
  								{" "}value for the{" "}
  								<Em
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									Position
  								</Em>
  								{" "}property.
  							</Text>
  							<Image src="https://uploads.quarkly.io/5f44d57c7f10ba001eace3a0/images/onboarding-tutorial-background-position.svg?v=2020-11-04T11:42:30.733Z" border-radius="4px" max-width="100%" />
  						</Box>
  					</Box>
  					<Box
  						width="auto"
  						display="flex"
  						align-items="flex-start"
  						justify-content="flex-start"
  						flex-direction="row"
  						quarkly-title="Item 2"
  						margin="0px 0px 12px 0px"
  						sm-flex-direction="column"
  					>
  						<Text
  							background="--color-indigo"
  							font="--base"
  							color="--lightD2"
  							padding="2px 8px 2px 8px"
  							border-radius="33px"
  							margin="16px 12px 16px 0px"
  							text-align="center"
  							flex="0 0 auto"
  							min-width="12px"
  							border-color="--color-darkL2"
  							border-style="solid"
  							border-width="1px"
  							sm-margin="12px 12px 0px 0px"
  							text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  						>
  							3
  						</Text>
  						<Box width="100%">
  							<Text
  								display="block"
  								font="--base"
  								margin="20px 0px 0px 0px"
  								width="100%"
  								color="--darkL2"
  								sm-margin="12px 0px 0px 0px"
  							>
  								Go to{" "}
  								<Em
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									the preview mode{" "}
  								</Em>
  								by clicking on the button{" "}
  								<Image vertical-align="-5px" src="https://uploads.quarkly.io/5f44d57c7f10ba001eace3a0/images/onboarding-tutorial-code-preview.svg?v=2020-10-24T19:04:24.532Z" margin="0px 0px 0px 0px" />
  								{" "}or using the shortcuts:
  								<br />
  								Mac:{" "}
  								<Span
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									<Span
  										min-width="18px"
  										border-color="--color-lightD2"
  										border-radius="4px"
  										border-width="2px"
  										border-style="solid"
  										padding="2px 5px 2px 5px"
  										box-shadow="0px 1px 0 1px --color-lightD2"
  										display="inline-block"
  										text-align="center"
  										font="--capture"
  										color="--greyD2"
  										text-transform="uppercase"
  										letter-spacing="1px"
  										overflow-wrap="normal"
  										word-break="normal"
  										white-space="normal"
  										text-indent="0"
  										text-overflow="clip"
  										hyphens="manual"
  										margin="0px 0px 0px 3px"
  									>
  										⌘
  									</Span>
  								</Span>
  								{" "}
  								<Span
  									min-width="18px"
  									border-color="--color-lightD2"
  									border-radius="4px"
  									border-width="2px"
  									border-style="solid"
  									padding="2px 5px 2px 5px"
  									box-shadow="0px 1px 0 1px --color-lightD2"
  									display="inline-block"
  									text-align="center"
  									font="--capture"
  									color="--greyD2"
  									text-transform="uppercase"
  									letter-spacing="1px"
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  									margin="0px 3px 0px 0px"
  								>
  									p
  								</Span>
  								{" "}Win:{" "}
  								<Span
  									min-width="18px"
  									border-color="--color-lightD2"
  									border-radius="4px"
  									border-width="2px"
  									border-style="solid"
  									padding="2px 5px 2px 5px"
  									box-shadow="0px 1px 0 1px --color-lightD2"
  									display="inline-block"
  									text-align="center"
  									font="--capture"
  									color="--greyD2"
  									text-transform="uppercase"
  									letter-spacing="1px"
  									margin="0px 0px 0px 3px"
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									Ctrl
  								</Span>
  								{" "}
  								<Span
  									min-width="18px"
  									border-color="--color-lightD2"
  									border-radius="4px"
  									border-width="2px"
  									border-style="solid"
  									padding="2px 5px 2px 5px"
  									box-shadow="0px 1px 0 1px --color-lightD2"
  									display="inline-block"
  									text-align="center"
  									font="--capture"
  									color="--greyD2"
  									text-transform="uppercase"
  									letter-spacing="1px"
  									margin="0px 3px 0px 0px"
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									p
  								</Span>
  							</Text>
  						</Box>
  					</Box>
  					<Box
  						width="auto"
  						display="flex"
  						align-items="flex-start"
  						justify-content="flex-start"
  						flex-direction="row"
  						flex-wrap="nowrap"
  						quarkly-title="Item 3"
  						sm-flex-direction="column"
  					>
  						<Text
  							background="--color-indigo"
  							font="--base"
  							color="--lightD2"
  							padding="2px 8px 2px 8px"
  							border-radius="33px"
  							margin="16px 12px 16px 0px"
  							text-align="center"
  							flex="0 0 auto"
  							min-width="12px"
  							border-color="--color-darkL2"
  							border-style="solid"
  							border-width="1px"
  							sm-margin="12px 12px 0px 0px"
  							text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  						>
  							4
  						</Text>
  						<Box width="100%">
  							<Text
  								display="block"
  								font="--base"
  								margin="20px 0px 8px 0px"
  								width="100%"
  								color="--darkL2"
  								sm-margin="12px 0px 8px 0px"
  							>
  								Mouse over the card to check that the effect has been applied.
  							</Text>
  							<Text
  								display="inline-block"
  								font="normal 300 14px/1.5 --fontFamily-sans"
  								margin="20px 0px 0px 0px"
  								color="--darkL2"
  								background="rgba(0, 119, 204, 0.04)"
  								padding="8px 14px 16px 14px"
  								border-radius="6px"
  								border-width="1px"
  								border-style="solid"
  								border-color="--color-lightD2"
  								sm-margin="12px 0px 0px 0px"
  							>
  								<Span
  									font="--capture"
  									letter-spacing="1px"
  									color="--grey"
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  									text-transform="uppercase"
  								>
  									Tip
  								</Span>
  								<br />
  								<Span
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									You can change any property under the{" "}
  									<Em
  										overflow-wrap="normal"
  										word-break="normal"
  										white-space="normal"
  										text-indent="0"
  										text-overflow="clip"
  										hyphens="manual"
  									>
  										Styles
  									</Em>
  									{" "}tab
  								</Span>
  							</Text>
  							<Text
  								display="block"
  								font="normal 300 14px/1.5 --fontFamily-sans"
  								margin="20px 0px 16px 0px"
  								color="--darkL2"
  								background="rgba(0, 119, 204, 0.04)"
  								padding="8px 14px 16px 14px"
  								border-radius="6px"
  								border-width="1px"
  								border-style="solid"
  								border-color="--color-lightD2"
  								position="relative"
  							>
  								<Icon
  									category="fa"
  									icon={FaYoutube}
  									color="--greyD2"
  									font="22px sans-serif"
  									margin="0px 8px 0px 0px"
  									display="inline-block"
  									position="absolute"
  								/>
  								<Span
  									font="--capture"
  									letter-spacing="1px"
  									color="--grey"
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  									text-transform="uppercase"
  									display="inline-block"
  									margin="0px 0px 0px 31px"
  								>
  									YOUTUBE
  								</Span>
  								<br />
  								<Text
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  									text-decoration-line="initial"
  									margin="0 0px 0px 0px"
  								>
  									Style Props. Transition
  								</Text>
  								<Link
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  									text-decoration-line="initial"
  									color="--primary"
  									href="https://youtu.be/kDEtTCMTEY8?t=40"
  									target="_blank"
  								>
  									https://youtu.be/kDEtTCMTEY8?t=40
  								</Link>
  							</Text>
  						</Box>
  					</Box>
  				</List>
  				<Box
  					width="66.66%"
  					text-align="center"
  					position="relative"
  					padding="0px 0px 0px 54px"
  					box-sizing="border-box"
  					md-padding="0px 0px 0px 0px"
  					md-width="100%"
  				>
  					<Text
  						text-align="center"
  						as="p"
  						font="--capture"
  						margin="0 auto 0px auto"
  						text-transform="uppercase"
  						color="--light"
  						display="inline-block"
  						background="--color-indigo"
  						padding="6px 12px 6px 12px"
  						position="relative"
  						top="13px"
  						border-style="solid"
  						border-width="1px"
  						border-color="--color-darkL2"
  						border-radius="6px"
  						text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  					>
  						WORKSPACE
  					</Text>
  					<Box
  						background="rgba(237, 242, 246, 0) repeating-linear-gradient(-45deg,--color-light 0px,--color-light 5px,rgba(0,0,0,0) 5px,rgba(0,0,0,0) 10px) center center space"
  						margin="0px 0px 20px 0px"
  						border-style="dashed"
  						border-width="1px"
  						border-color="--color-grey"
  						box-sizing="border-box"
  						padding="30px 30px 30px 30px"
  						min-height="320px"
  						text-align="left"
  					>
  						<Box
  							width="100%"
  							background="rgba(0, 0, 0, 0) url(https://images.unsplash.com/photo-1593431074633-21ef64707d29?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0MjIzN30) 50% 50%/cover"
  							border-radius="8px"
  							display="flex"
  							flex-direction="column"
  							align-items="center"
  							justify-content="center"
  							box-sizing="border-box"
  							padding="48px 36px 72px 36px"
  							opacity="1"
  							sm-background="rgba(0, 0, 0, 0) url(https://images.unsplash.com/photo-1593431074633-21ef64707d29?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0MjIzN30) center/100%"
  							hover-background="rgba(0, 0, 0, 0) url(https://images.unsplash.com/photo-1593431074633-21ef64707d29?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0MjIzN30) 100% 0%/cover"
  						>
  							<Icon category="fa" icon={FaTree} font="44px sans-serif" color="--light" />
  							<Text
  								font="normal 500 42px/1.2 --fontFamily-googleOpenSansCondensed"
  								text-transform="uppercase"
  								color="--light"
  								text-align="center"
  								margin="16px 0px 0px 0px"
  							>
  								<Span
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  									font="normal 500 28px/1.2 --fontFamily-sans"
  								>
  									Into the Wild
  								</Span>
  							</Text>
  							<Text font="--base" color="--lightD2" text-align="center">
  								A wonderful journey into the woods and mountains that will heal your mind, body, and soul. It’ll be a trip to remember
  							</Text>
  							<Button
  								background="--color-secondary"
  								color="--darkL2"
  								padding="12px 34px 12px 34px"
  								border-radius="24px"
  								text-transform="uppercase"
  								letter-spacing="1.2px"
  								margin="24px 0px 0px 0px"
  								opacity="1"
  								box-shadow="0 12px 3px -4px rgba(3, 18, 7, 0.3)"
  							>
  								Join
  							</Button>
  						</Box>
  					</Box>
  					<Text
  						text-align="center"
  						as="p"
  						font="--capture"
  						margin="0 auto 0px auto"
  						text-transform="uppercase"
  						color="--light"
  						display="inline-block"
  						background="--color-indigo"
  						padding="6px 12px 6px 12px"
  						position="relative"
  						top="13px"
  						border-style="solid"
  						border-width="1px"
  						border-color="--color-darkL2"
  						border-radius="6px"
  						text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  					>
  						Example
  					</Text>
  					<Box
  						background="rgba(237, 242, 246, 0) repeating-linear-gradient(-45deg,--color-light 0px,--color-light 5px,rgba(0,0,0,0) 5px,rgba(0,0,0,0) 10px) center center space"
  						border-style="dashed"
  						border-width="1px"
  						border-color="--color-grey"
  						box-sizing="border-box"
  						margin="0px 0px 20px 0px"
  						padding="30px 30px 30px 30px"
  						display="flex"
  						min-height="320px"
  						text-align="left"
  					>
  						<Box
  							width="100%"
  							background="rgba(0, 0, 0, 0) url(https://images.unsplash.com/photo-1593431074633-21ef64707d29?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0MjIzN30) 50% 50%/cover"
  							hover-background="rgba(0, 0, 0, 0) url(https://images.unsplash.com/photo-1593431074633-21ef64707d29?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0MjIzN30) 100% 0%/cover"
  							border-radius="8px"
  							display="flex"
  							flex-direction="column"
  							align-items="center"
  							justify-content="center"
  							box-sizing="border-box"
  							padding="48px 36px 72px 36px"
  							opacity="1"
  						>
  							<Icon category="fa" icon={FaTree} font="44px sans-serif" color="--light" />
  							<Text
  								font="normal 500 28px/1.2 --fontFamily-sans"
  								text-transform="uppercase"
  								color="--light"
  								text-align="center"
  								margin="16px 0px 0px 0px"
  							>
  								INTO THE WILD{"  "}
  							</Text>
  							<Text font="--base" color="--lightD2" text-align="center">
  								A wonderful journey into the woods and mountains that will heal your mind, body, and soul. It’ll be a trip to remember
  							</Text>
  							<Button
  								background="--color-secondary"
  								color="--darkL2"
  								padding="12px 34px 12px 34px"
  								border-radius="24px"
  								text-transform="uppercase"
  								letter-spacing="1.2px"
  								margin="24px 0px 0px 0px"
  								opacity="1"
  								box-shadow="0 12px 3px -4px rgba(3, 18, 7, 0.3)"
  							>
  								Join
  							</Button>
  						</Box>
  					</Box>
  				</Box>
  			</Box>
  		</Section>
  		<Section padding="100px 0" sm-padding="40px 0" md-padding="60px 0 60px 0" quarkly-title="Step 2. Make Smooth Transitions">
  			<Override slot="SectionContent" align-items="flex-start" />
  			<Box position="relative" display="inline-block" margin="0px 0px 0px 21px" quarkly-title="Step">
  				<Text
  					as="p"
  					font="--capture"
  					margin="0 0 20px 0"
  					text-transform="uppercase"
  					color="white"
  					letter-spacing="1px"
  					overflow-wrap="normal"
  					word-break="normal"
  					white-space="normal"
  					text-indent="0"
  					text-overflow="clip"
  					hyphens="manual"
  					display="inline-block"
  					padding="0px 0px 4px 0px"
  					position="relative"
  					z-index="1"
  				>
  					STEP 2 of 3
  				</Text>
  				<Box
  					background="rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/5f44d57c7f10ba001eace3a0/images/brush-stroke.svg?v=2020-10-16T13:20:42.549Z) 0% 0% /100% no-repeat scroll padding-box"
  					display="inline-block"
  					width="136px"
  					height="46px"
  					position="absolute"
  					top="-8px"
  					right="auto"
  					bottom="auto"
  					left="-29px"
  				/>
  			</Box>
  			<Text
  				as="h2"
  				font="--headline2"
  				md-font="--headline2"
  				margin="0px 0px 20px 0px"
  				color="--dark"
  				sm-font="--headline3"
  			>
  				Make smooth transitions
  			</Text>
  			<Text
  				as="p"
  				font="--lead"
  				margin="0px 0 30px 0"
  				width="50%"
  				color="--darkL2"
  				lg-width="80%"
  				md-width="100%"
  			>
  				When mousing over an element, the styles change. But at the moment it happens abruptly. Let's make the transitions smoother.
  			</Text>
  			<Box display="flex" width="100%" md-flex-direction="column">
  				<List
  					as="ol"
  					list-style-type="none"
  					padding="0px 12px 0px 0px"
  					margin="0px 0px 16px 0px"
  					width="33.33%"
  					box-sizing="border-box"
  					md-width="100%"
  				>
  					<Box
  						width="auto"
  						display="flex"
  						align-items="flex-start"
  						justify-content="flex-start"
  						quarkly-title="Item 1"
  						flex-wrap="nowrap"
  						margin="0px 0px 12px 0px"
  						sm-flex-direction="column"
  					>
  						<Text
  							background="--color-indigo"
  							font="--base"
  							color="--lightD2"
  							padding="2px 8px 2px 8px"
  							border-radius="33px"
  							margin="16px 12px 16px 0px"
  							text-align="center"
  							flex="0 0 auto"
  							min-width="12px"
  							border-color="--color-darkL2"
  							border-style="solid"
  							border-width="1px"
  							sm-margin="12px 12px 0px 0px"
  							text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  						>
  							1
  						</Text>
  						<Box width="100%">
  							<Text
  								display="inline-block"
  								font="--base"
  								margin="20px 0px 16px 0px"
  								width="100%"
  								color="--darkL2"
  								sm-margin="12px 0px 16px 0px"
  							>
  								Choose the card background (
  								<Image
  									width="24px"
  									height="24px"
  									vertical-align="top"
  									src="https://artemzhigalin.ru/src/onboarding-tutorial-box.svg"
  									margin="0px 2px 0px 2px"
  								/>
  								<Span
  									color="--primary"
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									Box
  								</Span>
  								). Search for the{" "}
  								<Em
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									Transition{" "}
  								</Em>
  								<Span
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									property under the
  								</Span>
  								{" "}
  								<Em
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									Effects{" "}
  								</Em>
  								<Span
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									tab
  								</Span>
  								. 
  Click in the input field to open the settings window.{" "}
  							</Text>
  							<Image src="https://uploads.quarkly.io/5f44d57c7f10ba001eace3a0/images/onboarding-tutorial-transition-section.svg?v=2020-10-29T09:20:48.559Z" border-radius="4px" max-width="100%" />
  						</Box>
  					</Box>
  					<Box
  						width="auto"
  						display="flex"
  						align-items="flex-start"
  						justify-content="flex-start"
  						flex-direction="row"
  						quarkly-title="Item 2"
  						margin="0px 0px 12px 0px"
  						sm-flex-direction="column"
  					>
  						<Text
  							background="--color-indigo"
  							font="--base"
  							color="--lightD2"
  							padding="2px 8px 2px 8px"
  							border-radius="33px"
  							margin="16px 12px 16px 0px"
  							text-align="center"
  							flex="0 0 auto"
  							min-width="12px"
  							border-color="--color-darkL2"
  							border-style="solid"
  							border-width="1px"
  							sm-margin="12px 12px 0px 0px"
  							text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  						>
  							2
  						</Text>
  						<Box width="100%">
  							<Text
  								display="block"
  								font="--base"
  								margin="20px 0px 8px 0px"
  								width="100%"
  								color="--darkL2"
  								sm-margin="12px 0px 8px 0px"
  							>
  								Under Property, specify{" "}
  								<Em
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									b
  								</Em>
  								<Span
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									<Em
  										overflow-wrap="normal"
  										word-break="normal"
  										white-space="normal"
  										text-indent="0"
  										text-overflow="clip"
  										hyphens="manual"
  									>
  										ackground
  									</Em>
  								</Span>
  								. This way we're applying the smoothness to the{" "}
  								<Em
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									background{" "}
  								</Em>
  								<Span
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									property that we've changed in the stage 1.
  								</Span>
  							</Text>
  						</Box>
  					</Box>
  					<Box
  						width="auto"
  						display="flex"
  						align-items="flex-start"
  						justify-content="flex-start"
  						flex-direction="row"
  						flex-wrap="nowrap"
  						quarkly-title="Item 3"
  						sm-flex-direction="column"
  					>
  						<Text
  							background="--color-indigo"
  							font="--base"
  							color="--lightD2"
  							padding="2px 8px 2px 8px"
  							border-radius="33px"
  							margin="16px 12px 16px 0px"
  							text-align="center"
  							flex="0 0 auto"
  							min-width="12px"
  							border-color="--color-darkL2"
  							border-style="solid"
  							border-width="1px"
  							sm-margin="12px 12px 0px 0px"
  							text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  						>
  							3
  						</Text>
  						<Text
  							display="block"
  							font="--base"
  							margin="20px 0px 16px 0px"
  							width="100%"
  							color="--darkL2"
  							sm-margin="12px 0px 8px 0px"
  						>
  							Set
  							<Em
  								overflow-wrap="normal"
  								word-break="normal"
  								white-space="normal"
  								text-indent="0"
  								text-overflow="clip"
  								hyphens="manual"
  							>
  								{" "}Timing function
  							</Em>
  							{" "}to{" "}
  							<Span
  								overflow-wrap="normal"
  								word-break="normal"
  								white-space="normal"
  								text-indent="0"
  								text-overflow="clip"
  								hyphens="manual"
  							>
  								<Em
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									ease
  								</Em>
  							</Span>
  							. This property is responsible for the transition dynamics. The transition will start slowly, accelerate in the middle, and slow down at the end.{" "}
  						</Text>
  					</Box>
  					<Box
  						width="auto"
  						display="flex"
  						align-items="flex-start"
  						justify-content="flex-start"
  						flex-direction="row"
  						flex-wrap="nowrap"
  						quarkly-title="Item 4"
  						sm-flex-direction="column"
  					>
  						<Text
  							background="--color-indigo"
  							font="--base"
  							color="--lightD2"
  							padding="2px 8px 2px 8px"
  							border-radius="33px"
  							margin="16px 12px 16px 0px"
  							text-align="center"
  							flex="0 0 auto"
  							min-width="12px"
  							border-color="--color-darkL2"
  							border-style="solid"
  							border-width="1px"
  							sm-margin="12px 12px 0px 0px"
  							text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  						>
  							4
  						</Text>
  						<Text
  							display="block"
  							font="--base"
  							margin="20px 0px 16px 0px"
  							width="100%"
  							color="--darkL2"
  							sm-margin="12px 0px 8px 0px"
  						>
  							Set{" "}
  							<Em
  								overflow-wrap="normal"
  								word-break="normal"
  								white-space="normal"
  								text-indent="0"
  								text-overflow="clip"
  								hyphens="manual"
  							>
  								Duration
  							</Em>
  							{" "}to{" "}
  							<Span
  								overflow-wrap="normal"
  								word-break="normal"
  								white-space="normal"
  								text-indent="0"
  								text-overflow="clip"
  								hyphens="manual"
  							>
  								<Em
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									0.3s
  								</Em>
  							</Span>
  							<Span
  								overflow-wrap="normal"
  								word-break="normal"
  								white-space="normal"
  								text-indent="0"
  								text-overflow="clip"
  								hyphens="manual"
  							>
  								. This property is responsible for the transition duration in seconds.
  							</Span>
  						</Text>
  					</Box>
  					<Box
  						width="auto"
  						display="flex"
  						align-items="flex-start"
  						justify-content="flex-start"
  						flex-direction="row"
  						flex-wrap="nowrap"
  						quarkly-title="Item 5"
  						sm-flex-direction="column"
  					>
  						<Text
  							background="--color-indigo"
  							font="--base"
  							color="--lightD2"
  							padding="2px 8px 2px 8px"
  							border-radius="33px"
  							margin="16px 12px 16px 0px"
  							text-align="center"
  							flex="0 0 auto"
  							min-width="12px"
  							border-color="--color-darkL2"
  							border-style="solid"
  							border-width="1px"
  							sm-margin="16px 12px 0px 0px"
  							text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  						>
  							5
  						</Text>
  						<Box>
  							<Text
  								display="block"
  								font="--base"
  								margin="20px 0px 16px 0px"
  								width="100%"
  								color="--darkL2"
  								sm-margin="12px 0px 16px 0px"
  							>
  								Set{" "}
  								<Em>
  									Delay
  								</Em>
  								{" "}to{" "}
  								<Span
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									<Em
  										overflow-wrap="normal"
  										word-break="normal"
  										white-space="normal"
  										text-indent="0"
  										text-overflow="clip"
  										hyphens="manual"
  									>
  										0s
  									</Em>
  								</Span>
  								<Span
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									. This sets the delay in seconds before the transition.
  								</Span>
  							</Text>
  							<Image src="https://uploads.quarkly.io/5f44d57c7f10ba001eace3a0/images/onboarding-tutorial-transition-filled.svg?v=2020-10-29T09:22:35.218Z" border-radius="4px" max-width="100%" sm-margin="0px 0px 12px 0px" />
  						</Box>
  					</Box>
  					<Box
  						width="auto"
  						display="flex"
  						align-items="flex-start"
  						justify-content="flex-start"
  						flex-direction="row"
  						flex-wrap="nowrap"
  						quarkly-title="Item 3"
  						sm-flex-direction="column"
  					>
  						<Text
  							background="--color-indigo"
  							font="--base"
  							color="--lightD2"
  							padding="2px 8px 2px 8px"
  							border-radius="33px"
  							margin="16px 12px 16px 0px"
  							text-align="center"
  							flex="0 0 auto"
  							min-width="12px"
  							border-color="--color-darkL2"
  							border-style="solid"
  							border-width="1px"
  							sm-margin="12px 12px 0px 0px"
  							text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  						>
  							6
  						</Text>
  						<Box width="100%">
  							<Text
  								display="block"
  								font="--base"
  								margin="20px 0px 16px 0px"
  								width="100%"
  								color="--darkL2"
  								sm-margin="12px 0px 16px 0px"
  							>
  								Mouse over the card to see how this effect works.
  							</Text>
  							<Text
  								display="block"
  								font="normal 300 14px/1.5 --fontFamily-sans"
  								margin="20px 0px 16px 0px"
  								color="--darkL2"
  								background="rgba(0, 119, 204, 0.04)"
  								padding="8px 14px 16px 14px"
  								border-radius="6px"
  								border-width="1px"
  								border-style="solid"
  								border-color="--color-lightD2"
  								position="relative"
  							>
  								<Icon
  									category="fa"
  									icon={FaYoutube}
  									color="--greyD2"
  									font="22px sans-serif"
  									margin="0px 8px 0px 0px"
  									display="inline-block"
  									position="absolute"
  								/>
  								<Span
  									font="--capture"
  									letter-spacing="1px"
  									color="--grey"
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  									text-transform="uppercase"
  									display="inline-block"
  									margin="0px 0px 0px 31px"
  								>
  									YOUTUBE
  								</Span>
  								<br />
  								<Text
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  									text-decoration-line="initial"
  									margin="0 0px 0px 0px"
  								>
  									Style Props. Transition
  								</Text>
  								<Link
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  									text-decoration-line="initial"
  									color="--primary"
  									href="https://youtu.be/esh5UtPaXcU?t=197"
  									target="_blank"
  								>
  									https://youtu.be/esh5UtPaXcU?t=197
  								</Link>
  							</Text>
  						</Box>
  					</Box>
  				</List>
  				<Box
  					width="66.66%"
  					text-align="center"
  					position="relative"
  					padding="0px 0px 0px 54px"
  					box-sizing="border-box"
  					md-padding="0px 0px 0px 0px"
  					md-width="100%"
  				>
  					<Text
  						text-align="center"
  						as="p"
  						font="--capture"
  						margin="0 auto 0px auto"
  						text-transform="uppercase"
  						color="--light"
  						display="inline-block"
  						background="--color-indigo"
  						padding="6px 12px 6px 12px"
  						position="relative"
  						top="13px"
  						border-style="solid"
  						border-width="1px"
  						border-color="--color-darkL2"
  						border-radius="6px"
  						text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  					>
  						WORKSPACE
  					</Text>
  					<Box
  						background="rgba(237, 242, 246, 0) repeating-linear-gradient(-45deg,--color-light 0px,--color-light 5px,rgba(0,0,0,0) 5px,rgba(0,0,0,0) 10px) center center space"
  						margin="0px 0px 20px 0px"
  						border-style="dashed"
  						border-width="1px"
  						border-color="--color-grey"
  						box-sizing="border-box"
  						padding="30px 30px 30px 30px"
  						min-height="320px"
  						text-align="left"
  					>
  						<Box
  							width="100%"
  							background="rgba(0, 0, 0, 0) url(https://images.unsplash.com/photo-1593431074633-21ef64707d29?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0MjIzN30) 50% 50%/cover"
  							hover-background="rgba(0, 0, 0, 0) url(https://images.unsplash.com/photo-1593431074633-21ef64707d29?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0MjIzN30) 100% 0%/cover"
  							border-radius="8px"
  							display="flex"
  							flex-direction="column"
  							align-items="center"
  							justify-content="center"
  							box-sizing="border-box"
  							padding="48px 36px 72px 36px"
  							opacity="1"
  							transition="background 0.3s ease 0s"
  						>
  							<Icon category="fa" icon={FaTree} font="44px sans-serif" color="--light" />
  							<Text
  								font="--headline3"
  								text-transform="uppercase"
  								color="--light"
  								text-align="center"
  								margin="16px 0px 0px 0px"
  							>
  								INTO THE WILD{"  "}
  							</Text>
  							<Text font="--base" color="--lightD2" text-align="center">
  								A wonderful journey into the woods and mountains that will heal your mind, body, and soul. It’ll be a trip to remember
  							</Text>
  							<Button
  								background="--color-secondary"
  								color="--darkL2"
  								padding="12px 34px 12px 34px"
  								border-radius="24px"
  								text-transform="uppercase"
  								letter-spacing="1.2px"
  								margin="24px 0px 0px 0px"
  								opacity="1"
  								box-shadow="0 12px 3px -4px rgba(3, 18, 7, 0.3)"
  							>
  								Join
  							</Button>
  						</Box>
  					</Box>
  					<Text
  						text-align="center"
  						as="p"
  						font="--capture"
  						margin="0 auto 0px auto"
  						text-transform="uppercase"
  						color="--light"
  						display="inline-block"
  						background="--color-indigo"
  						padding="6px 12px 6px 12px"
  						position="relative"
  						top="13px"
  						border-style="solid"
  						border-width="1px"
  						border-color="--color-darkL2"
  						border-radius="6px"
  						text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  					>
  						EXAMPLE
  					</Text>
  					<Box
  						background="rgba(237, 242, 246, 0) repeating-linear-gradient(-45deg,--color-light 0px,--color-light 5px,rgba(0,0,0,0) 5px,rgba(0,0,0,0) 10px) center center space"
  						border-style="dashed"
  						border-width="1px"
  						border-color="--color-grey"
  						box-sizing="border-box"
  						margin="0px 0px 20px 0px"
  						padding="30px 30px 30px 30px"
  						display="flex"
  						min-height="320px"
  						text-align="left"
  					>
  						<Box
  							width="100%"
  							background="rgba(0, 0, 0, 0) url(https://images.unsplash.com/photo-1593431074633-21ef64707d29?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0MjIzN30) 50% 50%/cover"
  							hover-background="rgba(0, 0, 0, 0) url(https://images.unsplash.com/photo-1593431074633-21ef64707d29?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0MjIzN30) 100% 0%/cover"
  							transition="background 0.3s ease 0s"
  							border-radius="8px"
  							display="flex"
  							flex-direction="column"
  							align-items="center"
  							justify-content="center"
  							box-sizing="border-box"
  							padding="48px 36px 72px 36px"
  							opacity="1"
  						>
  							<Icon category="fa" icon={FaTree} font="44px sans-serif" color="--light" />
  							<Text
  								font="--headline3"
  								text-transform="uppercase"
  								color="--light"
  								text-align="center"
  								margin="16px 0px 0px 0px"
  							>
  								INTO THE WILD
  							</Text>
  							<Text font="--base" color="--lightD2" text-align="center">
  								A wonderful journey into the woods and mountains that will heal your mind, body, and soul. It’ll be a trip to remember
  							</Text>
  							<Button
  								background="--color-secondary"
  								color="--darkL2"
  								padding="12px 34px 12px 34px"
  								border-radius="24px"
  								text-transform="uppercase"
  								letter-spacing="1.2px"
  								margin="24px 0px 0px 0px"
  								opacity="1"
  								box-shadow="0 12px 3px -4px rgba(3, 18, 7, 0.3)"
  							>
  								join
  							</Button>
  						</Box>
  					</Box>
  				</Box>
  			</Box>
  		</Section>
  		<Section padding="100px 0" sm-padding="40px 0" md-padding="60px 0 60px 0" quarkly-title="Step 3. Configure the Mobile-Friendly View">
  			<Override slot="SectionContent" align-items="flex-start" />
  			<Box position="relative" display="inline-block" margin="0px 0px 0px 21px" quarkly-title="Step">
  				<Text
  					as="p"
  					font="--capture"
  					margin="0 0 20px 0"
  					text-transform="uppercase"
  					color="white"
  					letter-spacing="1px"
  					overflow-wrap="normal"
  					word-break="normal"
  					white-space="normal"
  					text-indent="0"
  					text-overflow="clip"
  					hyphens="manual"
  					display="inline-block"
  					padding="0px 0px 4px 0px"
  					position="relative"
  					z-index="1"
  				>
  					STEP 3 OF 3
  				</Text>
  				<Box
  					background="rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/5f44d57c7f10ba001eace3a0/images/brush-stroke.svg?v=2020-10-16T13:20:42.549Z) 0% 0% /100% no-repeat scroll padding-box"
  					display="inline-block"
  					width="136px"
  					height="46px"
  					position="absolute"
  					top="-8px"
  					right="auto"
  					bottom="auto"
  					left="-29px"
  				/>
  			</Box>
  			<Text
  				as="h2"
  				font="--headline2"
  				md-font="--headline2"
  				margin="0px 0px 20px 0px"
  				color="--dark"
  				lg-width="80%"
  				md-width="100%"
  				sm-font="--headline3"
  			>
  				Configure the mobile-friendly view
  			</Text>
  			<Text
  				as="p"
  				font="--lead"
  				margin="0px 0 30px 0"
  				width="50%"
  				color="--darkL2"
  				sm-width="100%"
  				md-width="100%"
  				lg-width="80%"
  			>
  				In Quarkly, it's really easy to set up styles to suit a wide range of devices. See it for yourself by making the card adaptive.{" "}
  			</Text>
  			<Box display="flex" flex-direction="column" width="100%">
  				<List
  					as="ol"
  					list-style-type="none"
  					padding="0px 12px 0px 0px"
  					margin="0px 0px 16px 0px"
  					width="80%"
  					box-sizing="border-box"
  					lg-width="100%"
  				>
  					<Box
  						width="auto"
  						display="flex"
  						align-items="flex-start"
  						justify-content="flex-start"
  						quarkly-title="Item 1"
  						flex-wrap="nowrap"
  						margin="0px 0px 12px 0px"
  						sm-flex-direction="column"
  						sm-margin="0px 0px 18px 0px"
  					>
  						<Text
  							background="--color-indigo"
  							font="--base"
  							color="--lightD2"
  							padding="2px 8px 2px 8px"
  							border-radius="33px"
  							margin="16px 12px 16px 0px"
  							text-align="center"
  							flex="0 0 auto"
  							min-width="12px"
  							sm-margin="16px 12px 0px 0px"
  							border-color="--color-darkL2"
  							border-style="solid"
  							border-width="1px"
  							text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  						>
  							1
  						</Text>
  						<Box width="100%" display="flex" sm-flex-direction="column">
  							<Text
  								display="inline-block"
  								font="--base"
  								margin="20px 0px 16px 0px"
  								width="50%"
  								color="--darkL2"
  								sm-margin="12px 0px 12px 0px"
  								padding="0px 12px 0px 0px"
  								sm-width="100%"
  							>
  								Grab the page border and drag it to the left. As the page width decreases, the example card will rebuild itself. This happens thanks to custom styles at breakpoints. Let's reproduce this behavior.
  							</Text>
  							<Image
  								src="https://uploads.quarkly.io/5f44d57c7f10ba001eace3a0/images/onboarding-tutorial-page-resize.svg?v=2020-10-29T09:43:35.489Z"
  								border-radius="4px"
  								margin="24px 0px 0px 0px"
  								sm-margin="0px 0px 0px 0px"
  								object-position="0px 0px"
  								border-width="1px"
  								border-style="solid"
  								border-color="--color-grey"
  							/>
  						</Box>
  					</Box>
  					<Box
  						width="auto"
  						display="flex"
  						align-items="flex-start"
  						justify-content="flex-start"
  						flex-direction="row"
  						quarkly-title="Item 2"
  						margin="0px 0px 12px 0px"
  						sm-flex-direction="column"
  					>
  						<Text
  							background="--color-indigo"
  							font="--base"
  							color="--lightD2"
  							padding="2px 8px 2px 8px"
  							border-radius="33px"
  							margin="16px 12px 16px 0px"
  							text-align="center"
  							flex="0 0 auto"
  							min-width="12px"
  							sm-margin="16px 12px 0px 0px"
  							border-color="--color-darkL2"
  							border-style="solid"
  							border-width="1px"
  							text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  						>
  							2
  						</Text>
  						<Box width="100%" display="flex" sm-flex-direction="column">
  							<Text
  								display="inline-block"
  								font="--base"
  								margin="20px 0px 16px 0px"
  								width="50%"
  								color="--darkL2"
  								sm-margin="12px 0px 12px 0px"
  								padding="0px 12px 0px 0px"
  								sm-width="100%"
  							>
  								First return to the default page width by clicking on the arrow icon next to the window sizes in the top bar and choosing Default.
  							</Text>
  							<Image src="https://uploads.quarkly.io/5f44d57c7f10ba001eace3a0/images/onboarding-tutorial-default-breakpoint-state.svg?v=2020-10-29T09:23:14.413Z" border-radius="4px" margin="24px 0px 0px 0px" object-position="0px 0px" />
  						</Box>
  					</Box>
  					<Box
  						width="auto"
  						display="flex"
  						align-items="flex-start"
  						justify-content="flex-start"
  						flex-direction="row"
  						flex-wrap="nowrap"
  						quarkly-title="Item 3"
  						sm-flex-direction="column"
  					>
  						<Text
  							background="--color-indigo"
  							font="--base"
  							color="--lightD2"
  							padding="2px 8px 2px 8px"
  							border-radius="33px"
  							margin="16px 12px 16px 0px"
  							text-align="center"
  							flex="0 0 auto"
  							min-width="12px"
  							sm-margin="16px 12px 0px 0px"
  							border-color="--color-darkL2"
  							border-style="solid"
  							border-width="1px"
  							text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  						>
  							3
  						</Text>
  						<Box>
  							<Text
  								display="inline-block"
  								font="--base"
  								margin="20px 0px 16px 0px"
  								width="100%"
  								color="--darkL2"
  								sm-margin="12px 0px 12px 0px"
  							>
  								Now decrease the page width until you see the blue notification bar saying, "
  								<Strong
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									The changes will be applied to the screen width less than or equal to 992px (breakpoint — lg)
  								</Strong>
  								<Span
  									overflow-wrap="normal"
  									word-break="normal"
  									white-space="normal"
  									text-indent="0"
  									text-overflow="clip"
  									hyphens="manual"
  								>
  									.
  								</Span>
  								" This means you entered the zone where the{" "}
  								<Em>
  									lg
  								</Em>
  								{" "}
  								<Em>
  									breakpoint{" "}
  								</Em>
  								works.
  							</Text>
  							<Image
  								src="https://uploads.quarkly.io/5f44d57c7f10ba001eace3a0/images/onboarding-tutorial-breakpoint-lg.svg?v=2020-10-29T09:37:45.935Z"
  								border-radius="4px"
  								margin="0px 0px 16px 0px"
  								object-position="0px 0px"
  								max-width="100%"
  							/>
  						</Box>
  					</Box>
  					<Box
  						width="auto"
  						display="flex"
  						align-items="flex-start"
  						justify-content="flex-start"
  						flex-direction="row"
  						flex-wrap="nowrap"
  						quarkly-title="Item 3"
  						sm-flex-direction="column"
  					>
  						<Text
  							background="--color-indigo"
  							font="--base"
  							color="--lightD2"
  							padding="2px 8px 2px 8px"
  							border-radius="33px"
  							margin="16px 12px 16px 0px"
  							text-align="center"
  							flex="0 0 auto"
  							min-width="12px"
  							sm-margin="16px 12px 0px 0px"
  							border-color="--color-darkL2"
  							border-style="solid"
  							border-width="1px"
  							text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  						>
  							4
  						</Text>
  						<Text
  							display="inline-block"
  							font="--base"
  							margin="20px 0px 16px 0px"
  							width="100%"
  							color="--darkL2"
  							sm-margin="12px 0px 12px 0px"
  						>
  							Finally, set up styles for elements from the example:
  						</Text>
  					</Box>
  				</List>
  				<Box
  					width="100%"
  					text-align="center"
  					position="relative"
  					padding="0px 0px 0px 0px"
  					box-sizing="border-box"
  				>
  					<Text
  						text-align="center"
  						as="p"
  						font="--capture"
  						margin="0 auto 0px auto"
  						text-transform="uppercase"
  						color="--light"
  						display="inline-block"
  						background="--color-indigo"
  						padding="6px 12px 6px 12px"
  						position="relative"
  						top="13px"
  						border-style="solid"
  						border-width="1px"
  						border-color="--color-darkL2"
  						border-radius="6px"
  						text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  					>
  						WORKSPACE
  					</Text>
  					<Box
  						background="rgba(237, 242, 246, 0) repeating-linear-gradient(-45deg,--color-light 0px,--color-light 5px,rgba(0,0,0,0) 5px,rgba(0,0,0,0) 10px) center center space"
  						margin="0px 0px 20px 0px"
  						border-style="dashed"
  						border-width="1px"
  						border-color="--color-grey"
  						box-sizing="border-box"
  						padding="30px 30px 30px 30px"
  						min-height="320px"
  						text-align="left"
  					>
  						<Box
  							width="100%"
  							background="rgba(0, 0, 0, 0) url(https://images.unsplash.com/photo-1593431074633-21ef64707d29?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0MjIzN30) 50% 50%/cover"
  							hover-background="rgba(0, 0, 0, 0) url(https://images.unsplash.com/photo-1593431074633-21ef64707d29?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0MjIzN30) 100% 0%/cover"
  							transition="background 0.3s ease 0s"
  							border-radius="8px"
  							display="flex"
  							flex-direction="column"
  							align-items="center"
  							justify-content="center"
  							box-sizing="border-box"
  							padding="48px 36px 72px 36px"
  							opacity="1"
  							sm-padding="36px 36px 48px 36px"
  						>
  							<Icon category="fa" icon={FaTree} font="44px sans-serif" color="--light" />
  							<Text
  								font="--headline3"
  								text-transform="uppercase"
  								color="--light"
  								text-align="center"
  								margin="16px 0px 0px 0px"
  								lg-font="--lead"
  								lg-letter-spacing="3px"
  								md-font="normal 600 36px/1.2 -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
  								sm-font="normal 600 24px/1.2 -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
  							>
  								INTO THE WILD
  							</Text>
  							<Text
  								font="--base"
  								color="--lightD2"
  								text-align="center"
  								md-font="normal 300 16px/1.5 -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
  								md-margin="16px 0px 8px 0px"
  								sm-font="normal 300 14px/1.5 -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
  								sm-margin="10px 0px 4px 0px"
  							>
  								A wonderful journey into the woods and mountains that will heal your mind, body, and soul. It’ll be a trip to remember
  							</Text>
  							<Button
  								background="--color-secondary"
  								color="--darkL2"
  								padding="12px 34px 12px 34px"
  								border-radius="24px"
  								text-transform="uppercase"
  								letter-spacing="1.2px"
  								margin="24px 0px 0px 0px"
  								opacity="1"
  								box-shadow="0 12px 3px -4px rgba(3, 18, 7, 0.3)"
  								lg-font="--capture"
  								lg-padding="12px 24px 12px 24px"
  								md-font="normal 300 14px/1.5 -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
  								sm-font="normal 300 12px/1.5 -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
  								sm-padding="12px 18px 12px 18px"
  							>
  								join
  							</Button>
  						</Box>
  					</Box>
  					<Text
  						text-align="center"
  						as="p"
  						font="--capture"
  						margin="0 auto 0px auto"
  						text-transform="uppercase"
  						color="--light"
  						display="inline-block"
  						background="--color-indigo"
  						padding="6px 12px 6px 12px"
  						position="relative"
  						top="13px"
  						border-style="solid"
  						border-width="1px"
  						border-color="--color-darkL2"
  						border-radius="6px"
  						text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  					>
  						EXAMPLE
  					</Text>
  					<Box
  						background="rgba(237, 242, 246, 0) repeating-linear-gradient(-45deg,--color-light 0px,--color-light 5px,rgba(0,0,0,0) 5px,rgba(0,0,0,0) 10px) center center space"
  						border-style="dashed"
  						border-width="1px"
  						border-color="--color-grey"
  						box-sizing="border-box"
  						margin="0px 0px 20px 0px"
  						padding="30px 30px 30px 30px"
  						display="flex"
  						min-height="320px"
  						text-align="left"
  					>
  						<Box
  							width="100%"
  							background="rgba(0, 0, 0, 0) url(https://images.unsplash.com/photo-1593431074633-21ef64707d29?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0MjIzN30) 50% 50%/cover"
  							hover-background="rgba(0, 0, 0, 0) url(https://images.unsplash.com/photo-1593431074633-21ef64707d29?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0MjIzN30) 100% 0%/cover"
  							transition="background 0.3s ease 0s"
  							border-radius="8px"
  							display="flex"
  							flex-direction="column"
  							align-items="center"
  							justify-content="center"
  							box-sizing="border-box"
  							padding="48px 36px 72px 36px"
  							opacity="1"
  							sm-padding="36px 36px 48px 36px"
  						>
  							<Icon
  								category="fa"
  								icon={FaTree}
  								font="44px sans-serif"
  								color="--light"
  								md-font="54px sans-serif"
  								sm-font="36px sans-serif"
  								lg-font="32px sans-serif"
  							/>
  							<Text
  								font="--headline3"
  								text-transform="uppercase"
  								color="--light"
  								text-align="center"
  								margin="16px 0px 0px 0px"
  								md-font="normal 600 36px/1.2 -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
  								sm-font="normal 600 24px/1.2 -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
  								lg-font="--lead"
  								lg-letter-spacing="3px"
  							>
  								INTO THE WILD
  							</Text>
  							<Text
  								font="--base"
  								color="--lightD2"
  								text-align="center"
  								md-font="normal 300 16px/1.5 -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
  								sm-font="normal 300 14px/1.5 -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
  								sm-margin="10px 0px 4px 0px"
  								md-margin="16px 0px 8px 0px"
  							>
  								A wonderful journey into the woods and mountains that will heal your mind, body, and soul. It’ll be a trip to remember
  							</Text>
  							<Button
  								background="--color-secondary"
  								color="--darkL2"
  								padding="12px 34px 12px 34px"
  								border-radius="24px"
  								text-transform="uppercase"
  								letter-spacing="1.2px"
  								margin="24px 0px 0px 0px"
  								opacity="1"
  								box-shadow="0 12px 3px -4px rgba(3, 18, 7, 0.3)"
  								md-font="normal 300 14px/1.5 -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
  								sm-font="normal 300 12px/1.5 -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
  								sm-padding="12px 18px 12px 18px"
  								lg-font="--capture"
  								lg-padding="12px 24px 12px 24px"
  							>
  								JOIN
  							</Button>
  						</Box>
  					</Box>
  				</Box>
  			</Box>
  		</Section>
  		<Section padding="100px 0" sm-padding="40px 0" md-padding="60px 0 60px 0" quarkly-title="Try It Yourself!">
  			<Override slot="SectionContent" align-items="flex-start" />
  			<Box position="relative" display="inline-block" margin="0px 0px 0px 21px" quarkly-title="Step">
  				<Text
  					as="p"
  					font="--capture"
  					margin="0 0 20px 0"
  					text-transform="uppercase"
  					color="white"
  					letter-spacing="1px"
  					overflow-wrap="normal"
  					word-break="normal"
  					white-space="normal"
  					text-indent="0"
  					text-overflow="clip"
  					hyphens="manual"
  					display="inline-block"
  					padding="0px 0px 4px 0px"
  					position="relative"
  					z-index="1"
  				>
  					SUPERGAME!
  				</Text>
  				<Box
  					background="rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/5f44d57c7f10ba001eace3a0/images/brush-stroke.svg?v=2020-10-16T13:20:42.549Z) 0% 0% /100% no-repeat scroll padding-box"
  					display="inline-block"
  					width="136px"
  					height="46px"
  					position="absolute"
  					top="-8px"
  					right="auto"
  					bottom="auto"
  					left="-29px"
  				/>
  			</Box>
  			<Text
  				as="h2"
  				font="--headline2"
  				md-font="--headline2"
  				margin="0px 0px 20px 0px"
  				color="--dark"
  				lg-width="80%"
  				md-width="100%"
  				sm-font="--headline3"
  			>
  				Try it yourself!{" "}
  			</Text>
  			<Text
  				as="p"
  				font="--lead"
  				margin="0px 0 30px 0"
  				width="50%"
  				color="--darkL2"
  				lg-width="80%"
  				md-width="100%"
  			>
  				You've learned how to set up custom properties for the{" "}
  				<Em>
  					hover
  				</Em>
  				{" "}state and at multiple breakpoints. How about practicing a little now?
  			</Text>
  			<Box display="flex" width="100%" md-flex-direction="column" flex-direction="column">
  				<List
  					as="ol"
  					list-style-type="none"
  					padding="0px 12px 0px 0px"
  					margin="0px 0px 16px 0px"
  					width="60%"
  					box-sizing="border-box"
  					md-width="100%"
  				>
  					<Box
  						width="auto"
  						display="flex"
  						align-items="flex-start"
  						justify-content="flex-start"
  						quarkly-title="Item 1"
  						flex-wrap="nowrap"
  						margin="0px 0px 12px 0px"
  						sm-flex-direction="column"
  					>
  						<Text
  							background="--color-indigo"
  							font="--base"
  							color="--light"
  							padding="1px 6px 2px 6px"
  							border-radius="33px"
  							margin="16px 12px 16px 0px"
  							text-align="center"
  							flex="0 0 auto"
  							min-width="12px"
  							border-color="--color-darkL2"
  							border-style="solid"
  							border-width="1px"
  							sm-margin="12px 12px 0px 0px"
  							text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  						>
  							★
  						</Text>
  						<Box width="100%">
  							<Text
  								display="inline-block"
  								font="--base"
  								margin="20px 0px 8px 0px"
  								width="100%"
  								color="--darkL2"
  								sm-margin="12px 0px 0px 0px"
  							>
  								Build a new card on your own and set up styles for its elements for the hover and at breakpoints. Refer to the example if needed.
  							</Text>
  						</Box>
  					</Box>
  				</List>
  				<Box
  					width="100%"
  					text-align="center"
  					position="relative"
  					padding="0px 0px 0px 0px"
  					box-sizing="border-box"
  					md-padding="0px 0px 0px 0px"
  					md-width="100%"
  				>
  					<Text
  						text-align="center"
  						as="p"
  						font="--capture"
  						margin="0 auto 0px auto"
  						text-transform="uppercase"
  						color="--light"
  						display="inline-block"
  						background="--color-indigo"
  						padding="6px 12px 6px 12px"
  						position="relative"
  						top="13px"
  						border-style="solid"
  						border-width="1px"
  						border-color="--color-darkL2"
  						border-radius="6px"
  						text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  					>
  						WORKSPACE
  					</Text>
  					<Box
  						background="rgba(237, 242, 246, 0) repeating-linear-gradient(-45deg,--color-light 0px,--color-light 5px,rgba(0,0,0,0) 5px,rgba(0,0,0,0) 10px) center center space"
  						margin="0px 0px 20px 0px"
  						border-style="dashed"
  						border-width="1px"
  						border-color="--color-grey"
  						box-sizing="border-box"
  						padding="30px 30px 30px 30px"
  						min-height="320px"
  						text-align="left"
  						display="flex"
  					>
  						<Box
  							lg-display="flex"
  							lg-flex-direction="column"
  							lg-align-items="center"
  							lg-justify-content="center"
  							lg-padding="36px 36px 36px 36px"
  							lg-border-radius="30px"
  							lg-background="#ffffff"
  							lg-border-color="rgba(190, 190, 190, 0.65)"
  							lg-border-width="2px"
  							lg-border-style="solid"
  							lg-width="100%"
  							lg-height="320px"
  							lg-hover-box-shadow="7px 10px 10px 2px --color-grey"
  							lg-hover-transform="translateY(-10px)"
  							lg-hover-filter="grayscale(5%)"
  						>
  							<Icon
  								category="fa"
  								icon={FaTree}
  								font="64px sans-serif"
  								color="--red"
  								margin="0px 0px 12px 0px"
  								lg-font="48px sans-serif"
  								sm-font="36px sans-serif"
  								sm-margin="0px 0px 0px 0px"
  							/>
  							<Text
  								font="--headline3"
  								text-align="center"
  								margin="24px 0px 0px 0px"
  								color="--darkL2"
  								md-font="--lead"
  							>
  								Woods & Mountains
  							</Text>
  							<Text
  								font="--lead"
  								color="--grey"
  								text-align="center"
  								margin="16px 0px 0px 0px"
  								md-font="--base"
  							>
  								43 places
  							</Text>
  						</Box>
  					</Box>
  					<Text
  						text-align="center"
  						as="p"
  						font="--capture"
  						margin="0 auto 0px auto"
  						text-transform="uppercase"
  						color="--light"
  						display="inline-block"
  						background="--color-indigo"
  						padding="6px 12px 6px 12px"
  						position="relative"
  						top="13px"
  						border-style="solid"
  						border-width="1px"
  						border-color="--color-darkL2"
  						border-radius="6px"
  						text-shadow="0 1px 1px rgba(25, 30, 34, 0.3)"
  					>
  						EXAMPLE
  					</Text>
  					<Box
  						background="rgba(237, 242, 246, 0) repeating-linear-gradient(-45deg,--color-light 0px,--color-light 5px,rgba(0,0,0,0) 5px,rgba(0,0,0,0) 10px) center center space"
  						border-style="dashed"
  						border-width="1px"
  						border-color="--color-grey"
  						box-sizing="border-box"
  						margin="0px 0px 20px 0px"
  						padding="30px 30px 30px 30px"
  						display="flex"
  						min-height="320px"
  						text-align="left"
  					>
  						<Box
  							width="100%"
  							border-radius="24px"
  							height="320px"
  							display="flex"
  							flex-direction="column"
  							align-items="center"
  							justify-content="center"
  							padding="36px"
  							hover-background="#FFF"
  							box-shadow="0 0px 0px 0px rgba(0, 0, 0, 0.1)"
  							hover-border-color="--color-lightD1"
  							transform="translateY(0px)"
  							hover-transform="translateY(-18px)"
  							transition="transform --transitionDuration-fast --transitionTimingFunction-easeInOut 0s,box-shadow --transitionDuration-fast --transitionTimingFunction-easeInOut 0s"
  							hover-box-shadow="--l"
  							cursor="pointer"
  							background="#FFF"
  							border-width="1px"
  							border-style="solid"
  							border-color="--color-lightD1"
  						>
  							<Icon
  								category="fa"
  								icon={FaTree}
  								font="64px sans-serif"
  								color="--red"
  								margin="0px 0px 12px 0px"
  								lg-font="48px sans-serif"
  								sm-font="36px sans-serif"
  								sm-margin="0px 0px 0px 0px"
  							/>
  							<Text
  								font="--headline3"
  								text-align="center"
  								margin="24px 0px 0px 0px"
  								color="--darkL2"
  								md-font="--lead"
  							>
  								Woods & Mountains
  							</Text>
  							<Text
  								font="--lead"
  								color="--grey"
  								text-align="center"
  								margin="16px 0px 0px 0px"
  								md-font="--base"
  							>
  								43 places
  							</Text>
  						</Box>
  					</Box>
  				</Box>
  			</Box>
  		</Section>
  		<Section padding="100px 0" sm-padding="40px 0 60px 0" md-padding="60px 0 80px 0" quarkly-title="What's Next?">
  			<Override slot="SectionContent" align-items="flex-start" />
  			<Box position="relative" display="inline-block" margin="0px 0px 0px 21px" quarkly-title="Step">
  				<Text
  					as="p"
  					font="--capture"
  					margin="0 0 20px -10px"
  					text-transform="uppercase"
  					color="white"
  					letter-spacing="1px"
  					overflow-wrap="normal"
  					word-break="normal"
  					white-space="normal"
  					text-indent="0"
  					text-overflow="clip"
  					hyphens="manual"
  					display="inline-block"
  					padding="0px 0px 4px 0px"
  					position="relative"
  					z-index="1"
  				>
  					WHAT'S next?
  				</Text>
  				<Box
  					background="rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/5f44d57c7f10ba001eace3a0/images/brush-stroke.svg?v=2020-10-16T13:20:42.549Z) 0% 0% /100% no-repeat scroll padding-box"
  					display="inline-block"
  					width="136px"
  					height="46px"
  					position="absolute"
  					top="-8px"
  					right="auto"
  					bottom="auto"
  					left="-29px"
  				/>
  			</Box>
  			<Text
  				as="h2"
  				font="--headline2"
  				md-font="--headline2"
  				margin="0px 0px 20px 0px"
  				color="--dark"
  				lg-width="80%"
  				md-width="100%"
  				sm-font="--headline3"
  			>
  				Move to the next stage
  			</Text>
  			<Text
  				as="p"
  				font="--lead"
  				margin="0px 0 0px 0"
  				width="66.66%"
  				color="--darkL2"
  				lg-width="80%"
  				md-width="100%"
  			>
  				Congrats! You've got new hands-on skills to work with Quarkly elements! In the next stage you're going to get familiar with components and learn how to:
  			</Text>
  			<List margin="0px 0px 16px 0px">
  				<Text font="--base">
  					Understand their benefits
  				</Text>
  				<Text font="--base">
  					Create and update components
  				</Text>
  				<Text font="--base">
  					Reset changes and detach components
  				</Text>
  			</List>
  			<Text
  				as="p"
  				font="--lead"
  				margin="0px 0 16px 0"
  				width="50%"
  				color="--darkL2"
  				md-width="100%"
  			>
  				The new material will be illustrated with the familiar card:
  			</Text>
  			<Components.CardExample margin="0px 32px 48px 0px" max-width="480px" />
  			<Box position="relative" display="inline-block" margin="0px 0px 0px 0px" quarkly-title="Step">
  				<Text
  					font="italic 700 28px/1.2 --fontFamily-sans"
  					overflow-wrap="normal"
  					word-break="normal"
  					white-space="normal"
  					text-indent="0"
  					text-overflow="clip"
  					hyphens="manual"
  					color="--dark"
  					margin="0px 0px 16px 0px"
  					position="relative"
  					z-index="1"
  					sm-font="italic 700 20px/1.2 --fontFamily-sans"
  				>
  					Stage 3. Components →
  				</Text>
  				<Box
  					background="rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/5f44d57c7f10ba001eace3a0/images/onboarding-next-stage-bg.svg?v=2020-10-27T09:36:49.534Z) center/contain no-repeat scroll padding-box"
  					display="inline-block"
  					width="125.874px"
  					height="47.268px"
  					position="absolute"
  					top="-4px"
  					left="-13px"
  					right="auto"
  					bottom="auto"
  					sm-width="92.874px"
  					sm-top="-9px"
  				/>
  			</Box>
  		</Section>
  		<Link
  			font={"--capture"}
  			font-size={"10px"}
  			position={"fixed"}
  			bottom={"12px"}
  			right={"12px"}
  			z-index={"4"}
  			border-radius={"4px"}
  			padding={"5px 12px 4px"}
  			background-color={"--dark"}
  			opacity={"0.6"}
  			hover-opacity={"1"}
  			color={"--light"}
  			cursor={"pointer"}
  			transition={"--opacityOut"}
  			quarkly-title={"Badge"}
  			text-decoration-line={"initial"}
  			href={"https://quarkly.io/"}
  			target={"_blank"}
  		>
  			Made on Quarkly
  		</Link>
  	</Theme>;
  });