.c-grid-tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	padding: var(--spacing-sm);
	transition: border-color 0.3s;

	&.c-grid-tile--card {
		&:hover,
		&:focus {
			color: var(--color-secondary);
			border-color: var(--color-secondary);

			.c-grid-tile__arrow {
				transform: translateX(0.5rem);
			}
		}
	}

	&.c-grid-tile--background-blue {
		background-color: var(--color-blue);
	}

	&.c-grid-tile--background-grey {
		background-color: var(--color-grey-light);
	}

	&.c-grid-tile--background-yellow {
		background-color: var(--color-yellow);
	}

	&.c-grid-tile--border-none {
		padding: 0;
	}

	&.c-grid-tile--border-blue {
		border: 1px solid var(--color-blue);
	}

	&.c-grid-tile--border-grey {
		border: 1px solid var(--color-grey-light);
	}

	&.c-grid-tile--border-yellow {
		border: 1px solid var(--color-yellow);
	}

	h3, p {
		width: 100%;
		color: inherit;
		transition: color 0.3s;
	}

	.c-grid-tile__top {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-sm);
		width: 100%;
	}

	.c-grid-tile__image {
		position: relative;
		aspect-ratio: 258 / 194;
		width: 100%;

		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.c-grid-tile__icon {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 5px;
		background-color: var(--color-white);

		img {
			width: 100%;
			height: auto;
			max-width: 40px;
			max-height: 40px;
		}
	}

	.c-grid-tile__arrow {
		width: 14px;
		height: 16px;
		transition: transform 0.3s;

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

	.c-grid-tile__link {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: var(--spacing-sm);
		line-height: 1;
		font-weight: bold;
		transition: color 0.3s;

		&:hover,
		&:focus {
			.c-grid-tile__arrow {
				transform: translateX(0.5rem);
			}
		}
	}
}