.navigation-box {
	--navigation-box-radius: var(--radius-xl);

	--navigation-box-gap: var(--gap-md);
	--navigation-box-padding-y: var(--padding-xs);
	--navigation-box-padding-x: var(--padding-xs);
	--navigation-box-flow: var(--gap-lg);

	--navigation-box-header-height: 180px;
	--navigation-box-height: 284px;

	@media (min-width: 768px) {
		--navigation-box-radius: var(--radius-2xl);
		--navigation-box-gap: var(--gap-md);
		--navigation-box-padding-y: var(--padding-xs);
		--navigation-box-padding-x: var(--padding-xs);
	}

	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;

	background-color: var(--element-bg);
	color: var(--element-text);
	border-radius: var(--navigation-box-radius);

	border: var(--element-border) !important;

	transition: var(--button-transition);
	text-decoration: none;
	position: relative;

	height: var(--navigation-box-height);

	.navigation-box-inner {
		background-color: var(--element-bg);
		border-radius: var(--navigation-box-radius);
		overflow: hidden;
	}

	.navigation-box-content {
		z-index: 1;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto 0fr;
		gap: var(--navigation-box-gap);
		height: 100%;


		border-radius: var(--navigation-box-radius);
		padding: var(--navigation-box-padding-y) var(--navigation-box-padding-x);
		background-color: var(--element-bg);

		transition: transform 0.3s ease 0.1s, grid-template-rows 0.3s ease;
	}

	.navigation-box-title {
		font-size: var(--font-size-medium);
		line-height: var(--lh-comfort);
		font-weight: var(--font-weight-bold);
		height: 100%;
	}

	.navigation-box-description {
		hyphens: auto;
		min-height: 0;
		overflow: hidden;
		height: 100%;
    	font-size: var(--font-size-small);
		line-height: var(--lh-comfort);
	}

	&:focus,
	&:focus-visible,
	&:hover {
		.navigation-box-content {
			transform: translateY(
				calc(var(--navigation-box-header-height) * -1)
			);
			grid-template-rows: auto 1fr;
		}
	}

	&::after {
		content: "";
		position: absolute;
		top: var(--hover-shadow-y);
		left: var(--hover-shadow-x);
		right: calc(-1 * var(--hover-shadow-x));
		bottom: calc(-1 * var(--hover-shadow-y));
		border-radius: inherit;
		background-color: transparent;
		pointer-events: none;
		transition: var(--button-transition);
		z-index: -1;

		@media (forced-colors: active) {
			content: none;
		}
	}

	&:hover::after {
		background-color: var(--shadow-neutral);
	}

	.navigation-box-header-image {
		height: var(--navigation-box-header-height);
	}

	.navigation-box-image {
		height: 100%;
		width: 100%;
		border-top-left-radius: var(--navigation-box-radius);
		border-top-right-radius: var(--navigation-box-radius);
		overflow: hidden;

		img {
			height: 100%;
			width: 100%;
			object-fit: cover;
		}
	}

	/* span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;

    @media (min-width: 768px) {
      line-clamp: 2;
      -webkit-line-clamp: 2;
    }
  }

  svg {
    flex-shrink: 0;
    width: var(--size-8);
    height: var(--size-8);
  }

  &:focus-visible {
    box-shadow: none;
    outline: 4px solid var(--border-neutral);
    outline-offset: 0px;
  } */
}