.goal-image-panels .greyd_icon_panels,
.goal-image-panels.wp-block-greyd-forms-iconpanels .img_pnl_wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: calc(0.3vw + 0.2rem);
}

@media screen and (max-width: 992px) {

	.goal-image-panels .greyd_icon_panels,
	.goal-image-panels.wp-block-greyd-forms-iconpanels {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width: 576px) {

	.goal-image-panels .greyd_icon_panels,
	.goal-image-panels.wp-block-greyd-forms-iconpanels {
		grid-template-columns: 1fr;
	}
}

.goal-image-panels .greyd_icon_panel.greyd_icon_panel.greyd_icon_panel:not(.selected) .when-selected,
.goal-image-panels .greyd_icon_panel.greyd_icon_panel.greyd_icon_panel.selected .when-unselected {
	display: none;
}

.goal-image-panels .greyd_icon_panel.greyd_icon_panel.greyd_icon_panel {
	position: relative;
	gap: calc(0.5vw + 0.3rem);
	--color: #fff;
	color: var(--color) !important;
	background-color: var(--bg-color) !important;
	box-shadow: 0px 4px 10px 0px #00000024 !important;
	transition: all 0.2s ease;
}

.goal-image-panels .greyd_icon_panel.greyd_icon_panel.greyd_icon_panel.selected {
	box-shadow: 0px 4px 20px 0px #0000004D !important;
}

/**
 * Elements
 */
.goal-image-panels .greyd_icon_panel.greyd_icon_panel.greyd_icon_panel .img_wrap {
	order: 1;
	margin-bottom: 0;
}

.goal-image-panels .greyd_icon_panel.greyd_icon_panel.greyd_icon_panel span {
	font-weight: 600;
	flex-grow: 1;
}

.goal-image-panels .greyd_icon_panel.greyd_icon_panel.greyd_icon_panel img {
	filter: var(--filter);
}

.goal-image-panels .greyd_icon_panel.greyd_icon_panel.greyd_icon_panel svg {
	height: 36px;
	width: 36px;
}

/**
 * Colorways
 */
.greyd_icon_panel.greyd_icon_panel.greyd_icon_panel.purple {
	--bg-color: var(--color21);
	--filter: invert(98%) sepia(67%) saturate(328%) hue-rotate(282deg) brightness(98%) contrast(86%);
}

.greyd_icon_panel.greyd_icon_panel.greyd_icon_panel.darkpurple {
	--bg-color: var(--color31);
	--filter: invert(100%) sepia(8%) saturate(926%) hue-rotate(226deg) brightness(93%) contrast(84%);
}

.greyd_icon_panel.greyd_icon_panel.greyd_icon_panel.lightpurple {
	--color: var(--color61);
	--bg-color: var(--color43);
	--filter: invert(61%) sepia(8%) saturate(926%) hue-rotate(226deg) brightness(93%) contrast(84%);
}

.greyd_icon_panel.greyd_icon_panel.greyd_icon_panel.softpink {
	--color: var(--color42);
	--bg-color: var(--color23);
	--filter: invert(51%) sepia(2%) saturate(4819%) hue-rotate(319deg) brightness(90%) contrast(109%);
}

.greyd_icon_panel.greyd_icon_panel.greyd_icon_panel.earth {
	--color: var(--color42);
	--bg-color: var(--color52);
	--filter: invert(29%) sepia(41%) saturate(775%) hue-rotate(335deg) brightness(96%) contrast(93%);
}

.greyd_icon_panel.greyd_icon_panel.greyd_icon_panel.sand {
	--color: var(--color42);
	--bg-color: var(--color51);
	--filter: invert(29%) sepia(41%) saturate(775%) hue-rotate(335deg) brightness(96%) contrast(93%);
}

.greyd_icon_panel.greyd_icon_panel.greyd_icon_panel.taintedrose {
	--bg-color: var(--color33);
	--filter: invert(87%) sepia(5%) saturate(1127%) hue-rotate(320deg) brightness(92%) contrast(106%);
}

.greyd_icon_panel.greyd_icon_panel.greyd_icon_panel.burgundy {
	--bg-color: var(--color22);
	--filter: invert(87%) sepia(5%) saturate(1127%) hue-rotate(320deg) brightness(92%) contrast(106%);
}

.greyd_icon_panel.greyd_icon_panel.greyd_icon_panel.almostblack {
	--bg-color: var(--color61);
	--filter: invert(61%) sepia(8%) saturate(926%) hue-rotate(226deg) brightness(93%) contrast(84%);
}


/**
 * Chip
 */
.goal-image-panels .greyd_icon_panel.new::before {
	content: attr(data-chip);
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 5px 10px 4px 10px;
	background-color: #fff;
	color: var(--color22);
	font-size: 14px;
	border-radius: 30px;
	line-height: 1;
	font-weight: 600;
}