/* 

Notes: 

These styles have been added to style and position the pull-quote on the about page
Styles are intentionally siloed in page-template-tpl-about class to prevent inheritence elsewhere 
An additional class of pull-right has been added to wrap the pull-quote and hook into if necessary 
Descendent selectors and specificity are used to target elements

*/

.page-template-tpl-about .pull-right .pull-quote {
    margin: 0 auto 18.5% 0;
}

/* add the lefthand offset to the pull-quote  */
.page-template-tpl-about div.pull-right div.pull-quote::after {
    left: 0;
    background: url('../images/quote-edges/v.svg') left no-repeat;
}

/* improve the padding on lengthy quotes, originally set to 0 2vw 0 16vw; */
.page-template-tpl-about div.pull-right div.pull-quote blockquote {
    padding: 0 3vw 0 20vw;
    margin-left: 4vw;
}

/* position the pull-quote across the page on mobile */
.page-template-tpl-about .pull-quote,
.page-template-tpl-about .pull-quote .granimation {
    width: 98.7vw;
}

/* reset the pull-quote width to aprox 3/4 on tablets and above */
@media (min-width: 770px) {
    .page-template-tpl-about .pull-quote,
    .page-template-tpl-about .pull-quote .granimation {
        width: 83.7vw;
    }
}

/* reduce the vertical space between the pull-quote and the image that precedes it */
.page-template-tpl-about .about--conductor figure:last-of-type {
    margin: -7.46% 0 11.45% 18.66%;
}

/* the following rules enhance lines 22-34 to match the pull-quote positioning on the curate page */
/* this rule pushes the pull-quote across the width of the page */
@media (max-width: 769px) {
    .page-template-tpl-about .about--conductor .pull-right {
        width: calc(100% - 8px);
    }

    /* this rule resets .text-is-body width to match layout sitewide */
    .page-template-tpl-about .about--conductor .text-is-body {
        width: 88.8%;
    }
}

/* 

Additional fixes: 

These styles reposition the h2 .text-is-headline on the about page to prevent it overlaying an image [and being unreadable] on mobile

*/

.page-template-tpl-about .text-is-headline {
    top: 36.5%;
}

@media (min-width: 500px) {
    .page-template-tpl-about .text-is-headline {
        top: 42%;
    }
}

@media (min-width: 1440px) {
    .page-template-tpl-about .text-is-headline {
        top: 45%;
    }
}