.nav-cards {
	position: relative;

	.slides {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: start;
		gap: var(--space-5);
	}

	.slide,
	.slide-top,
	.img-cont {
		position: relative;
	}

	.slide-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 10px;
	}

	.slide-top {
		order: -1;
	}

	.img-cont {
		border-radius: 10px;
		overflow: hidden;

		&::before {
			position: absolute;
			inset: 0;
			z-index: 2;
			display: block;
			content: '';
			border-radius: 10px;
			background:
				linear-gradient(180deg, rgba(244, 138, 133, 0.00) 0%, rgba(244, 138, 133, 0.60) 100%),
				linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0.01%, rgba(217, 217, 217, 0.00) 97.85%),
				linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
			opacity: 0;
			pointer-events: none;
			transition: opacity var(--transition-appendix);
		}
	}

	.slide-img {
		width: 100%;
	}

	.slide-title {
		position: relative;
		padding-bottom: var(--space-3);
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-base);
		line-height: 1.2;
		color: var(--brown-tint);

		&::before {
			position: absolute;
			inset: auto 0 0;
			translate: 0 1rem;
			display: block;
			height: 5px;
			content: '';
			background-image: url('/includes/public/assets/shared/slide-title-underline-graphic.svg');
			background-repeat: repeat-x;
			background-position: left center;
			background-size: auto 100%;
			opacity: 0;
			pointer-events: none;
			transition:
				translate var(--transition-appendix),
				opacity var(--transition-appendix);
		}
	}

	@media (hover: hover) {
		.slide:has(a:hover) {
			.img-cont::before {
				opacity: 1;
			}

			.slide-title::before {
				translate: 0 0;
				opacity: 1;
			}
		}
	}
}