body{ #page-wrapper.item{ margin: 0 10px; .contact{ .txt{ display: none } } #start{ margin-top: 5rem; } #body-wrapper.blog-listing { .img-card{ width: calc( (100vw / 3 - calc( 41px / 3 ) ) ); margin-bottom: 10px; } .header-item{ position: relative; margin-bottom: 1.5rem; padding-top: 1.5rem; .title{ display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; h2{ margin-right: 5px; text-transform: uppercase; } time{ margin-right: 5px; } span{ margin-right: 5px; } } .content{ width: calc((100% / 3) - 15px); margin-top: 20px; } .prev-next{ width: calc(100% / 3); height: 100%; position: absolute; top: calc( 50% + 1.5rem ); -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 0px; .btn{ display: block; width: auto; height: 100%; .btn-info{ position: absolute; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); margin-left: 40px; margin-top: 20px; } img{ float: right; width: 80%; } } } } } .top{ text-align: center; margin: 20px auto 20px auto; width: 50px; img{ width: 20px; margin-bottom:5px; } p{ -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } } } } @media screen and (max-width: 960px) { body{ #page-wrapper.item{ #body-wrapper.blog-listing{ .header-item{ .content{ width: calc((100% / 2) - 5px); } .prev-next{ width: calc((100% / 2) - 5px); } } .img-card{ width: calc((100% / 2) - 5px); } } } } } @media screen and (max-width: 600px) { body{ #page-wrapper.item{ #body-wrapper.blog-listing{ .header-item{ .content{ width: calc((100%) - 15px); } .prev-next{ width: calc((100%) - 15px); position: relative; -webkit-transform: translateY(0%); transform: translateY(0%); .btn{ .btn-info{ display: none; } img{ float: none; width: 100%; } } } } .img-card{ width: 100%; } } } } }