.icon-tile-row {
	--tile-color: var(--primary-color-100);
	--text-color: var(--black);
	--icon-color: #B7C1EA;
    --leading-tight: 1.2;
}

.icon-tile-row .widget-title {
	line-height: var(--leading-tight);
    font-family: var(--font-noka);
    font-weight: var(--font-weight-extrabold);
}

.icon-tile-row .widget-subtitle {
	font-weight: var(--font-weight-semibold);
	font-size: var(--text-3xl);
	line-height: var(--leading-tight);
    color: var(--green);
    font-family: var(--font-noka);
}

.icon-tile-row .widget-desc {
	line-height: var(--leading-normal);
    font-family: var(--font-body);
    font-weight: var(--font-weight-normal);
    color: var(--black);
}

.icon-tile-row .slide {
	background-color: var(--purple);
    border-radius: var(--rounded-xl);
}

.icon-tile-row .slide-icon {
	font-weight: var(--font-weight-normal);
	font-size: var(--text-lg);
	color: var(--icon-color);
}

.icon-tile-row .slide-title {
	font-size: var(--text-xs);
	line-height: var(--leading-tight);
    color: var(--white);
    font-family: var(--font-noka);
	font-weight: var(--font-weight-semibold);
}

.ccl-v2-widget.icon-tile-row .widget-view-all {
    background-color: transparent;
    border: 3px solid var(--green);
    color: var(--purple-deep);
}

@container (min-width: 40em) {
	.icon-tile-row .slide-title {
		font-size: var(--text-lg);
		line-height: var(--leading-tight);
	}

	.icon-tile-row .slide-icon {
		font-size: var(--text-3xl);
	}
}

@media (hover: hover) {
	.icon-tile-row .slide:hover {
		background-color: var(--purple-deep);
	}

	.icon-tile-row .slide:hover .slide-icon {
		color: var(--green);
	}
}