.posts-nav{font-size:.875em}
.posts-nav .active{background-color:var(--sienna);color:var(--bg-rose)}
.cats{gap:8px}
.cats a{white-space:nowrap;padding:7px 20px;color:var(--main-tr70)}
.views{align-items:center;gap:8px;font-size:.875em;color:var(--sand)}
.views span{padding-right:5px}
.views button{width:56px;height:36px;padding:3px;display:grid;place-content:center;border:none}
.views button:not(.active){background-color:var(--brown-tr10)}
.posts{display:grid}
.posts.list{gap:24px}
.post{background-color:var(--brown-tr10);border-radius:8px;overflow:hidden;display:flex;color:var(--main-tr70)}
.post:hover{background-color:#9734294d}
.post,.post :not(figure){transition:all .2s ease-in-out}
.post .content>*{margin:0}
.post .uppercase-spaced{color:var(--apricot);font-size:inherit}
.post a svg{display:inline-block;margin-left:3px;vertical-align:middle}
.post img{width:100%;height:100%;object-fit:cover}
.post .flex{justify-content:space-between;padding-top:10px}
.post .content{display:flex;flex-direction:column;gap:12px}
.list .post{align-items:center}
.list .post figure{flex:0 0 23.2%;height:100%}
.list .post .content{padding:12px;flex:1 1 auto}
.list .post h2{font-size:clamp(1rem,0.8519rem + 0.7407vw,1.5rem)}
.posts.card{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px}
.card .post{flex-direction:column}
.card .post figure{height:230px}
.card .post .content{padding:24px}
.card .post .content p:first-child{font-size:.75em}
.card .post .content h2{font-size:clamp(1.25rem,1.1932rem + 0.2841vw,1.375rem)}
.pagination{justify-content:center;gap:8px;margin-top:40px}
.pagination >*{width:36px;aspect-ratio:1;place-content:center;display:grid;border-radius:4px}
main .pagination a{color:var(--sand);font-size:.875em;background-color:var(--brown-tr10)}
main .pagination a.active{color:var(--bg-rose);background-color:var(--sienna)}
main .pagination a:where(.active,.disabled){pointer-events:none}
main .pagination a.disabled{opacity:.4}
.pagination a svg{width:10px}
.pagination a.prev svg{transform:rotate(180deg)}
.pages{text-align:center;font-size:.75em;color:var(--sand);margin-top:20px;opacity:.6}
@media only screen and (max-width: 767px) {
.list .post{max-height:160px}
.list .post .content p:first-child{font-size:.625em}
.list .post .excerpt{display:none}
.post .flex{font-size:.75em}
}
@media only screen and (min-width: 768px) {
.post .content p:first-child,.card .post .flex{font-size:.875em}
}
@media only screen and (max-width: 1023px) {
.posts-nav{margin:20px auto;max-width:max-content}
.cats{overflow-y:auto;padding-bottom:5px;margin-bottom:20px}
.views{justify-content:flex-end;padding-top:1em;border-top:1px solid #e8e1d11f}
}
@media only screen and (min-width: 1024px) {
.posts-nav{justify-content:space-between;margin:30px 0}
.list .post{max-height:320px}
.list .post .content{padding:20px 30px}
.list .post figure{flex:0 0 290px}
.post .flex{padding-top:50px}
.card .post figure{height:270px}
.pagination{margin-top:80px}
}