.block-ci {
	display: flex;
	flex-wrap: wrap;
	column-gap: 40px;
	row-gap: 16px;
	align-items: center;
	text-align: center;
}

.block-ci > * {
	flex-basis: 300px;
	flex-grow: 1;
}

.block-ci--reverse {
	flex-direction: row-reverse;
}

.block-ci__content .wp-block-buttons {
	justify-content: center;
}

:where(.block-ci.is-style-desktop-arrow) .block-ci__content::before {
	background-color: currentColor;
	content: none;
	display: block;
	-webkit-mask-image: url("https://www.thecookierookie.com/wp-content/themes/thecookierookie-2024/blocks/content-image/curvy-arrow.svg");
	mask-image: url("https://www.thecookierookie.com/wp-content/themes/thecookierookie-2024/blocks/content-image/curvy-arrow.svg");
	width: 69px;
	height: 50px;
	margin-block-end: var(--wp--custom--layout--block-gap);
}

:where(.block-ci--reverse.is-style-desktop-arrow) .block-ci__content::before {
	margin-inline-start: auto;
	transform: scaleX(-1);
}

@media only screen and (min-width: 704px) {
	.block-ci {
		text-align: left;
	}

	.block-ci--reverse {
		text-align: right;
	}

	:where(.block-ci.is-style-desktop-arrow) .block-ci__content::before {
		content: "";
	}

	.block-ci__content .wp-block-buttons {
		justify-content: flex-start;
	}
}

@media only screen and (min-width: 768px) {
	.block-ci,
	.block-ci.has-background,
	.editor-styles-wrapper .block-ci.has-background {
		padding-inline-end: 40px;
	}
	.block-ci--reverse,
	.block-ci--reverse.has-background,
	.editor-styles-wrapper .block-ci--reverse.has-background {
		padding-inline-start: 40px;
		padding-inline-end: 16px;
	}
}