.nav-cards {
	position: relative;

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

	.slide,
	.slide-top,
	.content-section {
		position: relative;
	}

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

	.slide-top {
		order: -1;
	}

	.img-cont {
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
	}

	.slide-img {
		width: 100%;
	}

	.content-section {
		z-index: 2;
		margin-top: var(--space-4);

		&:has(.cat) {
			margin-top: -23px;
		}
	}

	.cat {
		display: block;
		max-width: max-content;
		padding: var(--space-2) 15px;
		margin-bottom: var(--space-4);
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-base);
		line-height: 1.2;
		text-transform: uppercase;
		color: var(--white);
		background: var(--red);
	}

	.slide-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--font-weight-medium);
		font-size: 1.1875rem;
		line-height: calc(25/19);
		color: var(--gray-dark);
	}

	.details {
		margin-top: var(--space-3);
	}
}