.content-grid,
.full-size {
	--_padding-inline: 4rem;
	--_content-max-width: 1100px;

	display: grid;
	grid-template-columns:
		[main-start]
		minmax(var(--_padding-inline), 1fr)
		[content-start]
		min(100% - (var(--_padding-inline) * 2), var(--_content-max-width))
		[content-end]
		minmax(var(--_padding-inline), 1fr)
		[main-end];
}

.content-grid > :not(.full-size),
.full-size > :not(.full-size) {
	grid-column: content;
}

.content-grid > .full-size {
	grid-column: main;

	display: grid;
	grid-template-columns: inherit;
}

.breakout-right,
.breakout-left {
	--_padding-inline: 4rem;
	--_content-max-width: 1100px;
	--_gap: 78px;
	--_padding-inside: 68px;

	display: grid;
	align-items: center;
	grid-template-columns:
		[main-start]
		minmax(var(--_padding-inline), 1fr)
		[content-start]
		min(
			(
					100% -
						(
							(var(--_padding-inline) * 2) + (var(--_padding-inside) * 2) +
								(var(--_gap) * 2)
						)
				) / 2,
			(var(--_content-max-width)) / 2
		)
		[gap-left-start]
		var(--_gap)
		[gap-left-end padding-left-start]
		var(--_padding-inside)
		[padding-left-end padding-right-start]
		var(--_padding-inside)
		[padding-right-end gap-right-start]
		var(--_gap)
		[gap-right-end]
		min(
			(
					100% -
						(
							(var(--_padding-inline) * 2) + (var(--_padding-inside) * 2) +
								(var(--_gap) * 2)
						)
				) / 2,
			(var(--_content-max-width)) / 2
		)
		[content-end]
		minmax(var(--_padding-inline), 1fr)
		[main-end];
}

.breakout-right .text {
	grid-column-start: content-start;
	grid-column-end: gap-left-start;
}

.breakout-right .image-container {
	grid-column-start: gap-left-end;
	grid-column-end: main-end;
	border-radius: var(--br-lg) 0 0 var(--br-lg);
}

.breakout-right form {
	grid-column-start: gap-left-end;
	grid-column-end: content-end;
}

.image-container {
	overflow: hidden;
}

.image-container img {
	object-fit: cover;
	object-position: center;
	filter: grayscale(1);
}

.breakout-left .image-container {
	grid-column-start: main-start;
	grid-column-end: gap-right-start;
	border-radius: 0 var(--br-lg) var(--br-lg) 0;
}
.breakout-left .text {
	grid-column-start: gap-right-end;
	grid-column-end: content-end;
}

.logo {
	width: 300px;
}

nav,
h1 {
	margin-bottom: 6rem;
}

.section-subtitle {
	font-size: clamp(1rem, 3.002vw + 0.223rem, 2.625rem);
	margin-bottom: 3.2rem;
	font-weight: var(--fw-600);
}

.btn {
	display: flex;
	align-items: center;
	width: max-content;
	border-radius: 0.5625rem;
	padding: 0.625rem;
	padding-right: 0.35rem;
	gap: 0.25rem;
	font-size: 1.125rem;
}

.btn-accent-500 {
	background: var(--clr-accent-500);
	color: var(--clr-light-100);
}

.btn-dark-900 {
	background: var(--clr-dark-900);
	color: var(--clr-light-100);
}

.card {
	box-shadow: var(--card-box-shadow);
}

/* --- HERO ------------------------- */

.hero {
	background-image: linear-gradient(
			var(--clr-dark-900-80),
			var(--clr-dark-900-80)
		),
		url(../img/phil-hugh-center.png);
	background-position: top right;
	background-size: cover;
	background-repeat: no-repeat;

	color: var(--clr-light-100);
	padding-block: 1.75rem 14.25rem;
}

.hero-subtitle {
	margin-bottom: 2rem;
	font-size: clamp(1.375rem, 1.155vw + 1.076rem, 2rem);
}

