#post { width: 960px; margin: 0 auto 80px; }

    #post > .img { height: 534px; background-position: center; background-size: cover; margin: 70px auto 30px; }
    #post > .c { overflow: hidden; }
    #post > .links { display: flex; justify-content: space-between; }
        #post > .links > .back { font-size: 14px; font-weight: bold; color: blue; text-decoration: none; }
            #post > .links > .back > i { font-size: 20px; }
                #post > .links > .back > i:before { margin: 0; }
        #post > .links > .share { font-size: 14px; height: 40px; }
            #post > .links > .share > i { font-size: 20px; margin-right: 6px; }
    #post > h2 { font-size: 36px; }

    #post .date-type { font-size: 14px; font-weight: bold; }
        #post .date-type > .date { margin-right: 20px; }
        #post .date-type > .type { color: #F05125; text-transform: uppercase; }

.caption-w { float: right; margin-left: 30px; background: #F2F2F2; border-top: solid 22px #2EC0DF; border-bottom: solid 22px #2EC0DF; padding: 20px 20px 30px 30px; font-size: 28px; width: 374px; font-weight: bold; box-sizing: border-box; }
    .caption-w > .t { }
    .caption-w > .name { font-style: italic; color: #2EC0DF; margin-top: 15px; }

/*laptop-desktop*/
@media(min-width:1024px) {
    #post > .c { font-size: 18px; }
}

/*mobile-tablet*/
@media(max-width:1023px) {
    #post { width: 650px; }
        #post > .img { height: 368px; }
        #post > h2 { font-size: 28px; }

    .caption-w { width: 292px; font-size: 24px; padding: 20px 20px; }
}

/*mobile*/
@media(max-width:767px) {
    #post { width: auto; }
        #post > .img { margin-top: 0; height: 180px; }
        #post > .links, #post .date-type { margin: 0 20px; font-size: 12px; }
            #post > .links > .share { height: 32px; font-size: 11px; }
        #post > h2 { margin: 30px 20px; font-size: 24px; }
        #post > .c { margin: 0 20px; }
        #post .date-type > .date { margin-right: 10px; }

    .caption-w { width: auto; float: none; margin: 25px 0; font-size: 21px; }
}