.page-template-writing {
	.featured-work {
		> h3 {
			@media (width <= 767px) {
				margin: 0 !important;
				max-width: 330px;
			}
		}
	}

	.masthead {
		position: relative;
		z-index: 0;

		.masthead-content {
			position: relative;
			z-index: 1;
		}


		/* Wordpress wraps the content elements inside this other element that has a position:relative already set to it, which was affecting the position of the background images */ 
		> .wp-block-cover__inner-container {
			position: static;
		}

		h1 {
			@media (width <= 767px) {
				margin: 0 !important;
				max-width: 300px;
			}

			mark {
				display: inline-block;

				@media (width <= 767px) {
					margin-top: 40px;
				}

				&::after {
					background: url('/wp-content/themes/oddlogic/assets/images/writing/underline.svg') bottom center no-repeat;
					content: '';
					display: block;
					height: 12px;
					position: relative;
					top: 20px;
					width: 100%;
					display: none;
				}

				&.elm-animation-start {
					&::after {
						display: block;
					}
				}
			}
		}
	}

	.recognition {
		@media (width <= 767px) {
			padding-right: 64px !important;
			padding-top: 92px !important;
		}

	}

	.social-wrapper {
		@media (width <= 767px) {
			flex-flow: row wrap;
		}

		h2,
		ul {
			@media (width <= 767px) {
				flex: 1 1 100%;
			}
		}
	}

	.masthead-images {
		position: absolute;
		z-index: 0;
		left: 0;
		right: 0;
		bottom: 0;

		@media (width <=767px) {
			/* display: none; */
		}

		.masthead-image-l,
		.masthead-image-r,
		.masthead-image-mobile {
			position: absolute;
			bottom: 0;
		}

		.masthead-image-l {
			left: 0;
		}

		.masthead-image-r {
			right: 0;
		}

		.masthead-image-mobile {
			bottom: 0;
			right: 0;
		}
	}
}