.card-listing {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-sm);
	border-top: 1px solid var(--c-br-lt);

	@media (min-width: 768px) {
		gap: var(--s-md);
	}

	> ul {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--s-sm);

		@media (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
		}

		@media (min-width: 1024px) {
			grid-template-columns: repeat(var(--columns), 1fr);
		}

		> li {
			> a {
				display: flex;
				flex-direction: column;
				text-decoration: none;
				height: 100%;
				background-color: var(--c-white);
				border: 1px solid var(--c-br-lt);
				border-top-left-radius: var(--s-sm);
				border-bottom-right-radius: var(--s-sm);
				box-shadow: var(--s) var(--s) var(--s) rgba(0, 0, 0, 0.15);
				overflow: hidden;
				transition: box-shadow var(--a-sm), transform var(--a-sm);

				&:hover {
					transform: translateY(-3px);
					box-shadow: var(--s-xs) var(--s-xs) var(--s-sm) rgba(0, 0, 0, 0.2);
				}

				> figure {
					margin: 0;
					overflow: hidden;
					background-color: var(--c-bg-lt);

					&:has(img) {
						aspect-ratio: 1 / 1;
					}

					&:has(video) {
						aspect-ratio: 16 / 9;
					}

					> img,
					> video {
						width: 100%;
						height: 100%;
						object-fit: contain;
						border-bottom: 1px solid var(--c-br-lt);
						transition: transform var(--a-md);
					}
				}

				&:hover > figure > img {
					transform: scale(1.03);
				}

				> div {
					display: flex;
					flex-direction: column;
					gap: var(--s-xs);
					flex: 1;
					padding: calc(var(--s-sm) * 1.5);

					> h3 {
						color: var(--c-fg-dk);
					}

					> h4 {
						order: -1;
						color: var(--c-blue-dk);
						font-size: 1em;
						font-weight: bold;
					}
				}
			}
		}
	}
}