.module { display: inline-block; width: 25%; padding-left: 15px; padding-right: 15px; margin-right: -4px; } .module .panel-body { display: block; padding: 0; } .module .panel-body .panel-thumb { color: #222222; font-size: 48px; background: #F8BE12; height: 108px; position: relative; overflow: hidden; } .module .panel-body .panel-thumb .fa { font-size: 48px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1, 1); -webkit-transform: translate(-50%, -50%) scale(1, 1); transition: transform 0.2s; } .module .panel-body .panel-thumb:hover .fa { transform: translate(-50%, -50%) scale(1.5, 1.5); -webkit-transform: translate(-50%, -50%) scale(1.5, 1.5); } .module .panel-body h4 { color: #656565; } .module:nth-child(-3n+5) .panel-thumb, .module:nth-child(3n+4):nth-child(-3n+13) .panel-thumb, .module:nth-child(3n+12):nth-child(-3n+18) .panel-thumb, .module:nth-child(n+20):nth-child(-n+21) .panel-thumb, .module:nth-child(2n+21) .panel-thumb { background: #222222; color: #F8BE12; } @media (min-width: 992px) and (max-width: 1200px) { .module { width: 33.33%; } } @media (min-width: 768px) and (max-width: 992px) { .module { width: 50%; } } @media (max-width: 768px) { .module { width: 100%; } } .news { max-height: 425px; overflow: auto; } .news-item:not(:last-of-type) { padding-bottom: 15px; margin-bottom: 10px; border-bottom: 1px solid #e9e9e9; } .news-item .news-header { margin-bottom: 8px; } .news-item .news-header .title { font-weight: 700; } .news-item .news-header time { font-size: 12px; } .news-item .news-content { font-size: 14px; }