.gcc-tiles {
	container-type: inline-size;
	container-name: gcc-tiles;
	margin: 1.5em 0;
}

.gcc-tiles .gcc-tiles__grid {
	display: grid;
	grid-template-columns: repeat(var(--gcc-cols, 3), minmax(0, 1fr));
	gap: var(--gcc-gap, 12px);
}

.gcc-tiles .gcc-tile {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--gcc-tile-border, #e5e5e2);
	background: var(--gcc-tile-bg, #fcfcfb);
	border-radius: 10px;
	color: inherit;
	font-size: var(--gcc-tile-font-size, 16px);
	line-height: 1.35;
	text-decoration: none;
}

.gcc-tiles .gcc-tile__icon {
	flex: none;
	width: 1.5em;
	text-align: center;
	font-size: var(--gcc-tile-icon-size, 24px);
	color: var(--gcc-icon-color, var(--gcc-tile-icon, #00594b));
}

.gcc-tiles .gcc-tile__text {
	font-size: inherit;
}

.gcc-tiles .gcc-tile--link {
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.gcc-tiles .gcc-tile--link:hover,
.gcc-tiles .gcc-tile--link:focus-visible {
	background: var(--gcc-tile-bg-hover, #f1f2ef);
	text-decoration: none;
	transform: translateY(-1px);
}

.gcc-tiles .gcc-tile--link:focus-visible {
	outline: 2px solid var(--gcc-tile-icon, #00594b);
	outline-offset: 2px;
}

/* Breakpoints follow the width of the space the tiles sit in, not the screen. */
@container gcc-tiles (max-width: 700px) {
	.gcc-tiles .gcc-tiles__grid {
		grid-template-columns: repeat(var(--gcc-cols-tablet, 2), minmax(0, 1fr));
	}
}

@container gcc-tiles (max-width: 440px) {
	.gcc-tiles .gcc-tiles__grid {
		grid-template-columns: repeat(var(--gcc-cols-mobile, 1), minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.gcc-tiles .gcc-tile--link { transition: none; }
	.gcc-tiles .gcc-tile--link:hover,
	.gcc-tiles .gcc-tile--link:focus-visible { transform: none; }
}