body{ #page-wrapper.item{ margin: 0 10px; .contact{ .txt{display: none} } #start{ margin-top: 112px; } #body-wrapper.blog-listing{ .img-card{ width: calc((100% / 3) - 6.5px); margin-bottom: 10px; } .header-item{ position: relative; margin-bottom: 20px; padding-top: 20px; .title{ display: inline-flex; 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% + 10px ); transform: translateY(-50%); right: 0px; .btn{ display: block; width: auto; height: 100%; .btn-info{ position: absolute; 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{ 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; transform: translateY(0%); .btn{ .btn-info{ display: none; } img{ float: none; width: 100%; } } } } .img-card{ width: 100%; } } } } }