.books-box {
width: var(--container-width);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(36rem, 1fr));
gap: 2rem;
}

.books-item {
padding: 1.5rem;
border: 1px solid var(--border);
border-radius: 0.5rem;
background: var(--surface);
display: flex;
flex-direction: column;
}

.books-item a {
margin-top: auto;
}

.books-guide {
width: var(--container-width);
display: flex;
gap: 3rem;
align-items: flex-start;
}

.books-guide article {
flex: 1 1 0;
min-width: 0;
text-align: left;
white-space: pre-line;
}

.books-guide article div {
display: flex;
justify-content: center;
align-items: center;
gap: .75rem;
width: fit-content;
}

.books-guide aside {
flex: 0 0 22rem;
}

.books-guide aside ol {
list-style-type: decimal;
}

.books-guide aside ol ol {
list-style-type: upper-alpha;
}

.books-guide aside ol ol ol {
list-style-type: upper-roman;
}

.books-guide aside ol ol ol ol {
list-style-type: circle;
}

.books-guide aside ol ol ol ol ol {
list-style-type: square;
}

.books-chapter-article {
width: var(--container-width);
text-align: center;
}

.books-chapter-text {
width: 100%;
text-align: left;
white-space: pre-line;
}

.books-chapter-navigation {
display: flex;
width: 100%;
gap: 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
}

.books-chapter-previous,
.books-chapter-next {
flex: 1 1 0;
min-width: 0;
}

.books-chapter-previous {
text-align: left;
}

.books-chapter-next {
text-align: right;
}

.books-chapter-footer {
display: flex;
align-items: flex-start;
gap: 2rem;
}

.books-chapter-footer > nav {
flex: 1;
display: flex;
flex-direction: column;
gap: .5rem;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 14px;
}

.blogs-chapter-footer > nav > a {
display: block;
}

.books-social {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
gap: .75rem;
}


@media (max-width: 60rem) {

.books-chapter-navigation {
flex-direction: column;
}

.books-chapter-previous,
.books-chapter-next {
flex: none;
width: 100%;
}

.books-chapter-next {
text-align: left;
}

.books-chapter-footer {
flex-direction: column;
}

}