.background-cards {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-sm);
	min-height: 75vh;

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

	@media (min-width: 992px) {
		flex-direction: row;
		gap: var(--s-lg);
	}

	> div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: 67% center;

		@media (min-width: 992px) {
			background-attachment: fixed;
			background-position: center;
		}

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

			@media (min-width: 992px) {
				background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.85));
			}
		}
	}

	> header {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--s-sm);
		width: 100%;

		@media (min-width: 992px) {
			order: 2;
			align-self: flex-end;
			margin-bottom: var(--s-md);
		}

		> h2 {
			color: var(--c-white);
			text-align: center;
		}

		> div {
			max-width: var(--w-lg);
			color: var(--c-white);
			text-align: center;
			text-shadow: 0 0 var(--s) var(--c-black);
		}
	}

	> ul {
		position: relative;
		width: 100%;

		> li {
			max-width: var(--w-md);

			&:not(:first-child) {
				margin-top: var(--s-sm);
			}

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