/* BLOG */
.blog .katalog__sort{margin-bottom:68px}
.blog__items{width:calc(100% + 14px);margin:0 -7px -14px}
.blog__items>div{padding:0 7px 14px}
.blog__item{background:#f8fafd;padding:10px;display:flex;flex-direction:column;align-items:flex-start}
.blog__item-img{width:100%;height:281px;border-radius:16px;overflow:hidden;position:relative;margin-bottom:16px}
.blog__item-img img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.blog__item-img .date{position:absolute;top:15px;right:15px;border-radius:5px;padding:5px 8px;color:#777;background:#f8fafd}
.blog__item span{font-size:20px;margin-bottom:20px;font-weight:500}
.blog__item p{line-height:1.5;margin-bottom:20px;-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
.blog__item .btn{background:#88434e}
.blog .pagination a{background:#f6f8fb}
.katalog__sort{border:1px solid #efefef;padding:16px 20px;color:#888;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;display:inline-flex;align-items:center;justify-content:center;margin-left:auto;gap:7px;margin-bottom:30px}
.katalog__sort .select{position:relative;width:100%;color:#0e111a}
.katalog__sort .select select{display:none}
.katalog__sort .select-selected{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.katalog__sort .select-selected::after{content:'';position:absolute;right:0;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:8px solid #cdad74;top:55%;transform:translate(0,-50%)}
.katalog__sort .select-arrow:after{transform:translate(0,-50%) rotate(180deg)}
.katalog__sort .select-selected{padding-right:20px}
.katalog__sort .select span,.katalog__sort .select-selected{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.katalog__sort .select-items{position:absolute;top:calc(100% + 16px);right:-20px;z-index:2;border:1px solid #efefef;padding:16px 20px;background:#fff;width:192px;display:flex;flex-direction:column;gap:8px;opacity:1;visibility:visible;transition:all .4s ease}
.katalog__sort .select-hide{opacity:0;visibility:hidden;transition:all .4s ease}

/* BLOG PAGINATION */
.pagination{margin-top:100px;display:flex;align-items:center;justify-content:center;width:100%}
.pagination a,.pagination span{border:1px solid #888;border-right:none;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;transition:all .4s ease}
.pagination a:last-child{border-right:1px solid #888}
.pagination a:hover,.pagination span{background:#551c25!important;color:#fff;transition:all .4s ease}
.pagination .page-numbers:hover img{-webkit-filter:invert(1);filter:invert(1)}
.pagination .prev img{transform:rotate(180deg)}
.pagination-info{text-align:center;opacity:.5;margin:20px 0}

@media (max-width:1110px){
.blog-title{margin-bottom:30px}
.blog__items>div{width:50%}
}
@media (max-width:700px){
.blog__items>div{width:50%}
.blog__item span{font-size:18px;margin-bottom:15px}
.blog__item-img{height:200px}
}
@media (max-width:600px){
.blog__items>div{width:100%}
.blog__item-img{height:280px}
.blog__item .btn{width:100%}
}
@media (max-width:480px){
.blog__item-img{height:200px}
.katalog__sort{width:100%}
.katalog__sort .select-items{width:calc(100% + 40px);left:-20px;right:-20px}
}

/* SINGLE POST */
.article{align-items:flex-start;justify-content:space-between}
.article__aside{width:432px}
.article__aside>img{width:100%;height:auto;-o-object-fit:cover;object-fit:cover;margin-bottom:51px}
.article__aside-content{margin:0 10px;border:1px solid #88434e;padding:18px 18px 54px;gap:50px;text-align:center}
.article__aside-content h3{font-size:24px;font-weight:700;max-width:262px;width:100%}
.article__aside-content .social{gap:20px}
.article__aside-content .social a{width:46px;height:46px}
.article__aside-content .social a:hover img{-webkit-filter:brightness(0);filter:brightness(0)}
.article__content{width:calc(100% - 456px);font-size:20px}
.article__content ol,.article__content ul{margin-left:20px}
.article__content a{color:#88434e;border-bottom:1px solid #88434e;transition:all .4s ease}
.article__content a:hover{color:#4f2028;border-bottom:1px solid #4f2028}
.post{margin-bottom:15px}
.post h1{font-size:24px;margin-bottom:30px;text-transform:unset}

@media (max-width:992px){
.article{flex-direction:column}
.article h1,.article h2{order:1}
.article h1{margin-bottom:30px}
.article__content{width:100%;order:2;margin-bottom:40px}
.article__aside>img{margin-bottom:30px}
.article__aside{width:100%;order:3}
.article__aside-content{gap:30px;margin:0;padding:18px}
}
@media screen and (max-width:767px){
.article__aside-content h3{max-width:320px}
}