@charset "UTF-8";
/* CSS Document */

.text-image .columns {
	padding: var(--widget-padding);
	grid-template-columns: 1.2fr 0.8fr;
	gap: var(--std-gap);
	align-items: center;
}

.text-image.reverse .columns {
	grid-template-columns: 0.8fr 1.2fr;
}

.text-box h5 {
	font-size: 22px;
	line-height: 32px;
	font-weight: 300;
	font-style: italic;
	color: var(--shd-mid);
}

.text-image .text-box .list {
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.text-image .text-box .list-item {
	grid-template-columns: auto 1fr;
	gap: 5px;
	align-items: center;
}

.text-image .text-box .list-item svg {
	color: var(--act-alt-light);
}

.text-image .text-box .list-item span {
	font-weight: 500;
}

.text-image .img-column {
	position: relative;
	padding: 20px;
}

.text-image.reverse .img-column {
	order: -1;
}

.text-image .img-column .img-underlay {
	position: absolute;
	background-color: var(--act-primary-light);
	width: 50%;
	justify-self: end;
	height: 100%;
	border-radius: var(--big-radius);
}

.text-image .img-column img {
	width: 100%;
	z-index: 9;
	border-radius: var(--big-radius);
}

.text-image .img-column .img-icon {
	display: flex;
	position: absolute;
	background-color: var(--act-alt);
	width: 60px;
	height: 60px;
	padding: 8px;
	border-radius: var(--rounded);
	z-index: 9;
	bottom: -10px;
	left: -10px;
}


@media screen and (max-width: 1180px) and (orientation: portrait),
screen and (max-width: 1024px){ /* original breakpoint 1024px */
	.text-image .columns {
		grid-template-columns: 1fr 1fr;
	}
	
	.text-image .text-box .list {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 768px) {
	.text-image .columns, .text-image.reverse .columns {
		grid-template-columns: 1fr;
	}
}