*{margin: 0;padding: 0;} 
html{ background: #fff;position: fixed;width: 100%;height: 100%; }
section{position: relative;width: 100%;} 
.container{width: 100%;border-top: solid 1px #aeaeae;border-bottom: solid 1px #aeaeae;margin: 15px auto 0 auto;position: relative;padding: 10px 0 15px 0;} 
.container .arrow{background-image: url('https://multimedia.scmp.com/2018/graphics/launchers/img/arrow.png');position: absolute;top: 15px;left: 5px;width: 32px;height: 32px;z-index: 10;} 
.container .graphic{width: 100%;height: 270px;margin: 0 auto 5px auto;background-image: url('https://multimedia.scmp.com/2019/graphics/launchers/img/default.jpg');background-size: cover;background-repeat: no-repeat;background-position: center top;} 
.container h1{font-family: 'Merriweather', serif;font-size: 17px;color: black;} 
.container p{color: #949494;font-family: 'Roboto', sans-serif;font-size: 15px;margin: 7px 0;}
a,a:visited,a:link,a:active{text-decoration: none;color: black;cursor: pointer;opacity: 1;}
.container:before{ content: 'On infographics';	font-family: 'Roboto', sans-serif;color: #949494;font-size: 13px;background-color: white;position: absolute;top: -10px;padding-right: 20px; }
section{max-width: 780px;margin: 0 auto;}
.container p span{display: none;}
@media screen and (max-width:400px) { 
	.container p span{ display: inline; }
	.container p{ margin: 6px 0;font-size: 13px; }
	.container h1{ font-size:16px;letter-spacing: -0.1px; }
	.container p span { display: none; }
}