ArticleTemplates/assets/scss/modules/_sponsorship.scss

// /*doc
// ---
// title: Sponsorship
// name: sponsorship
// category: Modules
// ---
// The 'sponsored by/supported by' section
//
// ```html_example
// <<div class="sponsorship">
//     <p class="sponsorship__details">
//         <span class="sponsorship__formatted-sponsor-name">Guardian Cities is supported by:</span>
//         <a href="http://www.100resilientcities.org"><img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgKCToMPhMBABGAEyCMGaSOPVBwyp" class="sponsorship__logo" alt="The Rockefeller Foundation" /><span class="screen-readable"> (opens in a new window)</span></a>
//     </p>
//     <a class="sponsorship__about-uri" href="x-gu://item/mobile-apps.guardianapis.com/items/cities/2014/jan/27/cities-about-this-site">About this content</a>
// </div>
// ```
// */

.sponsorship {
    @extend %clearfix;
    padding: base-px(1, 1, 1.3, 1);
    font-family: $guardian-sans;
    line-height: 1.2;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    color: color(global-sponsored-about);
    font-size: 1.2rem;

    @include mq($from: col4) {
        background-color: color(brightness-100);
        padding-left: 240px;
        margin: 0 auto;
        max-width: 1200px;
    }

    &.paid {
        display: none;
    }
}

.sponsorship__formatted-sponsor-name {
    color: color(global-sponsored-label);
    display: inline-block;
    margin: base-px(0, 1, .5, 0);
    vertical-align: top;
}

.sponsorship__about-uri {
    margin-top: 4px;
    display: block;
}

.garnett--type-media .sponsorship__about-uri {
    color: color(global-sponsored-label);
}

.sponsorship__logo {
    max-height: base-px(5);
}