.gs-dashboard-boxes {
	display: grid;
	--columns: 1;
	gap: 16px;
	margin-top: 16px;
	grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
	@media (min-width: 768px) {
		--columns: 2;
	}
	@media (min-width: 1024px) {
		--columns: 3;
	}
}

.gs-dashboard-box {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	--box-shadow-opacity: 0.05;
	&__badge {
		position: absolute;
		right: 1.625rem;
		min-height: 14px;
		border-radius: 10px;
		display: inline-block;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.6;
		padding: 3px 8px;
		background-color: #e2f3ec;
		color: #439146;
	}

	&__link {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
		border-radius: 6px;

		&:hover,
		&:focus,
		&:active {
			& + .gs-dashboard-box__inner {
				--box-shadow-opacity: 0.15;
				h3 {
					text-decoration: underline;
				}
				background: #fcfcfc;
			}
		}
	}

	&__inner {
		border: 1px solid var(--growthstack-color-border);
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, var(--box-shadow-opacity));
		background: #fff;
		border-radius: 6px;
		width: 100%;
		// box-shadow: 0 5px 32px 0 rgba(0, 0, 0, 0.05);
		padding: 24px;
		min-height: 160px;
		transition: 0.1s ease-in-out;
	}

	&__header {
		display: grid;
		grid-template-columns: 20px 1fr;
		gap: 10px;
		align-items: center;
		margin-bottom: 16px;

		& > * {
			margin: 0;
		}

		svg {
			width: 100%;
			height: auto;
		}

		h3 {
			color: #2b6450;
			font-weight: 600;
			text-underline-offset: 2px;
		}
	}

	&__icon {
		display: flex;
		align-items: center;
		line-height: 0;
	}

	&__content {
		& > * {
			margin: 0;
		}
	}

}