.page__header{

position:relative;
color: $hero-color;
box-shadow: $hero-shadow;
width: 100%;

}

.page__header__inner{

padding: #{$navbar-height * 1.1} 0 0 0;
position: relative;
z-index: 3;

}

.page__header__content{

display: flex;
align-items: center;
justify-content: center;
padding: 32pt 0;
overflow: auto;
// This div allows normal behaviors for contained elements instead of flexbox aligning them 
&__inner{
        width: 100%;
        max-width: 66ch;
        text-align: center;
}

}

/*— CONTENT STYLING —*/ .page__header__title{

color: inherit;
margin-bottom: 1.25em;

}

.page__header__text{

opacity: 0.85;
line-height: 1.7;
text-align: left;

}

.page{

padding: 24pt 0;

}

.page__inner{

@include desktop{
        display: flex;
}

}

.page__menu{

width: 100%;
position: relative;
@include desktop{
        display: block;
        width: 300px;
        flex-shrink: 0;
}

}

.page__main{

flex-grow: 1;

}

.page__main__title{

margin-top: 0.75em;

}

.page__image{

max-width:100%;

}