:root {
	--color-orange: hsl(22, 89%, 52%);
	--color-pale-orange: hsl(22, 100%, 69%);
	--color-dark-blue: hsl(220, 50%, 17%);
	--color-grayish-blue: hsl(221, 23%, 58%);
	--color-gray: hsl(198, 28%, 93%);
	--color-white: hsl(0, 0%, 100%);

	--font-size-normal: 1rem;
	--font-barlow: "Barlow", sans-serif;

	--max-width: 1110px;
	--side-margins: 0 24px;
	--image-radius: 20px;
}
html {
	overflow-x: hidden;
}
body {
	font-family: var(--font-barlow);
	overflow-x: hidden;
}
img {
	vertical-align: text-top;
}
p,
h1,
h2,
h3 {
	margin: 0;
}
a {
	text-decoration: none;
}
.debug {
	outline: 1px solid rgb(255, 78, 78);
}
.wrapper {
	margin: var(--side-margins);
}

/* ##### HERO ##### */
.hero {
	max-width: var(--max-width);
}
.hero__top-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 23px;
}
.cta {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 150px;
	min-height: 48px;
	padding-block: 11px;
	padding-inline: 13px;
	border-radius: 8px;
	color: var(--color-dark-blue);
	background-color: var(--color-gray);
	text-transform: uppercase;
	font-size: var(--font-size-normal);
	font-weight: 700;
}
.cta:hover {
	background-color: var(--color-dark-blue);
	color: var(--color-white);
}
.hero__content-container {
	margin-top: 63px;
	display: flex;
	flex-direction: column;
	gap: 64px;
}
.hero__heading {
	font-size: 3rem;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--color-dark-blue);
}
.paragraph {
	font-size: var(--font-size-normal);
	font-weight: 500;
	color: var(--color-grayish-blue);
	line-height: 1.625;
}
.hero__paragraph {
	margin: 32px 0;
}
.hero__content-container > div .cta {
	background-color: var(--color-orange);
	color: var(--color-white);
}
.hero__content-container > div .cta:hover {
	background-color: var(--color-pale-orange);
}
.hero__content-container > div span {
	text-transform: uppercase;
	font-weight: 700;
	font-size: var(--font-size-normal);
	color: var(--color-grayish-blue);
	margin-left: clamp(1rem, 2vw, 1.5rem);
}
.hero__image {
	max-width: 372px;
	border-radius: var(--image-radius);
}

/* ##### DIVIDER ##### */
.divider {
	display: flex;
	flex-direction: column;
	gap: 75px;
	margin-top: 24px;
	max-width: var(--max-width);
}
.divider__image-group {
	display: flex;
	flex-direction: row-reverse;
	gap: 24px;
}
.divider__first-image {
	border-radius: var(--image-radius);
	max-width: 129px;
}
.divider__second-image {
	border-radius: var(--image-radius);
	max-width: 220px;
}
.divider__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	text-align: center;
}
.divider__heading {
	font-size: 2rem;
	font-weight: 900;
	text-transform: uppercase;
	padding-inline: 1em;
	color: var(--color-dark-blue);
}
.divider__image-container {
	position: relative;
}
.divider__image-container::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--color-orange);
	mix-blend-mode: multiply;
	left: 0;
	top: 0;
	border-radius: var(--image-radius);
}

/* ##### FEATURES ##### */
.features {
	display: grid;
	grid-template-columns: 327px;
	justify-content: center;
	gap: 64px;
	margin-top: 111px;
}
.feature {
	text-align: center;
}
.feature__img {
	width: 65px;
	height: 65px;
	border-radius: 16px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-orange);
}
.feature__heading {
	font-weight: 900;
	font-size: 1.5rem;
	line-height: 1.16;
	text-transform: uppercase;
	color: var(--color-dark-blue);
	margin-block: 48px 24px;
}
.feature__paragraph {
	font-size: var(--font-size-normal);
	color: var(--color-grayish-blue);
	line-height: 1.625;
}

/* ##### FOOTER ##### */
.footer {
	margin-block: 96px 50px;
}
.footer__paragraph {
	text-align: center;
	color: var(--color-grayish-blue);
	font-size: var(--font-size-normal);
}
.footer__paragraph small {
	font-size: inherit;
}

@media (min-width: 450px) and (max-width: 767px) {
	.hero__content-container {
		text-align: center;
		max-width: min(100%, 372px);
		margin-inline: auto;
	}
	.divider__image-group {
		justify-content: center;
	}
	.divider__content {
		max-width: min(100%, 372px);
		margin-inline: auto;
	}
}
@media (min-width: 768px) {
	:root {
		--side-margins: 0 40px;
	}
	.hero__top-container {
		margin-top: 40px;
	}
	.hero__content-container {
		margin-top: 62px;
		flex-direction: row;
		align-items: center;
		gap: 69px;
	}
	.hero__content {
		max-width: 339px;
		flex-shrink: 0;
	}
	.hero__paragraph {
		margin: 34px 0 39px;
	}
	.hero__image {
		max-width: 478px;
	}
	.divider {
		margin-top: 40px;
		gap: 72px;
	}
	.divider__image-group {
		justify-content: center;
		gap: 30px;
	}
	.divider__first-image {
		max-width: 214px;
	}
	.divider__second-image {
		max-width: 445px;
	}
	.divider__content {
		flex-direction: row;
		gap: 30px;
		justify-content: center;
	}
	.divider__heading {
		padding: 0;
		flex: 0 1 214px;
		text-align: left;
	}
	.divider__paragraph {
		flex: 0 1 445px;
		text-align: center;
	}
	.features {
		grid-template-columns: 281px 281px;
		gap: 69px 72px;
		margin-top: 142px;
	}
	.feature {
		text-align: left;
	}
	.footer {
		margin-block: 142px 43px;
	}
}
@media (min-width: 965px) {
	.hero__content-container {
		gap: 0;
		justify-content: space-between;
	}
}
@media (min-width: 1200px) {
	:root {
		--side-margins: 0 auto;
	}
	.hero__top-container {
		margin-top: 45px;
	}
	.hero__content-container {
		margin-top: 83px;
	}
	.hero__content {
		max-width: 445px;
	}
	.hero__heading {
		font-size: 3.5rem;
	}
	.hero__paragraph {
		font-size: 1.125rem;
		margin: 24px 0 40px;
	}
	.hero__image {
		max-width: 540px;
	}
	.divider {
		margin-top: 30px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.divider__first-image {
		max-width: 255px;
	}
	.divider__second-image {
		max-width: 445px;
	}
	.divider__content {
		flex-direction: column;
		justify-content: flex-start;
		gap: 27px;
	}
	.divider__heading {
		flex-basis: auto;
	}
	.divider__paragraph {
		text-align: left;
		flex-basis: auto;
	}
	.features {
		grid-template-columns: repeat(4, 255px);
		gap: 30px;
		margin-top: 168px;
	}
	.footer {
		margin-block: 128px 39px;
	}
}