.sticky-cards {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--s-sm);
	background-color: var(--c-white);

	@media (min-width: 768px) {
		position: relative;
		z-index: 1;
		gap: var(--s-lg);
	}

	> header {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;

		@media (min-width: 768px) {
			position: sticky;
			top: var(--s-lg);
			width: calc(40% - var(--s-md));
		}

		> figure {
			position: relative;
			margin-top: var(--s-sm);

			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
			}

			> img {
				flex-shrink: 1;
				width: 100%;
				object-fit: cover;
				aspect-ratio: 1 / 1;
			}
		}

		> p {
			width: 100%;
			margin-top: var(--s-xs);
			padding: var(--s-sm);
			color: var(--c-fg-dk);
			text-align: center;
			text-wrap: balance;
		}

		> nav {
			margin-top: var(--s-xs);

			+ div {
				margin-top: var(--s-md);
			}
		}
	}

	> div {
		width: 100%;

		@media (max-width: 767px) {
			margin-top: var(--s-md);
		}

		@media (min-width: 768px) {
			width: calc(60% - var(--s-md));
			padding: calc(var(--s-md) * 1.5);
			background-color: var(--c-bg-lt);
			box-shadow: var(--s) var(--s) var(--s-xs) rgba(0, 0, 0, 0.25);
			border-top-left-radius: var(--s-lg);
			border-bottom-right-radius: var(--s-lg);
		}

		> article {
			&:not(:first-child) {
				margin-top: var(--s-md);
				padding-top: var(--s-md);
				border-top: 1px solid var(--c-br-dk);
			}

			> p {
				margin-top: var(--s-sm);
			}

			> ul {
				margin-top: var(--s-sm);

				> li {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					&:not(:first-child) {
						margin-top: var(--s-xs);
						padding-top: var(--s-xs);
						border-top: 1px solid var(--c-br-lt);
					}

					h4 {
						color: var(--c-blue-dk);
					}

					> a {
						position: relative;
						font-weight: bold;

						&:after {
							content: "";
							display: block;
							width: 100%;
							height: 2px;
							margin-top: calc(-0.5 * var(--s));
							background-color: var(--c-black);
							transform-origin: right;
							transform: scaleX(0);
							transition: transform var(--a-sm);
						}

						&:hover{
							text-decoration: none;

							&:after {
								transform-origin: left;
								transform: scaleX(1);
							}
						}
					}

					> em {
						font-size: 2rem;
						line-height: 1em;
						font-family: var(--f-l);
						font-weight: bold;

						@media (max-width: 767px) {
							width: 100%;
							margin-top: var(--s);
						}
					}

					> p {
						width: 100%;
						margin-top: var(--s);
						font-style: italic;
					}
				}
			}

			> nav {
				margin-top: var(--s-sm);
			}
		}
	}
}