img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} img { max-width: 100%;height:auto; }body #blogs,body .blogs { display: grid; grid-gap: 10px; grid-template-columns: 220px 1fr }body #blogsidebar,body .blogsidebar{ order: 1 }body #posts,body .posts{ order: 2 }body #blogsidebar li,body .blogsidebar li{ text-transform: capitalize }body .post { border-top: 1px solid #CCC; text-align: left;clear:both }body .post:first-of-type{border-top:none}body .post br { height: 12px; display: block; }body .posttags a,body .postcats a { white-space: nowrap }body .postThumbnail:empty { display: none; }body .postThumbnail{float:right;width:300px;height:250px;overflow:hidden;margin:0 0 20px 20px;max-width:50%;position:relative}body .postThumbnail img { float: none; display: block; width: 100% !important; height: 100% !important; max-width: 100%; margin: 0; padding: 0; object-fit: cover; object-position: 50% 25% }body .post > h2,body .post > h3{grid-area: title}body .post > .postThumbnail{grid-area: img}body .post > p:nth-of-type(1){grid-area: date}body .post > p:nth-of-type(2){grid-area: p}body .post > p:nth-of-type(3){grid-area: btn}body .post > .posttags{grid-area: tags}body .post > .postcats{grid-area: cats}body .post>h1>a{text-decoration:none;cursor:default;pointer-events:none} @media(max-width:700px) {body #blogs,body .blogs{ grid-template-columns: 1fr !important }body #blogsidebar,body .blogsidebar{ order: 2 }body #posts,body .posts{ order: 1 }body #blogsidebar ul,body .blogsidebar ul{ display: grid; grid-column-gap: 10px; grid-template-columns: repeat(3,1fr); align-items: baseline }body #blogsidebar li,body .blogsidebar li{margin-right:30px}} @media(max-width:500px) {body #blogsidebar ul:first-of-type,body .blogsidebar ul:first-of-type{ grid-template-columns: 1fr 1fr }body .post > .imgRight { float: none; margin: 12px auto; max-width: 100%;display:block }}