ArticleTemplates/assets/scss/layout/_article--shared.scss

.article--standard,
.article--comment,
.article--feature,
.article--audio,
.article--immersive {
    .article__body {
        padding: base-px(1);

        @include mq($from: col2) {
            min-height: 700px;
        }

        @include mq(col2, col3) {
            padding-right: cols($base-3, 2);
        }

        @include mq($from: col3) {
            padding-right: cols($base-4, 6);
        }

        @include mq($from: col4) {
            margin: 0 auto;
            padding: {
                left: 240px;
                right: 340px;
            }
            width: 1200px;
        }

        // Images and video within article body
        .figure-wide:not(.element--halfWidth),
        .element-video,
        .element-placeholder {
            margin: base-px(1, -1);
            width: auto;
            clear: left;

            @include mq($from: col2) {
                margin-left: 0;
                margin-right: 0;
                width: 100%;

                figcaption {
                    padding: base-px(.125, 0);
                }
            }

            @include inverted-colors
        }

        // Interactives within article body
        .element-interactive {
            width: auto;

            // Prevents uneven sizes of now-and-then images in interactive embeds on Android tablets
            max-width: 570px;

            @include inverted-colors
        }

        .element--thumbnail.element-interactive {
            width: 140px;
            float: left;
            margin-right: base-px(1);

            @include mq(col4) {
                position: absolute;
                transform: translateX(calc(-100% - 16px));
            }

            body[data-ads-enabled=''].ios & {
                display: none;
            }
        }

        .element-video:not(.element-youtube) {
            @include mq($from: col2) {
                padding-bottom: 75.375%; // Compensation for width being 135%
            }
        }
    }

    // Float asides right, adjust styling as appropriate
    .aside {
        float: right;
        clear: right;

        @include mq($from: col1) {
            margin: base-px(0, 0, 2, 2);
            padding: base-px(1, 1, 1, 0);
        }

        @include mq(col1, col2) {
            margin-right: base-px(1);
            width: cols($base-2, 3);
        }

        @include mq(col2, col3) {
            margin-right: -(cols($base-3, 4));
            width: cols($base-3, 4);
        }

        @include mq($from: col3) {
            margin-right: -(cols($base-4, 5)+$base-4*2);
            width: cols($base-4, 4);
        }
    }
}

.article--standard,
.article--comment,
body:not(.is-live) .article--liveblog {
    .article__header {
        @include mq(col2, col3) {
            .headline,
            .standfirst {
                padding-right: cols($base-3, 3, 1);
            }

            .article__comments {
                width: cols($base-3, 3);
            }
        }

        @include mq($from: col3) {
            .headline,
            .standfirst {
                padding-right: cols($base-4, 4, 1);
            }

            .article__comments {
                width: cols($base-4, 4);
            }
        }

        @include mq($from: col4) {
            .headline {
                padding-right: 340px;
            }

            .standfirst {
                padding-right: 0;
            }
        }
    }
}

.article--feature {
    .article__header {
        .section {
            margin-bottom: 0;
        }

        .main-media {
            padding-top: 0;
        }

        .headline {
            margin-top: base-px(1);

            @include mq($from: col4) {
                margin-top: 0;
            }
        }
    }
}

.listen-to-article__container {
    .audio-player__info__label,
    .audio-player__info__duration {
        color: #121212;
    }
}