/* harder to rename .wrapper, because you've coupled styles together. */
main,
.modal {
	--padding-space: 4.375;
	width: 100%;
	margin: 0 auto;
}

main {
	.wrapper {
		display: flex;
		flex-direction: column;
	}
}

.modal {
	.wrapper {
		display: flex;
		flex-direction: column;
	}
}

main {
	padding-block: 0 var(--space-500);

	.mob-image {
		width: 100%;
		margin-block-end: var(--space-500);
	}
	.wrapper {
		margin-inline: 2rem;
		gap: var(--space-500);
	}
	.cta-wrapper {
		display: grid;
		gap: var(--space-300);
		margin-inline: auto;
		max-width: 31.5rem;
	}
	picture.tab-image {
		display: none;
	}
	.cta-layout {
		display: grid;
		gap: var(--space-300);
	}
}

.modal {
	display: flex;
	padding-block: calc(var(--padding-space) * 1rem + 79px)
		calc(var(--padding-space) * 1rem);
	.wrapper {
		gap: var(--space-400);
		height: inherit;
		max-width: 20.44rem;
		margin: 0 auto;
	}
	img {
		width: 4rem;
	}
	.modal-btn {
		margin-block-start: auto;
	}
}