.blog-archive-page {
   padding: 40px 0;
}

.blog-achive-title {
   display: flex;
   gap: 20px;
   align-items: flex-end;
}

.blog-archive-control {
   display: flex;
   flex-direction: column;
   gap: 20px;
   flex-grow: 1;
}

.blog-archive-ordering {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   gap: 10px;
}

.blog-archive-ordering .select {
   width: 286px;
}

.blog-tabs-category {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
}


.blog-tab-category-link {
   display: block;
   padding: 8px 14px;
   border-radius: 6px;
   background: #FFF;
   box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.10);
   color: rgba(87, 87, 94, 0.7);
   font-size: 14px;
   font-weight: 600;
   line-height: 16px;
   transition: all .3s;
}

.blog-tab-category.active .blog-tab-category-link,
.blog-tab-category-link:hover {
   color: #232126;
   box-shadow: none;
   background: #FFC839;
}

.blog-archive-ordering p {
   color: #232126;
   font-size: 14px;
   font-weight: 400;
   line-height: 18px;
}

.blog-archive-inner {
   margin-top: 30px;
   box-sizing: border-box;
}

.blog-archive-posts {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 29px 26px;
}

.archive-post-top {
   overflow: hidden;
   border-radius: 15px;
   margin-bottom: 14px;
   display: block;
}

.archive-post-img {
   max-width: 100%;
   height: auto;
   display: block;
   border-radius: 15px;
   object-fit: cover;
   transition: all .5s;
   aspect-ratio: 1 / 0.7;
   cursor: pointer;
}

.blog-archive-post:hover .archive-post-img {
   transform: scale(1.03);
}

.archive-post-bottom {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.archive-post-meta {
   display: flex;
   align-items: center;
}

.post-date {
   display: flex;
   align-items: center;
   gap: 6px;
   flex-wrap: nowrap;
}

.post-date img,
.post-viewer img {
   width: 16px;
   height: 16px;
   object-fit: contain;

}

.post-date span,
.post-viewer span {
   color: #A0A3AA;
   font-size: 14px;
   font-weight: 500;
   line-height: 18px;
}

.post-meta-dot {
   width: 4px;
   height: 4px;
   display: block;
   background: #232126;
   margin-inline: 9px;
   border-radius: 50%;
}

.post-viewer {
   display: flex;
   align-items: center;
   gap: 5px;
   flex-wrap: nowrap;
}

.archive-post-title {
   margin: 0;
   cursor: pointer;
   transition: all .3s;
}

.archive-post-title:hover {
   color: #FFC839;
}

.archive-post-descr {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   align-self: stretch;
   overflow: hidden;
   color: #57575E;
   text-overflow: ellipsis;
   font-size: 14px;
   font-weight: 400;
   line-height: 18px;
}

.post-readmore {
   color: #5C6D8D;
   font-size: 14px;
   font-weight: 500;
   line-height: 18px;
   border-bottom: 1px solid rgba(92, 109, 141, 0.30);
   width: fit-content;
   transition: all .3s;
}

.post-readmore:hover {
   color: #FFC839;
   border-bottom: 1px solid #FFC839;
}


.blog-archive-bottom {
   margin-top: 30px;
   padding-top: 20px;
   display: flex;
   flex-direction: column;
   gap: 40px;
}









@media (max-width: 1024px) {
   .blog-archive-page {
      padding: 30px 0;
   }


   .blog-archive-control {
      gap: 8px;
   }

   .blog-archive-ordering p {
      display: none;
   }

   .blog-archive-ordering img {
      width: 209px;
   }

   .blog-tab-category-link {
      padding: 6px 10px;
      font-size: 13px;
   }

   .blog-tabs-category {
      gap: 6px;
   }

   .blog-archive-inner {
      margin-top: 22px;
   }

   .blog-archive-posts {
      grid-template-columns: repeat(2, 1fr);
      gap: 18px 12px;
   }

   .post-date span,
   .post-viewer span {
      font-size: 13px;
      line-height: 16px;
   }

   .archive-post-bottom {
      gap: 8px;
   }

   .archive-post-descr {
      font-size: 13px;
      line-height: 16px;
   }

   .blog-archive-bottom {
      margin-top: 22px;
      padding-top: 15px;
      gap: 20px;
   }

   .blog-archive-ordering .select {
      width: 209px;
   }

}



@media (max-width: 768px) {

   .blog-archive-page {
      padding: 20px 0 30px;
   }


   .blog-archive-tabs-inner {
      overflow-x: auto;
      width: 100vw;
      padding-left: 14px;
      margin-left: -14px;
   }



   .blog-achive-title {
      gap: 16px;
      align-items: flex-end;
      flex-direction: column;
      align-items: flex-start;
   }

   .blog-tabs-category {
      flex-wrap: nowrap;
      width: max-content;
      overflow-x: auto;
      padding-bottom: 5px;
   }

   .blog-tab-category-link {
      white-space: pre;
   }

   .blog-archive-inner {
      margin-top: 20px;
   }

   .blog-archive-bottom {
      margin-top: 20px;
      padding-top: 20px;
   }

   .blog-archive-control {
      flex-grow: 0;
      max-width: 100%;
   }

   .blog-archive-ordering {
      width: 100%;
   }

   .blog-archive-ordering img {
      width: 100%;
   }

   .blog-archive-ordering .select {
      width: 100%;
   }
}


@media (max-width: 620px) {
   .blog-archive-posts {
      grid-template-columns: repeat(1, 1fr);
   }
}