.post-libr h2 { font-size: 30px; font-weight: 900; color: #1d2331 } .post-libr .post { flex: 0 0 calc(25% - 30px); margin: 0 15px; margin-bottom: 15px; max-width: calc(25% - 30px) } .post-libr .post:first-child { margin-left: 0 } .post-libr .post:last-child { margin-right: 0 } @media (max-width: 1200px) { .post-libr .post { flex: 0 0 calc(50% - 30px); max-width: calc(50% - 30px) } } @media (max-width: 768px) { .post-libr .post { flex: 0 0 calc(100% - 30px); max-width: calc(100% - 30px) } } .post-libr .post .box { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px trasnparent; padding: 15px 15px; height: 100%; transition: all .5s; background: #fff } .post-libr .post .box img { margin-bottom: 15px; height: 150px; object-fit: cover; width: 100% } .post-libr .post .box p:first-of-type { font-size: 16px; font-weight: 700; font-family: Open Sans, sans-serif; color: #ed9f1e } .post-libr .post .box p:nth-child(4) { font-size: 14px; color: #303a52 } .post-libr .post .box h3 { font-size: 14px; color: #303a52; font-weight: 900 } .post-libr .post .box a { color: #212121; font-size: 13px; font-weight: 700; position: relative; border-bottom: solid #4ecb4a 2px } .post-libr .post .box a:after { content: ''; height: 15px; width: 15px; background-image: var(--wpr-bg-aef71576-0be8-4e92-a045-48864ef4017a); background-repeat: no-repeat; background-position: center; background-size: contain; display: block; position: absolute; right: -20px; bottom: 0; transform: translateX(0px); transition: all .5s } .post-libr .post .box a:hover:after { transform: translateX(5px); transition: all .5s } .post-libr .post .box:hover { background: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) }