.tile-grid {
	margin: 0 auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	max-width: 640px;

	opacity: 1;
	filter: blur(0);
	transform: translateZ(0) translateX(0);
	transition: 0.5s ease-in-out opacity, 0.5s ease-in-out filter, 0.5s ease-in-out transform;
}

.tile-grid__item {
	transition: all 100ms ease-in-out;
	position: relative;
	border: 1px solid var(--color-neutral-10);
	border-bottom: 0;
	margin: 0 10px;

	@include breakpoint-deprecated( "<480px" ) {
		box-shadow: none; //inherited from .card, remove for mobile only
		width: 100%;
	}

	@include breakpoint-deprecated( ">480px" ) {
		padding: 0;
		margin-bottom: 20px;
		width: 230px;
		max-width: 300px;
		text-align: center;
		flex-grow: 1;
		border: 0;

		&:hover {
			box-shadow: 0 0 0 1px var(--color-neutral-light), 0 2px 4px var(--color-neutral-10);
		}
	}

	&:active {
		.tile-grid__cta {
			color: var(--color-primary-dark);
		}

		.tile-grid__item-link::after {
			border-top-color: var(--color-primary-dark);
			border-right-color: var(--color-primary-dark);
		}
	}

	&:first-child {
		border-top-right-radius: 6px; /* stylelint-disable-line scales/radii */
		border-top-left-radius: 6px; /* stylelint-disable-line scales/radii */

		@include breakpoint-deprecated( ">480px" ) {
			border-radius: 0;
		}
	}

	&:last-child {
		margin-bottom: 20px;
		border: 1px solid var(--color-neutral-10);
		border-bottom-right-radius: 6px; /* stylelint-disable-line scales/radii */
		border-bottom-left-radius: 6px; /* stylelint-disable-line scales/radii */

		@include breakpoint-deprecated( ">480px" ) {
			border-radius: 0;
			border: 0;
		}
	}

	&.is-card-link {
		padding-right: 0;

		@include breakpoint-deprecated( "<480px" ) {
			padding-right: 40px;
		}
	}

	&.is-highlighted {
		box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 3px var(--color-primary-light);
	}

	a,
	svg {
		display: block;
		width: 100%; // Safari fix
	}

	.card__link-indicator {
		display: none;

		@include breakpoint-deprecated( "<480px" ) {
			display: block;
			width: 8px; //Match the size of the cta copy
			height: 8px; //Match the size of the cta copy
			position: absolute;
			top: 50%;
			right: 15px;
			margin-top: -6px;
			border-top: 2px solid var(--color-neutral-10);
			border-right: 2px solid var(--color-neutral-10);
			transform: rotate(45deg);
			color: var(--color-text-inverted);
		}
	}
}

.tile-grid__image {
	display: none;

	@include breakpoint-deprecated( ">480px" ) {
		display: block;
	}

	img {
		display: block;
		margin: 10% auto 4%;
		width: 85%;
	}
}

@include breakpoint-deprecated( ">480px" ) {
	.tile-grid__item-copy {
		padding: 15px;
		border-top: 1px solid color-mix(in srgb, var(--color-neutral-10) 50%, transparent);
	}
}

.tile-grid__item-label {
	color: var(--color-primary);
	padding: 0;
	position: relative;
}

.tile-grid__item-description {
	margin: 0;
	color: var(--color-neutral-light);
	font-size: $font-body-small;
	line-height: 1.5;

	@include breakpoint-deprecated( ">480px" ) {
		margin-top: 10px;

		&:first-child {
			margin-bottom: 10px;
		}
	}
}

.button.tile-grid__cta {
	color: var(--color-primary);

	@include breakpoint-deprecated( "<480px" ) {
		background: none;
		text-align: left;
		font-size: $font-body;
		line-height: 1.4;
		border: 0;
		padding: 0;
		text-transform: none;
		margin: 0;
	}
}