.hero .hero-flex {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.hero .hero-text {
	flex: 1;
}
.hero .hero-video {
	flex: 1;
}

.hero .btn {
	font-size: 1.6rem;
	gap: 0.36rem;
	border-radius: 0.8rem;
	padding: 0.5rem 1rem;
	padding-inline-end: 0.8rem;
}

/* --- PROBLEMS ------------------------- */

.problems {
	display: flex;
	justify-content: space-between;
	gap: 1.84rem;
	position: relative;
	top: -140px;
}

.problems .card {
	border-radius: var(--br-sm);
	padding: 1.625rem;
	display: flex;
	gap: 2rem;
	align-items: center;
	flex-direction: column;
	width: 100%;
}

.problems .card:nth-of-type(1),
.problems .card:nth-of-type(3) {
	position: relative;
	top: 52px;
}

/* --- BENEFITS ------------------------- */

.benefits .breakout-right:nth-of-type(2),
.benefits .breakout-left {
	margin-bottom: 6.5rem;
}

.benefits .card {
	display: flex;
	gap: 2rem;
	align-items: center;
	padding: 1.375rem 1rem;
	border-radius: var(--br-sm);
	background-color: var(--clr-light-100);
}

.benefits .card:not(:last-of-type) {
	margin-bottom: 2rem;
}
/* --- GUARANTEE ------------------------- */

.guarantee {
	background-image: linear-gradient(
			var(--clr-dark-900-80),
			var(--clr-dark-900-80)
		),
		url(../img/business-meeting-high.png);
	background-position: bottom right;
	background-size: cover;
	background-repeat: no-repeat;

	color: var(--clr-light-100);
}

.guarantee .content {
	max-width: 45%;
	margin-inline: auto;
}

.guarantee .content p:first-of-type {
	margin-bottom: 0.75rem;
}

.guarantee .content p:not(:first-of-type):not(:last-of-type) {
	margin-bottom: 0.25rem;
}

/* --- SHARE ------------------------- */

.share .image-container {
	display: flex;
	gap: 2rem;
}

.share .image-container img {
	aspect-ratio: 120 / 139;
}

.share .image-container div {
	overflow: hidden;
	max-height: 300px;
}

.share .image-container div:nth-of-type(1) {
	border-radius: 0 var(--br-lg) var(--br-lg) 0;
}

.share .image-container div:not(:first-of-type) {
	border-radius: var(--br-lg);
}

.share .text p:first-of-type {
	font-size: 1.375rem;
}

.share .text p:not(:last-of-type) {
	margin-bottom: 2rem;
}

/* --- CALL TO ACTION ------------------------- */

.call-to-action p:nth-of-type(2) {
	margin-block: 1rem 3.25rem;
}

.call-to-action p:nth-of-type(3) {
	font-size: 1.625rem;
	margin-block: 0.4rem 0.7rem;
}

form {
	box-shadow: var(--card-box-shadow);
	border-radius: var(--br-lg);
	padding: 3.25rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2.25rem;
}

.adjustable-inputs {
	display: flex;
	flex-wrap: wrap;
	gap: 2.25rem;
}

.adjustable-inputs .input-group {
	flex: 1 1 250px;
}

.input-group,
.submit-group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

button.submit {
	margin-top: 2rem;
}

.submit-group {
	gap: 0.5rem;
}

.radio-group {
	display: flex;
	gap: 0.8rem;
	align-items: center;
}

.submit-group a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.submit-group .btn {
	text-decoration: none;
}

.label {
	font-size: 1.375rem;
}

input[type='text'],
input[type='number'],
input[type='email'] {
	background-color: var(--clr-light-200);
	border-radius: var(--br-sm);
	padding: 1rem 1rem;
}

::placeholder {
	color: var(--clr-dark-900-60);
	font-size: 1.125rem;
	/* Firefox */
	opacity: 1;
}

/* Edge 12 -18 */
::-ms-input-placeholder {
	color: var(--clr-dark-900-60);
	font-size: 1.125rem;
}

.stripe {
	display: flex;
	gap: 0.3rem;
	margin-bottom: 1rem;
}

.issues-msg {
	margin-bottom: 2rem;
}

.testimonials h2,
.benefits h2,
.share h2 {
	margin-bottom: 5rem;
}

/* TESTIMONIALS -------------------------------------- */

.testimonial-cards {
	display: flex;
	gap: 2rem;
	overflow-x: scroll;
	align-items: flex-start;
}

.testimonial-cards .card {
	border-radius: var(--br-sm);
	padding: 1.625rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 300px;
}

.testimonial-cards header {
	display: flex;
	gap: 1rem;
}

.testimonial-cards img {
	border-radius: 50%;
}

footer {
	padding-bottom: 3.25rem;
	color: var(--clr-light-100-50) !important;
}

@media screen and (width < 1100px) {
	h1 {
		margin-bottom: 1rem;
	}

	.hero .hero-flex {
		flex-direction: column;
	}

	.hero .hero-video {
		margin-bottom: 2rem;
	}
}

@media screen and (width < 930px) {
	.content-grid,
	.breakout-left,
	.breakout-right {
		--_padding-inline: 2rem;
	}

	.problems {
		flex-direction: column;
		top: -70px;
	}

	.problems .card {
		flex-direction: row;
		position: static !important;
	}

	.image-container {
		max-height: 15rem;
		object-position: top;
	}

	.breakout-right .text,
	.breakout-left .text {
		grid-column: content;
	}

	.breakout-right .image-container {
		grid-column-start: content-start;
		grid-column-end: main-end;
	}

	.breakout-left .image-container {
		grid-column-start: main-start;
		grid-column-end: content-end;
	}

	.share .image-container {
		grid-column: main;
		border-radius: 0;
	}

	.share .image-container div:nth-of-type(3) {
		border-radius: var(--br-lg) 0 0 var(--br-lg);
	}

	.benefits .breakout-right {
		margin-bottom: 4rem;
	}

	.benefits .image-container {
		margin-bottom: 1rem;
	}

	.benefits .breakout-right .image-container {
		grid-row-start: 1;
	}

	.guarantee .content {
		max-width: 90%;
		margin-inline: auto;
	}

	.share .image-container {
		margin-bottom: 2.625rem;
	}

	.call-to-action p:nth-of-type(3),
	.call-to-action p:nth-of-type(4) {
		text-align: center;
	}

	.call-to-action p:nth-of-type(4) {
		margin-bottom: 1.125rem;
	}
	.breakout-right form {
		grid-column: content;
	}
}