<commit_before>/* This is a shared file between Fireplace and Transonic. */
@import 'lib';

$view-all-blue = #5BBAFF;

$feed-column-width = 320px;
$mobile-tile-width = 300px;
$horizontal-tile-padding = 10px;
$vertical-tile-padding = 15px;
$vertical-margin = 18px;
$vertical-text-margin = 10px;
$vertical-tile-margin = 10px;

@media $at-least-desktop {
    ul.feed {
        max-width: $feed-column-width * 2;

        .feed-item-item {
            margin: 0;
            right: none;
        }
    }
}

// Main container for feed elements on the homepage.
.feed {
    list-style-type: none;
    margin: 0 auto;
    padding: 0 0 10px;
    position: relative;
    width: 100%;
    max-width: $feed-column-width;

    .feed-item-item {
        margin: 0 auto 0 auto;
        max-width: $mobile-tile-width;
        right: 0;
        width: $mobile-tile-width;
    }
    .mkt-tile {
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 1px 1px $cement-gray;
        color: $hungry-text;
        margin-bottom: $vertical-tile-margin;
        padding: $vertical-tile-padding $horizontal-tile-padding;
        position: relative;

        .icon {
            float: left;
        }
        .info {
            float: left;
            height: 64px;
            margin-left: 10px;
            position: relative;
            width: 205px;
        }
        .elliflow {
            max-width: 125px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .author,
        h3 {
            font-size: 12px;
            line-height: $vertical-margin;
        }
        .author {
            margin-top: -2px;
        }
        h3 {
            color: $hungry-text;
            font-weight: 500;
            padding: $vertical-text-margin 0 0;
        }
        .rating {
            padding: 5px 0;
        }
        .description .desc {
            padding-top: 15px;
        }
        .desc {
            background-color: #fff;
            color: $hungry-text;
        }
    }
    .content-rating,
    .rating .cnt,
    .price {
        display: none;
    }
    .group-subheader {
        margin-bottom: $vertical-margin;
    }
}

.app-link {
    height: 100%;
    position: relative;
    width: 100%;

    &:hover, :active {
        text-decoration: none;
    }
}

.feed-app {
    // For feed item type == 'quote'.
    blockquote {
        line-height: 23px;
        margin: 0;
        padding: 0 10px;
        text-align: center;

        + .quote-source {
            font-size: 11px;
            margin-top: 5px;
            text-align: center;
        }
    }
    .quote {
        color: #fff;
        left: -10px;
        padding: 5px 0 15px;
        position: relative;
        top: 15px;
        width: $mobile-tile-width;
    }
    .preview {
        .desc {
            margin: -20px 0 0;
            padding: 15px 0 0;
        }
        .feed-app-preview-container {
            border-radius: 0 0 5px 5px;
            overflow: hidden;
            margin: 15px 0 -16px -10px;
            height: 150px;
            width: $mobile-tile-width;

            &.vertical {
                height: 240px;
            }
        }
        .feed-app-preview {
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            height: unquote('calc(100% - 10px)');  // Padding.
            margin-top: 5px;
            width: 100%;
        }
    }
    .tile-footer {
        border-radius: 0 0 5px 5px;
        clear: both;
        font-size: 14px;
        line-height: 20px;

        .stars {
            left: 50%;
            margin: 15px 0 10px -32px;
            position: relative;
        }
    }
}

// Editorial brands.
.feed-brand {
    li {
        position: relative;

        a:hover {
            text-decoration: none;
        }
    }
    &.mkt-tile {
        position: relative;

        .feed-tile-header {
            margin-left: 60px;

            &:before {
                background-position: center;
                background-repeat: no-repeat;
                border-radius: 30px;
                content: '';
                display: block;
                height: 60px;
                left: -10px;
                position: absolute;
                top: 0;
                width: 60px;
            }
        }
    }
    .view-all {
        color: $view-all-blue;
        border-bottom: 1px solid $view-all-blue;
        display: inline-block;
        font-size: 12px;
        font-weight: 300;
        line-height: 16px;
        margin: $vertical-margin auto 0 50%;
        padding-bottom: 10px;
        text-align: center;
        transform: translate(-50%, 0);
        width: 170px;

        &:before,
        &:after {
            border-left: 1px solid $view-all-blue;
            bottom: 0;
            content: "";
            height: 5px;
            position: absolute;
            width: 0;
        }
        &:before {
            left: 0;
        }
        &:after {
            right: 0;
        }
    }
}

.feed .multi-app-tile.mkt-tile {
    background-color: #fff;
    margin: 0 auto;
    max-width: $mobile-tile-width;

    img {
        height: 60px;
        width: 60px;
    }
    .feed-tile-header {
        color: $hungry-text;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        padding: 5px 0 0;
    }
    .app-list {
        clear: both;
        display: inline-block;
        list-style-type: none;
        width: $mobile-tile-width;

        img {
            margin-bottom: 8px;
        }
    }
    .app-name {
        color: $hungry-text;
        font-size: 12px;
        font-weight: 500;
        line-height: $vertical-margin;
    }
    .mini-app {
        height: 60px;
        margin-top: $vertical-margin;

        .info {
            height: 60px;
        }
    }
}

// Editorial brand grid layout.
.feed .feed-layout-grid.multi-app-tile {
    .rating {
        display: none;
    }
    .app {
        float: left;
        height: 120px;
        margin: 0 20px 0 0;
        width: 80px;

         &:nth-child(3n) {
            margin-right: 0;
        }
        .info {
            margin-left: 0;
        }

    }
    .app-name.elliflow {
        max-width: 80px;
    }
    .author,
    .stars {
        display: none;
    }
    .button,
    .button[disabled] {
        background: transparent;
        color: $breezy-blue;
        cursor: pointer;
        height: 20px;
        line-height: 20px;
        margin: -20px 0 0;
        padding: 0;
        position: static;
        text-align: left;
        width: auto;
    }
    .app-list .button:hover {
        color: $breezy-blue;
    }
    .mini-app {
        height: 110px;
        margin-top: $vertical-margin;

        img {
            margin-bottom: $vertical-text-margin;
        }
        .info {
            height: 30px;
        }
    }
}


// Editorial brand list layout.
.feed-layout-list {
    li {
        width: unquote('calc(100% - 20px)');
    }
    .rating .cnt {
        bottom: 5px;
        font-size: 11px;
        display: inline-block;
        position: relative;
    }
    a {
        color: $hungry-text;
        position: relative;
    }
    h2 {
        padding: 4px 0 0;
    }
    .loadmore {
        margin: 0;
        padding-top: 50px;

        button {
            height: 35px;
        }
    }
}

// Colored or image background feed tiles.
.feed-item {
    background-size: cover;
    border-radius: 5px;
    height: 142px;
    margin: 0 auto;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
    width: $mobile-tile-width;

    .curve,
    .alt-curve {
        border-radius: 50%;
        height: 400px;
        left: -350px;
        position: absolute;
        top: 30px;
        width: 1000px;
        z-index: 10;
    }
    .info {
        padding: 0 10px;
        position: absolute;
        top: 85px;
        z-index: 15;

        .name,
        .author {
            max-width: $mobile-tile-width - $horizontal-tile-padding;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    h1 {
        font-size: 20px;
        font-weight: 300;
        line-height: 25px;
    }
    .author {
        font-size: 12px;
        line-height: $vertical-margin;
    }
    h1,
    .author,
    img {
        color: #fff;
    }
    .app-icons {
        height: 60px;
        left: 50%;
        position: absolute;
        top: 15px;
        transform: translate(-50%, 0);
        white-space: nowrap;
        z-index: 15;

        li {
            display: inline-block;
            margin-right: 20px;

            &:last-child {
                margin-right: 0;
            }
        }
        li, img {
            height: 60px;
            width: 60px;
        }
        + .curve {
            top: 30px;
        }
    }
    &.mega {
        min-height: 175px;

        .curve {
            top: 15px;
        }
        .alt-curve {
            top: 85px;
        }
        .info {
            top: 33px;
        }
        .desc {
            color: #fff;
            font-size: 15px;
            padding: 0 10px;
            position: absolute;
            top: 100px;
            width: 280px;
            z-index: 15;
        }
        &.full {
            min-height: 235px;

            .curve {
                top: 30px;
            }
            .info {
                top: 83px;
            }
            .alt-curve {
                top: 135px;
            }
            .desc {
                top: 150px;
            }
        }
    }
    &.shelf {
        height: 90px;

        .curve {
            top: 50px;
        }
        .info {
            top: 60px;
        }
        .desc, .author {
            display: none;
        }
    }
    &.grouped-collection,
    &.shelf.shelf-landing {
        height: 150px;

        .curve {
            top: 80px;
        }
        .info {
            bottom: 30px;
            top: auto;
        }
    }
}

.feed-landing {
    &.feed {
        padding-top: 0;
    }
    &.feed-app-landing,
    &.brand-landing {
        margin-top: $vertical-tile-margin;
    }
    &.collection-landing .feed-item,
    &.shelf-landing .feed-item {
        border-radius: 0;
        position: relative;
        width: 320px;

        .curve,
        .alt-curve {
            left: -340px;
        }
        &.mega.full .desc {
            top: 155px;
        }
    }
    &.shelf-landing {
        .feed-item {
            margin-bottom: 0;
        }
        .desc {
            color: $hungry-text;
            font-size: 15px;
            font-weight: light;
            line-height: 22px;
            padding: 20px;
        }
    }
    .column-b {
        padding: 0 10px;
    }
}

#page .feed-item-item .icon.deferred {
    height: 64px;
    margin: 0;
    position: static;
    width: 64px;
}

.category-header {
    background: $note-gray;
    margin-top: -6px;
    padding: 10px 0;
    text-align: center;
    width: 100%;

    h3 {
        color: #fff;
    }
}

// Editoral Brand colors.
[data-brand-color="ruby"]:before { background-color: $user-collections-ruby; }
[data-brand-color="amber"]:before { background-color: $user-collections-amber; }
[data-brand-color="emerald"]:before { background-color: $user-collections-emerald; }
[data-brand-color="topaz"]:before { background-color: $user-collections-topaz; }
[data-brand-color="sapphire"]:before { background-color: $user-collections-sapphire; }
[data-brand-color="amethyst"]:before { background-color: $user-collections-amethyst; }
[data-brand-color="garnet"]:before { background-color: $user-collections-garnet; }

// Editorial Brand icons.
[data-brand-type="groundbreaking-app"] h1:before {
    background-image: url(../img/icons/brands/groundbreaking-40px.png);
}
[data-brand-type="todays-top-app"] h1:before {
    background-image: url(../img/icons/brands/appOfTheDay-40px.png);
}
[data-brand-type="arts-entertainment"] h1:before,
[data-brand-type="arts-entertainment-spotlight"] h1:before {
    background-image: url(../img/icons/brands/arts&Entertainment-40px.png);
}
[data-brand-type="book"] h1:before,
[data-brand-type="great-read"] h1:before {
    background-image: url(../img/icons/brands/books-40px.png);
}
[data-brand-type="featured-creativity-app"] h1:before,
[data-brand-type="get-creative"] h1:before {
    background-image: url(../img/icons/brands/creativity-40px.png);
}
[data-brand-type="editors-pick"] h1:before,
[data-brand-type="staff-pick"] h1:before {
    background-image: url(../img/icons/brands/editorPick-40px.png);
}
[data-brand-type="education"] h1:before,
[data-brand-type="education-spotlight"] h1:before {
    background-image: url(../img/icons/brands/education-40px.png);
}
[data-brand-type="games"] h1:before,
[data-brand-type="great-game"] h1:before,
[data-brand-type="play-this-game-right-now"] h1:before,
[data-brand-type="hot-game"] h1:before,
[data-brand-type="instant-fun"] h1:before {
    background-image: url(../img/icons/brands/games-40px.png);
}
[data-brand-type="health-fitness"] h1:before,
[data-brand-type="healthy-living"] h1:before,
[data-brand-type="live-healthy"] h1:before {
    background-image: url(../img/icons/brands/health&Fitness-40px.png);
}
[data-brand-type="hidden-gem"] h1:before {
    background-image: url(../img/icons/brands/hiddenGem-40px.png);
}
[data-brand-type="lifestyle"] h1:before,
[data-brand-type="lifestyle-culture"] h1:before,
[data-brand-type="featured-lifestyle-app"] h1:before {
    background-image: url(../img/icons/brands/lifestyle-40px.png);
}
[data-brand-type="local-community-favorites"] h1:before,
[data-brand-type="local-favorite"] h1:before {
    background-image: url(../img/icons/brands/LocalCommunityFavourite-40px.png);
}
[data-brand-type="maps-navigation"] h1:before,
[data-brand-type="maps-navigation-spotlight"] h1:before {
    background-image: url(../img/icons/brands/maps&Nav-40px.png);
}
[data-brand-type="for-music-lovers"] h1:before,
[data-brand-type="music"] h1:before {
    background-image: url(../img/icons/brands/music-40px.png);
}
[data-brand-type="mystery-app"] h1:before {
    background-image: url(../img/icons/brands/mysteryApp-40px.png);
}
[data-brand-type="local-community-favorites"] h1:before,
[data-brand-type="local-favorite"] h1:before {
    background-image: url(../img/icons/brands/LocalCommunityFavourite-40px.png);
}
[data-brand-type="news-weather"] h1:before,
[data-brand-type="news-weather-spotlight"] h1:before {
    background-image: url(../img/icons/brands/news&Weather-40px.png);
}
[data-brand-type="photo-video"] h1:before,
[data-brand-type="featured-camera-app"] h1:before {
    background-image: url(../img/icons/brands/photos&Video-40px.png);
}
[data-brand-type="shopping"] h1:before,
[data-brand-type="smart-shopping-apps"] h1:before {
    background-image: url(../img/icons/brands/shopping-40px.png);
}
[data-brand-type="social"] h1:before,
[data-brand-type="get-connected"] h1:before,
[data-brand-type="featured-social-app"] h1:before {
    background-image: url(../img/icons/brands/social-40px.png);
}
[data-brand-type="sports"] h1:before,
[data-brand-type="the-sporting-life"] h1:before {
    background-image: url(../img/icons/brands/sports-40px.png);
}
[data-brand-type="tools-time-savers"] h1:before {
    background-image: url(../img/icons/brands/tools&TimesSavers-40px.png);
}
[data-brand-type="travel"] h1:before,
[data-brand-type="travel-guide"] h1:before,
[data-brand-type="getting-around"] h1:before,
[data-brand-type="for-travelers"] h1:before {
    background-image: url(../img/icons/brands/travel-40px.png);
}
[data-brand-type="be-more-productive"] h1:before,
[data-brand-type="better-business"] h1:before,
[data-brand-type="work-business"] h1:before,
[data-brand-type="featured-app-for-work-business"] h1:before,
[data-brand-type="get-things-done"] h1:before {
    background-image: url(../img/icons/brands/work&Business-40px.png);
}
[data-brand-type^="apps-for-"] h1:before {
    background-image: url(../img/icons/brands/countrySpecific-40px.png);
}


@media $at-least-desktop {
    .category-header {
        display: none;
    }
    .category-header-desktop {
        display: block;

        .cur-cat {
            &:hover {
                cursor: default;
            }
        }
    }
    [data-page-type~=leaf] {
        .column-a {
            float: left;
            width: 320px;

            .fanchor + .desc {
                margin: 20px 0;
                padding: 0;
            }
        }
        .column-b {
            float: right;
            padding: 0;
            width: 360px;
        }
        .feed-landing.shelf-landing .feed-item {
            right: inherit;
        }
        .feed .mkt-tile {
            .info {
                width: 260px;
            }
            .elliflow {
                max-width: 180px;
            }
        }
    }
    [data-page-type~=newpop] {
        .feed {
            max-width: $desktop-content;

            .app-list {
                max-width: $desktop-content;

                li {
                    float: left;
                    margin-right: 20px;
                    width: 335px;

                    &.mini-app {
                        background-color: #fff;
                        border-radius: 5px;
                        height: 80px;
                        padding: 10px;
                    }
                    &:nth-child(2n) {
                        margin-right: 0;
                    }
                    &.loadmore {
                        clear: both;
                        width: $desktop-content;
                    }
                }
            }
            .multi-app-tile.mkt-tile {
                background-color: transparent;
                box-shadow: none;
                max-width: $desktop-content;
                padding: 0;

                .app-list {
                    width: $desktop-content;

                    .fragment-error {
                        background-color: transparent;
                        display: inline-block;
                        padding: 20px;
                    }
                }
                > .icon {
                    display: none;
                }
                > .info {
                    height: 30px;
                    margin-left: 0;
                    width: 100%;

                    h1 {
                        font-size: 24px;
                        line-height: 24px;
                    }
                }
            }
            .placeholder {
                clear: both;
            }
        }
    }
}
<commit_msg>fix margin on brands (bug 1039828)<commit_after>/* This is a shared file between Fireplace and Transonic. */
@import 'lib';

$view-all-blue = #5BBAFF;

$feed-column-width = 320px;
$mobile-tile-width = 300px;
$horizontal-tile-padding = 10px;
$vertical-tile-padding = 15px;
$vertical-margin = 18px;
$vertical-text-margin = 10px;
$vertical-tile-margin = 10px;

@media $at-least-desktop {
    ul.feed {
        max-width: $feed-column-width * 2;

        .feed-item-item {
            margin: 0 0 $vertical-tile-padding;
            right: none;
        }
    }
}

// Main container for feed elements on the homepage.
.feed {
    list-style-type: none;
    margin: 0 auto;
    padding: 0 0 10px;
    position: relative;
    width: 100%;
    max-width: $feed-column-width;

    .feed-item-item {
        margin: 0 auto $vertical-tile-padding auto;
        max-width: $mobile-tile-width;
        right: 0;
        width: $mobile-tile-width;
    }
    .mkt-tile {
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 1px 1px $cement-gray;
        color: $hungry-text;
        margin-bottom: $vertical-tile-margin;
        padding: $vertical-tile-padding $horizontal-tile-padding;
        position: relative;

        .icon {
            float: left;
        }
        .info {
            float: left;
            height: 64px;
            margin-left: 10px;
            position: relative;
            width: 205px;
        }
        .elliflow {
            max-width: 125px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .author,
        h3 {
            font-size: 12px;
            line-height: $vertical-margin;
        }
        .author {
            margin-top: -2px;
        }
        h3 {
            color: $hungry-text;
            font-weight: 500;
            padding: $vertical-text-margin 0 0;
        }
        .rating {
            padding: 5px 0;
        }
        .description .desc {
            padding-top: 15px;
        }
        .desc {
            background-color: #fff;
            color: $hungry-text;
        }
    }
    .content-rating,
    .rating .cnt,
    .price {
        display: none;
    }
    .group-subheader {
        margin-bottom: $vertical-margin;
    }
}

.app-link {
    height: 100%;
    position: relative;
    width: 100%;

    &:hover, :active {
        text-decoration: none;
    }
}

.feed-app {
    // For feed item type == 'quote'.
    blockquote {
        line-height: 23px;
        margin: 0;
        padding: 0 10px;
        text-align: center;

        + .quote-source {
            font-size: 11px;
            margin-top: 5px;
            text-align: center;
        }
    }
    .quote {
        color: #fff;
        left: -10px;
        padding: 5px 0 15px;
        position: relative;
        top: 15px;
        width: $mobile-tile-width;
    }
    .preview {
        .desc {
            margin: -20px 0 0;
            padding: 15px 0 0;
        }
        .feed-app-preview-container {
            border-radius: 0 0 5px 5px;
            overflow: hidden;
            margin: 15px 0 -16px -10px;
            height: 150px;
            width: $mobile-tile-width;

            &.vertical {
                height: 240px;
            }
        }
        .feed-app-preview {
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            height: unquote('calc(100% - 10px)');  // Padding.
            margin-top: 5px;
            width: 100%;
        }
    }
    .tile-footer {
        border-radius: 0 0 5px 5px;
        clear: both;
        font-size: 14px;
        line-height: 20px;

        .stars {
            left: 50%;
            margin: 15px 0 10px -32px;
            position: relative;
        }
    }
}

// Editorial brands.
.feed-brand {
    li {
        position: relative;

        a:hover {
            text-decoration: none;
        }
    }
    &.mkt-tile {
        position: relative;

        .feed-tile-header {
            margin-left: 60px;

            &:before {
                background-position: center;
                background-repeat: no-repeat;
                border-radius: 30px;
                content: '';
                display: block;
                height: 60px;
                left: -10px;
                position: absolute;
                top: 0;
                width: 60px;
            }
        }
    }
    .view-all {
        color: $view-all-blue;
        border-bottom: 1px solid $view-all-blue;
        display: inline-block;
        font-size: 12px;
        font-weight: 300;
        line-height: 16px;
        margin: $vertical-margin auto 0 50%;
        padding-bottom: 10px;
        text-align: center;
        transform: translate(-50%, 0);
        width: 170px;

        &:before,
        &:after {
            border-left: 1px solid $view-all-blue;
            bottom: 0;
            content: "";
            height: 5px;
            position: absolute;
            width: 0;
        }
        &:before {
            left: 0;
        }
        &:after {
            right: 0;
        }
    }
}

.feed .multi-app-tile.mkt-tile {
    background-color: #fff;
    margin: 0 auto;
    max-width: $mobile-tile-width;

    img {
        height: 60px;
        width: 60px;
    }
    .feed-tile-header {
        color: $hungry-text;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
        padding: 5px 0 0;
    }
    .app-list {
        clear: both;
        display: inline-block;
        list-style-type: none;
        width: $mobile-tile-width;

        img {
            margin-bottom: 8px;
        }
    }
    .app-name {
        color: $hungry-text;
        font-size: 12px;
        font-weight: 500;
        line-height: $vertical-margin;
    }
    .mini-app {
        height: 60px;
        margin-top: $vertical-margin;

        .info {
            height: 60px;
        }
    }
}

// Editorial brand grid layout.
.feed .feed-layout-grid.multi-app-tile {
    .rating {
        display: none;
    }
    .app {
        float: left;
        height: 120px;
        margin: 0 20px 0 0;
        width: 80px;

         &:nth-child(3n) {
            margin-right: 0;
        }
        .info {
            margin-left: 0;
        }

    }
    .app-name.elliflow {
        max-width: 80px;
    }
    .author,
    .stars {
        display: none;
    }
    .button,
    .button[disabled] {
        background: transparent;
        color: $breezy-blue;
        cursor: pointer;
        height: 20px;
        line-height: 20px;
        margin: -20px 0 0;
        padding: 0;
        position: static;
        text-align: left;
        width: auto;
    }
    .app-list .button:hover {
        color: $breezy-blue;
    }
    .mini-app {
        height: 110px;
        margin-top: $vertical-margin;

        img {
            margin-bottom: $vertical-text-margin;
        }
        .info {
            height: 30px;
        }
    }
}


// Editorial brand list layout.
.feed-layout-list {
    li {
        width: unquote('calc(100% - 20px)');
    }
    .rating .cnt {
        bottom: 5px;
        font-size: 11px;
        display: inline-block;
        position: relative;
    }
    a {
        color: $hungry-text;
        position: relative;
    }
    h2 {
        padding: 4px 0 0;
    }
    .loadmore {
        margin: 0;
        padding-top: 50px;

        button {
            height: 35px;
        }
    }
}

// Colored or image background feed tiles.
.feed-item {
    background-size: cover;
    border-radius: 5px;
    height: 142px;
    margin: 0 auto;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
    width: $mobile-tile-width;

    .curve,
    .alt-curve {
        border-radius: 50%;
        height: 400px;
        left: -350px;
        position: absolute;
        top: 30px;
        width: 1000px;
        z-index: 10;
    }
    .info {
        padding: 0 10px;
        position: absolute;
        top: 85px;
        z-index: 15;

        .name,
        .author {
            max-width: $mobile-tile-width - $horizontal-tile-padding;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    h1 {
        font-size: 20px;
        font-weight: 300;
        line-height: 25px;
    }
    .author {
        font-size: 12px;
        line-height: $vertical-margin;
    }
    h1,
    .author,
    img {
        color: #fff;
    }
    .app-icons {
        height: 60px;
        left: 50%;
        position: absolute;
        top: 15px;
        transform: translate(-50%, 0);
        white-space: nowrap;
        z-index: 15;

        li {
            display: inline-block;
            margin-right: 20px;

            &:last-child {
                margin-right: 0;
            }
        }
        li, img {
            height: 60px;
            width: 60px;
        }
        + .curve {
            top: 30px;
        }
    }
    &.mega {
        min-height: 175px;

        .curve {
            top: 15px;
        }
        .alt-curve {
            top: 85px;
        }
        .info {
            top: 33px;
        }
        .desc {
            color: #fff;
            font-size: 15px;
            padding: 0 10px;
            position: absolute;
            top: 100px;
            width: 280px;
            z-index: 15;
        }
        &.full {
            min-height: 235px;

            .curve {
                top: 30px;
            }
            .info {
                top: 83px;
            }
            .alt-curve {
                top: 135px;
            }
            .desc {
                top: 150px;
            }
        }
    }
    &.shelf {
        height: 90px;

        .curve {
            top: 50px;
        }
        .info {
            top: 60px;
        }
        .desc, .author {
            display: none;
        }
    }
    &.grouped-collection,
    &.shelf.shelf-landing {
        height: 150px;

        .curve {
            top: 80px;
        }
        .info {
            bottom: 30px;
            top: auto;
        }
    }
}

.feed-landing {
    &.feed {
        padding-top: 0;
    }
    &.feed-app-landing,
    &.brand-landing {
        margin-top: $vertical-tile-margin;
    }
    &.collection-landing .feed-item,
    &.shelf-landing .feed-item {
        border-radius: 0;
        position: relative;
        width: 320px;

        .curve,
        .alt-curve {
            left: -340px;
        }
        &.mega.full .desc {
            top: 155px;
        }
    }
    &.shelf-landing {
        .feed-item {
            margin-bottom: 0;
        }
        .desc {
            color: $hungry-text;
            font-size: 15px;
            font-weight: light;
            line-height: 22px;
            padding: 20px;
        }
    }
    .column-b {
        padding: 0 10px;
    }
}

#page .feed-item-item .icon.deferred {
    height: 64px;
    margin: 0;
    position: static;
    width: 64px;
}

.category-header {
    background: $note-gray;
    margin-top: -6px;
    padding: 10px 0;
    text-align: center;
    width: 100%;

    h3 {
        color: #fff;
    }
}

// Editoral Brand colors.
[data-brand-color="ruby"]:before { background-color: $user-collections-ruby; }
[data-brand-color="amber"]:before { background-color: $user-collections-amber; }
[data-brand-color="emerald"]:before { background-color: $user-collections-emerald; }
[data-brand-color="topaz"]:before { background-color: $user-collections-topaz; }
[data-brand-color="sapphire"]:before { background-color: $user-collections-sapphire; }
[data-brand-color="amethyst"]:before { background-color: $user-collections-amethyst; }
[data-brand-color="garnet"]:before { background-color: $user-collections-garnet; }

// Editorial Brand icons.
[data-brand-type="groundbreaking-app"] h1:before {
    background-image: url(../img/icons/brands/groundbreaking-40px.png);
}
[data-brand-type="todays-top-app"] h1:before {
    background-image: url(../img/icons/brands/appOfTheDay-40px.png);
}
[data-brand-type="arts-entertainment"] h1:before,
[data-brand-type="arts-entertainment-spotlight"] h1:before {
    background-image: url(../img/icons/brands/arts&Entertainment-40px.png);
}
[data-brand-type="book"] h1:before,
[data-brand-type="great-read"] h1:before {
    background-image: url(../img/icons/brands/books-40px.png);
}
[data-brand-type="featured-creativity-app"] h1:before,
[data-brand-type="get-creative"] h1:before {
    background-image: url(../img/icons/brands/creativity-40px.png);
}
[data-brand-type="editors-pick"] h1:before,
[data-brand-type="staff-pick"] h1:before {
    background-image: url(../img/icons/brands/editorPick-40px.png);
}
[data-brand-type="education"] h1:before,
[data-brand-type="education-spotlight"] h1:before {
    background-image: url(../img/icons/brands/education-40px.png);
}
[data-brand-type="games"] h1:before,
[data-brand-type="great-game"] h1:before,
[data-brand-type="play-this-game-right-now"] h1:before,
[data-brand-type="hot-game"] h1:before,
[data-brand-type="instant-fun"] h1:before {
    background-image: url(../img/icons/brands/games-40px.png);
}
[data-brand-type="health-fitness"] h1:before,
[data-brand-type="healthy-living"] h1:before,
[data-brand-type="live-healthy"] h1:before {
    background-image: url(../img/icons/brands/health&Fitness-40px.png);
}
[data-brand-type="hidden-gem"] h1:before {
    background-image: url(../img/icons/brands/hiddenGem-40px.png);
}
[data-brand-type="lifestyle"] h1:before,
[data-brand-type="lifestyle-culture"] h1:before,
[data-brand-type="featured-lifestyle-app"] h1:before {
    background-image: url(../img/icons/brands/lifestyle-40px.png);
}
[data-brand-type="local-community-favorites"] h1:before,
[data-brand-type="local-favorite"] h1:before {
    background-image: url(../img/icons/brands/LocalCommunityFavourite-40px.png);
}
[data-brand-type="maps-navigation"] h1:before,
[data-brand-type="maps-navigation-spotlight"] h1:before {
    background-image: url(../img/icons/brands/maps&Nav-40px.png);
}
[data-brand-type="for-music-lovers"] h1:before,
[data-brand-type="music"] h1:before {
    background-image: url(../img/icons/brands/music-40px.png);
}
[data-brand-type="mystery-app"] h1:before {
    background-image: url(../img/icons/brands/mysteryApp-40px.png);
}
[data-brand-type="local-community-favorites"] h1:before,
[data-brand-type="local-favorite"] h1:before {
    background-image: url(../img/icons/brands/LocalCommunityFavourite-40px.png);
}
[data-brand-type="news-weather"] h1:before,
[data-brand-type="news-weather-spotlight"] h1:before {
    background-image: url(../img/icons/brands/news&Weather-40px.png);
}
[data-brand-type="photo-video"] h1:before,
[data-brand-type="featured-camera-app"] h1:before {
    background-image: url(../img/icons/brands/photos&Video-40px.png);
}
[data-brand-type="shopping"] h1:before,
[data-brand-type="smart-shopping-apps"] h1:before {
    background-image: url(../img/icons/brands/shopping-40px.png);
}
[data-brand-type="social"] h1:before,
[data-brand-type="get-connected"] h1:before,
[data-brand-type="featured-social-app"] h1:before {
    background-image: url(../img/icons/brands/social-40px.png);
}
[data-brand-type="sports"] h1:before,
[data-brand-type="the-sporting-life"] h1:before {
    background-image: url(../img/icons/brands/sports-40px.png);
}
[data-brand-type="tools-time-savers"] h1:before {
    background-image: url(../img/icons/brands/tools&TimesSavers-40px.png);
}
[data-brand-type="travel"] h1:before,
[data-brand-type="travel-guide"] h1:before,
[data-brand-type="getting-around"] h1:before,
[data-brand-type="for-travelers"] h1:before {
    background-image: url(../img/icons/brands/travel-40px.png);
}
[data-brand-type="be-more-productive"] h1:before,
[data-brand-type="better-business"] h1:before,
[data-brand-type="work-business"] h1:before,
[data-brand-type="featured-app-for-work-business"] h1:before,
[data-brand-type="get-things-done"] h1:before {
    background-image: url(../img/icons/brands/work&Business-40px.png);
}
[data-brand-type^="apps-for-"] h1:before {
    background-image: url(../img/icons/brands/countrySpecific-40px.png);
}


@media $at-least-desktop {
    .category-header {
        display: none;
    }
    .category-header-desktop {
        display: block;

        .cur-cat {
            &:hover {
                cursor: default;
            }
        }
    }
    [data-page-type~=leaf] {
        .column-a {
            float: left;
            width: 320px;

            .fanchor + .desc {
                margin: 20px 0;
                padding: 0;
            }
        }
        .column-b {
            float: right;
            padding: 0;
            width: 360px;
        }
        .feed-landing.shelf-landing .feed-item {
            right: inherit;
        }
        .feed .mkt-tile {
            .info {
                width: 260px;
            }
            .elliflow {
                max-width: 180px;
            }
        }
    }
    [data-page-type~=newpop] {
        .feed {
            max-width: $desktop-content;

            .app-list {
                max-width: $desktop-content;

                li {
                    float: left;
                    margin-right: 20px;
                    width: 335px;

                    &.mini-app {
                        background-color: #fff;
                        border-radius: 5px;
                        height: 80px;
                        padding: 10px;
                    }
                    &:nth-child(2n) {
                        margin-right: 0;
                    }
                    &.loadmore {
                        clear: both;
                        width: $desktop-content;
                    }
                }
            }
            .multi-app-tile.mkt-tile {
                background-color: transparent;
                box-shadow: none;
                max-width: $desktop-content;
                padding: 0;

                .app-list {
                    width: $desktop-content;

                    .fragment-error {
                        background-color: transparent;
                        display: inline-block;
                        padding: 20px;
                    }
                }
                > .icon {
                    display: none;
                }
                > .info {
                    height: 30px;
                    margin-left: 0;
                    width: 100%;

                    h1 {
                        font-size: 24px;
                        line-height: 24px;
                    }
                }
            }
            .placeholder {
                clear: both;
            }
        }
    }
}

{'fraction_non_alphanumeric': 0.13803230543318648, 'fraction_numerical': 0.028487518355359766, 'mean_word_length': 1.4506673645642503, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1272478', 'n_tokens_mistral': 13209, 'n_tokens_neox': 11976, 'n_words': 2153}