.column-item + .column-item {
	margin-top: 32px;
}

.column {
	border-radius: 10px;
	overflow: hidden;
}

.column__image {
	height: 100%;
	display: flex;
}

.column__deatils {
	padding: 30px 22px;
}

.column-text--image-contained .column__image {
	margin: 30px 0 0;
	padding-left: 22px;
	padding-right: 22px;
	height: 187px;
}

.column-text.bg-dark,
.column-text.bg-dark-gray {
	color: var(--text-color);
}

.column-text.bg-dark h2,
.column-text.bg-dark .sub-heading,
.column-text.bg-dark-gray h2,
.column-text.bg-dark-gray .sub-heading,
.column-text.bg-dark h3,
.column-text.bg-dark-gray h3,
.column-text.bg-dark h4,
.column-text.bg-dark-gray h4,
.column-text.bg-dark h5,
.column-text.bg-dark-gray h5,
.column-text.bg-dark h6,
.column-text.bg-dark-gray h6 {
	color: var(--black);
}

.column-text--three .column--image-sml--reverse .column__image {
	margin-top: 30px;
	margin-bottom: 0;
}

.column-text--image-screenshot {
	display: block!important;
	.column__image {
		background-color: #eaeaea;
		padding: 1rem;
	}

	.column__image-tag {
		object-fit: contain;
		width: auto;
		height: auto;
		object-position: center;
		margin-inline: auto;
		border-radius: 10px; /* overflow: hidden; */
	}
}

/* Screenshot background variations */
.column-text--screenshot-gray .column__image {
	background-color: #eaeaea;
}

.column-text--screenshot-transparent .column__image {
	background-color: transparent;
}

/* Full width card styling */
.column-text--full-width {
	width: 100% !important;
	max-width: 100% !important;
}

/* Ensure full width cards break out of grid properly */
.column-text--full-width .column {
	width: 100%;
}

/* Responsive adjustments for full width cards */
@media (min-width: 1200px) {
	.column-text--full-width {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media (min-width: 768px) {
	.column__image {
		height: 100%;
	}

	.column__deatils {
		padding: 40px;
	}

	.column-text--image-contained .column__image {
		margin-top: 40px;
		padding-left: 40px;
		padding-right: 40px;
		height: 396px;
	}
}

@media (min-width: 1200px) {
	.column-text__row {
		gap: var(--bs-gutter-x) 0;
		justify-content: center;
	}

	.column-item + .column-item {
		margin-top: 0;
	}

	.column {
		display: flex;
		flex-wrap: wrap;
		height: 100%;
	}

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

	.column__image,
	.column__deatils {
		width: 100%;
	}

	.column__deatils {
		padding: 60px 40px;
	}

	.column__image {
		height: 394px;
	}

	.column-text--image-contained .column__image {
		height: 334px;
		margin-top: 60px;
	}

	.column--reverse.column-text--image-contained .column__image {
		margin-top: 0;
		margin-bottom: 60px;
	}

	.column-text--three .column__image {
		height: 232px;
	}

	.column-text--three .column-text--image-contained .column__image {
		height: 172px;
	}

	.column-text--three .column--image-sml--reverse .column__image {
		margin-top: 60px;
		margin-bottom: 0;
		width: 100%;
	}

	/* Left/Right positioning for full-width cards only */
	.column-text--full-width.column--left {
		flex-direction: row;
	}

	.column-text--full-width.column--right {
		flex-direction: row-reverse;
	}

	.column-text--full-width.column--left .column__image,
	.column-text--full-width.column--right .column__image {
		width: 70%;
		flex: 0 0 70%;
		height: 100% !important;
		min-height: 400px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 0;
		/* padding: 1rem; */
	}

	.column-text--full-width.column--left .column__deatils,
	.column-text--full-width.column--right .column__deatils {
		width: 30%;
		flex: 0 0 30%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.image-text-card-item {
		justify-content: space-between;
		box-shadow: 0 0 7px 3px #0003;
	}

	.column-text + .column-text {
		margin-top: -64px;
	}
}

/* Mobile responsive behavior for left/right positioning */
@media (max-width: 1199px) {
	.column-text--full-width.column--left,
	.column-text--full-width.column--right {
		flex-direction: column;
	}

	.column-text--full-width.column--left .column__image,
	.column-text--full-width.column--right .column__image,
	.column-text--full-width.column--left .column__deatils,
	.column-text--full-width.column--right .column__deatils {
		width: 100%;
		flex: none;
	}

	.column-text--full-width.column--left .column__image,
	.column-text--full-width.column--right .column__image {
		height: 100%;
		/* min-height: 300px; */
	}
}