.block__page-banner {
	align-items: center;
	aspect-ratio: 3 / 1;
	min-height: 50vh;
	justify-content: center;
	position: relative;
	display: flex;
	flex-flow: row wrap;
	text-align: center;
	width: 100%;
	background-color: var(--color__black);

	&::after {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: transparent linear-gradient(0deg, #000000BD 0%, #00000000 100%) 0% 0% no-repeat padding-box;
		z-index: 2
	}

	> img {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		z-index: 1;
		background-color: var(--color__black);
	}

	.wrapper {
		max-width: 1400px;
		position: relative;
		padding-top: 16rem;
		z-index: 3;
	}

	h1 {
		color: var(--color__white);
		filter: drop-shadow(2px 4px 4px var(--color__black));

		+ p {
			color: var(--color__main);
			font-size: 32px;
			font-weight: 700;
			margin-top: 45px;
			text-transform: uppercase;
		}
	}

	button.btn--pass-banner {
		bottom: 0;
		position: absolute;
		left: 50%;
		transform: translate(-50%,50%);
		z-index: 2;
	}

}

@media screen and (max-width: 768px) {

	.block__page-banner {
		aspect-ratio: 1 / 1;

		.wrapper {
			padding-top: 10rem;
		}
	}
}