.icon-nav-wrapper {
	container-name: navCards;
	container-type: inline-size;
}
.icon-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	max-width: var(--site-width, 1460px);
	margin: 0 auto;

	&:has(.item--description) {
		.icon-nav--item {
			justify-content: flex-start;
		}
	}

	.icon-nav--item {
		padding: 1.5rem 1rem 2rem;
		position: relative;
		overflow: hidden;
		flex: 1 1 100%;
		display: flex;
		gap: 0.65rem;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		align-items: center;
		background: var(--gradient-gray);
		border: 4px solid var(--color-border-blue);
		transition: all 0.2s ease-in-out;

		background: rgba(255, 255, 255, 1);

		* {
			transition: all 0.2s ease-in-out;
			z-index: 99;
		}

		&:after {
			content: '';
			position: absolute;
			bottom: -50%;
			left: -50%;
			width: 160%;
			height: 140%;
			transform: rotate(45deg);
			filter: blur(50px);
			background: rgba(238, 238, 238, 1);
			transition: all 0.2s ease-in-out;
			z-index: 1;
		}

		.item--icon {
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			width: auto;
			height: 50px;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;

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

			i {
				font-size: 45px;
				color: var(--card-icon);
			}

			* {
				display: block;
				max-width: 100%;
				max-height: 100%;
			}
		}

		.item--text {
			font-size: calc(var(--font-size__base) + 2px);
			font-weight: bold;
			color: var(--card-icon);
		}

		.item--description {
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			line-clamp: 3;
			-webkit-box-orient: vertical;

			* {
				color: var(--theme-text);
				font-size: 14px;
			}
			p:last-of-type {
				margin-bottom: 0;
			}
		}

		&:hover {
			background: var(--gradient-blue);
			text-decoration: none;
			background: rgba(68, 81, 150, 1);

			* {
				color: var(--theme-white, #fff);
			}

			.item--icon {
				* {
					color: var(--card-icon-hover);
				}
				img {
					filter: saturate(0) brightness(5);
				}
			}

			&:after {
				background: rgba(46, 49, 66, 1);
			}
		}
	}
}

@container navCards (min-width: 470px) {
	.icon-nav {
		.icon-nav--item {
			min-width: 0;
			flex: 0 0 calc(50% - 0.5rem);
			/* aspect-ratio: 4/3; */
		}
	}
}
@container navCards (min-width: 700px) {
	.icon-nav {
		gap: 1.5rem;

		.icon-nav--item {
			flex: 0 0 calc(33.333% - 1rem);
		}

		&:has(.icon-nav--item:nth-of-type(3)) {
			.icon-nav--item {
				flex: 0 0 calc(33.333% - 1rem);
			}
		}
		&:has(.icon-nav--item:nth-of-type(4)) {
			.icon-nav--item {
				flex: 0 0 calc(50% - 0.75rem);
			}
		}
		&:has(.icon-nav--item:nth-of-type(6)) {
			.icon-nav--item {
				flex: 0 0 calc(33.333% - 1rem);
			}
		}
		&:has(.icon-nav--item:nth-of-type(8)) {
			.icon-nav--item {
				flex: 0 0 calc(50% - 0.75rem);
			}
		}
	}
}

@container navCards (min-width: 900px) {
	.icon-nav {
		gap: 2rem;

		&:has(.icon-nav--item:nth-of-type(3)) {
			.icon-nav--item {
				flex: 0 0 calc(33.333% - 1.334rem);
			}
		}
		&:has(.icon-nav--item:nth-of-type(4)) {
			.icon-nav--item {
				flex: 0 0 calc(25% - 1.5rem);
			}
		}
		&:has(.icon-nav--item:nth-of-type(6)) {
			.icon-nav--item {
				flex: 0 0 calc(33.333% - 1.334rem);
			}
		}
		&:has(.icon-nav--item:nth-of-type(8)) {
			.icon-nav--item {
				flex: 0 0 calc(25% - 1.5rem);
			}
		}
	}
}