main#primary {
	z-index: 1;
}

.footer {
	margin-bottom: 16rem;
	z-index: 1;
}

.pagination {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;

	.pagination__next-link {
		color: inherit;
		display: block;
		text-decoration: none;
	}

	.pagination__hero {
		align-items: flex-start;
		background-image: var(--pagination-image);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		gap: var(--spacing-10);
		justify-content: flex-end;
		min-height: 16rem;
		padding: var(--spacing-30) var(--spacing-20);
		position: relative;
		width: 100%;

		&::before {
			background: linear-gradient(
				180deg,
				rgb(0 0 0 / 10%) 0%,
				rgb(0 0 0 / 65%) 100%
			);
			content: "";
			inset: 0;
			position: absolute;
		}

		@media (max-width: 728px) {
			background-image: var(--pagination-image-mobile, var(--pagination-image));
			padding: var(--spacing-20) var(--spacing-10);
		}

		@media (width > 768px) {
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: var(--spacing-30);
		}
	}

	.pagination__label,
	.pagination__title,
	.pagination__arrow {
		position: relative;
		z-index: 1;
	}

	.pagination__label {
		color: var(--teal);
		font-size: var(--step-0);
	}

	.pagination__title {
		color: var(--white);
		font-size: var(--step-3);
		line-height: 1.1;
		margin: 0;
		max-width: 40rem;
	}

	.pagination__arrow {
		height: auto;
		margin-top: 0.5rem;
		transition: transform 0.2s ease-in-out;
		width: 4.5rem;
	}

	.pagination__next-link:hover .pagination__arrow,
	.pagination__next-link:focus .pagination__arrow {
		transform: translateX(0.35rem);
	}
}