main>section#books { display: flex; flex-flow: row wrap; } main>section#books>* { margin-bottom: 20px; } main>section#books>form.upload { width: calc(100% / 3 - 20px - 8px); height: 212px; margin-right: 20px; } main>section#books>form.upload>p { font-size: 3rem; height: 0.3rem; line-height: 0; } main>section#books>article.book { width: calc(100% / 3 - 20px); height: 220px; position: relative; margin-right: 20px; display: flex; flex-direction: column; } main>section#books>article.book:nth-child(3n) { margin-right: unset; } main>section#books>:is(form.upload, article.book):nth-last-child(1), main>section#books>:is(form.upload, article.book):nth-last-child(2), main>section#books>:is(form.upload, article.book):nth-last-child(3) { margin-bottom: 0; } main>section#books>article.book>img { height: 100%; object-fit: cover; object-position: right; overflow: hidden; /* clip-path: polygon(5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 5px, 5px 5px); */ } main>section#books>article.book>h4 { width: calc(100% - 20px); position: absolute; bottom: 0; margin: 0; padding: 10px; text-align: left; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; color: #fff; background: rgba(0, 0, 0, 50%); } main>section#books>article.book>p { margin: unset; } main>section#book>img, main>section#book>img::before { margin-bottom: 20px; width: 100%; } main>section#book>img::before{ margin-top: -1em; height: 200px; display: flex; align-items: center; justify-content: center; } main>section#book>nav>ul { margin: 0; padding: 0; display: flex; list-style: none; } main>section#book>nav>ul>li[type="button"] { padding: 6px 20px; } main>section#book>nav>ul>li:only-of-type { margin-left: auto; margin-right: auto; } main>section#book>nav>ul>li.previous { margin-left: auto; margin-right: 15px; } main>section#book>nav>ul>li.next { margin-right: auto; }