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%;height: 100%;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} body .postThumbnail {float: none;width: auto;height: auto;overflow: hidden;margin: 0;max-width: 100%;position: relative}}