.icon-tiles-grid {
	container-type: inline-size;

	&.icon-tiles-grid--bleed {
		grid-column: bleed;
	}

	.icon-tiles-grid__grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 16px;
		width: max-content;
		max-width: 100cqw;
		margin: 0 auto;

		@container (max-width: 900px) {
			grid-template-columns: 1fr 1fr;
		}

		@container (max-width: 600px) {
			grid-template-columns: 1fr;
		}

		.icon-tiles-grid__tile {
			border-radius: 16px;
			padding: 40px;
			background-color: var(--tile-bg-color);
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 3;
			flex-flow: column;
			gap: 32px;
			min-height: 320px;
			max-width: 400px;
			text-decoration: none; /* in case it's an a href */

			&,
			* {
				color: var(--tile-fg-color);
			}

			svg {
				width: 48px;
				height: 48px;

				* {
					fill: var(--tile-fg-color) !important;
				}
			}

			.name {
				font-size: 28px;
			}

			.description {
				font-size: 18px;
			}
		}

		a[href].icon-tiles-grid__tile {
			&:hover {
				transform: scale(1.05);
			}
		}
	}
}