.page-template-about {
	.masthead {
		@media (width <= 1279px) {
			padding-left: 32px;
			padding-right: 32px;
		}

		.elm-michael mark {
			position: relative;

			&.elm-animation-start {
				path {
					animation: draw-hover-murphy-shape 2s forwards;
				}
		
				svg {
					display: block;
				}
			}

			svg {
				display: none;
				left: 45%;
				pointer-events: none;
				position: absolute;
				top: 55%;
				transform: translate(-50%, -50%);
				width: 105%;
				z-index: 3;

				path {
					filter: url(#chalk-effect-bubble);
					stroke-linecap: round;
					stroke-width: 4px;
					stroke: #333;

					stroke-dasharray: 0 2000;
				}
			}
		}
	}

	.section-1 {
		@media (width <= 767px) {
			padding-top: 0 !important;
		}

		.wp-block-cover {
			@media (width <= 767px) {
				min-height: 360px !important;
				position: relative;
				right: var(--wp--style--root--padding-left);
				width: calc(100% + var(--wp--style--root--padding-left) * 2);
			}
		}
	}

	.section-2 {
		@media (width >= 768px) {
			background-position: 50% 120% !important;
		}

		@media (width <=1200px) {
			background-position: 50% 105% !important;
		}

		@media (width <= 767px) {
			background-image: none !important;
			padding-bottom: 32px !important;
		}

		.section2-shape-mobile {
			left: -32px !important;
			bottom: -32px !important;
		}

		.wp-block-columns {
			@media (768px <= width <= 1199px) {
				flex-wrap: wrap !important;
			}

			> div {
				&:nth-child(1) {
					@media (992px <= width <= 1199px) {
						max-width: 160px;
					}

					@media (768px <= width <= 991px) {
						max-width: 140px;
					}

					@media (width <= 767px) {
						max-width: 120px;
					}
				}

				&:nth-child(2) {
					position: relative;
					top: 3px;

					@media (width <= 1199px) {
						max-width: 162px;
					}
				}

				&:nth-child(3) {
					@media (768px <= width <= 1199px) {
						flex-basis: 100%;
					}
				}
			}
		}
	}

	.section-3 {
		position: relative;

		h2,
		p {
			@media (width <= 991px) {
				max-width: 100% !important;
			}
		}

		h2 {
			display: inline-block;
			position: relative;

			&.elm-animation-start {
				path {
					animation: draw-hover 2s forwards;
				}
		
				svg {
					display: block;
				}
			}

			svg {
				display: none;
				left: 50%;
				pointer-events: none;
				position: absolute;
				top: 55%;
				transform: translate(-50%, -50%);
				width: 117%;
				z-index: 3;
				overflow: visible;

				path {
					filter: url(#chalk-effect-schools);
					stroke-linecap: round;
					stroke-width: 4px;
					stroke: #333;

					stroke-dasharray: 0 1500;
				}
			}
		}

		.elm-tower {
			margin: 0;
		}
	}

	.section-5 {
		@media (width <= 767px) {
			padding-left: var(--wp--style--root--padding-left) !important;
			padding-right: var(--wp--style--root--padding-right) !important;
		}

		.wp-block-column {
			&:not(.divider) {
				padding: 20px 0;
			}

			&.divider {
				background-position: center center;

				@media (width >= 768px) {
					background-image: url('/wp-content/themes/oddlogic/assets/images/about/divider-vertical.svg');
					background-repeat: repeat-y;
				}

				@media (width <= 767px) {
					background-image: url('/wp-content/themes/oddlogic/assets/images/about/divider-horizontal.svg');
					background-repeat: repeat-x;
					height: 3px;
				}
			}

			h3, p {
				@media (width >= 768px) {
					max-width: 350px;
				}

				@media (width <= 767px) {
					max-width: 250px;
				}
			}
		}
	}
}