@layer components.page-hero {
  	[data-c-page-hero] {
  		.image-wrapper {
  			position: relative;
  			margin-bottom: 50px;

  			@media screen and (max-width: 767px) {
  				margin-bottom: 25px;
  			}

				picture img {
					height: 800px;
					object-fit: cover;
					width: 100%;

					@media screen and (max-width: 1199px) {
						height: 600px;
					}
				}

  			.container {
  				position: absolute;
  				bottom: 60px;
  				left: 0;
  				right: 0;
  				z-index: 1;
  			}

  			h1 {
  				color: var(--color-white);
  				font-size: var(--font-size-6xl);
  				line-height: 100%;
  				font-family: var(--font-family-serif);
  				font-weight: var(--font-weight-extra-bold);

  				@media screen and (max-width: 1199px) {
  					font-size: var(--font-size-5xl);
  				}

  				@media screen and (max-width: 767px) {
  					font-size: var(--font-size-4xl);
  				}
  			}

  			&:after {
  				content: "";
  				position: absolute;
  				left: 0;
  				right: 0;
  				bottom: 0;
  				height: 100%;
  				background: linear-gradient(185deg, rgba(255, 255, 255, 0.00) 39.76%, rgba(0, 0, 0, 0.40) 75.19%) 50% / cover no-repeat;
  			}
  		}
  	}
  }