.block-blog{
   display: grid;
   grid-template-columns: minmax(250px,400px) 1fr;
   align-items: start;
   gap: 40px;
   grid-template-areas:  "side cards" "side loadmore";

   position: relative;
   /* padding-inline: 32px; */
}

.block-blog__main{
   display: grid;
   grid-template-columns: repeat(auto-fill,minmax(clamp(340px,4vw,370px),1fr));
   gap: 24px;
   grid-area: cards;
}

.block-blog__card .elementskit-post-body {
padding-inline: 0 !important;
padding-top: 16px !important;
padding-bottom: 0 !important;
}
.block-blog__card-img img{
   height: 100%;
   min-height: 270px;
   max-height: 270px;
   object-fit: cover;
}
.block-blog__card-cat{
   color:#41B3E6 !important;
}
.block-blog__card-text p{
   line-height: 1.4;
   font-size: 14px;
color: #0D1B2E;
}
.block-blog__card .post-meta-list{
   display: flex;
   align-items: center;
   gap: 6px;
   flex-wrap: wrap;
}

.block-blog__side-wrp{
   grid-area: side;
   background-color: #F8FAFF;
   border-radius: 32px;
   padding: 32px;

   position: sticky;
   top: 60px;
   z-index: 20;  
   /* box-shadow: 0 0 2px 7px rgba(248, 250, 255, 1); */
}
.block-blog__side{
   display: flex;
   flex-direction:column;
   gap: 16px;
}
.blog-filter__row{
   display: flex;
   flex-direction:column;
   gap: 4px;
}
.blog-filter__form{
   display: flex;
   flex-direction:column;
   gap: 16px;
}
.blog-filter__form-inner{
   display: flex;
   flex-direction:column;
   gap: 16px;
}
.blog-filter__btns{
   order: 2;
   display: flex;
   align-items: center;
   gap: 16px;
}
.blog-filter__row label{
   line-height: 1;
   font-weight: 700;
   font-size: 16px;
   color: #0D1B2E;
}

.block-blog__spinner{
   position: absolute;
   z-index: 40;
   inset: 0;
   width: 100%;
   height: 100%;
   /* opacity: 0; */
   background-color: rgb(248, 250, 255,0.5);

    /* display: none; */

   display: flex;
   align-items: start;
   justify-content: center;
   padding: 100px;

   display: none;
   opacity: 0;
}
.block-blog__spinner.active{
   display: flex;
   opacity: 1;
}
.block-blog__spinner span {
   position: relative;
   z-index: 22;
   width: 100px;
   flex: 0 0 100px;
   height: 100px;
   background-image: url('../assets/img/spinner.gif');
   background-repeat: no-repeat;
   background-position: center center;
   background-size:100% 100%;

   border-radius: 50%;  
   opacity: 0;
}
.block-blog__card-icon{
   width: 14px;
   height: 12px;
   background-image: url('../assets/img/calendar.png');
   background-repeat: no-repeat;
   background-position: center center;
   background-size:100% 100%;

}
.block-blog__loadmore-wrap{
   display: flex;
   justify-content: center;
   align-items: center;
   grid-area: loadmore;
}
.block-blog__loadmore-wrap button{
   cursor: pointer;
}
.block-blog__side-switcher{
  /* order: 1; */
 }
@media (min-width:1024.98px) {
   .block-blog__side-switcher{
     display: none !important;
   }
  }

@media (max-width:1024.98px) {
   .block-blog__main{
      grid-template-columns: repeat(2,1fr);
      gap: 16px;
   }
   .block-blog{
      grid-template-columns: 1fr;
      gap: 24px;
      grid-template-areas:  "side " "cards" "loadmore";
   }
   .blog-filter__form{
      gap: 20px;
      overflow: auto;
   }
   .blog-filter__form-inner{
     display: none;
     padding-top: 20px;
     position: relative;
     max-height: 70%;
     overflow: auto;
   }
   .block-blog__side-wrp{
      /* top: 94px; */
      position: fixed;
      z-index: 50;
      bottom: 10px;
      inset-inline: 16px;

      top: initial;
      height: auto;
      /* height: fit-content; */
      background-color: #F8FAFF;
      /* border: 1px solid #0d1b2e95; */
      box-shadow: 0 0 4px 1px #0d1b2e61;
      border-radius: 8px;
      padding-block: 8px;
      padding-inline: 16px;
   }
   .block-blog__form-inner{
      padding-top: 20px;
   }
   .blog-filter__row:not(:last-child){
      margin-bottom: 12px;
   }
   .blog-filter__btns{
      display: grid;
      grid-template-columns: repeat(2,1fr);
   }
   .blog-filter__btns button{
      width: 100%;
   }
   .blog-filter__btns .blog-filter__clear{
      background-color: transparent !important;
      border-color: #0D1B2E !important;
      color: #0D1B2E !important;
   }
   .blog-filter__btns .blog-filter__clear:hover{
      background-color:#0D1B2E !important;
      border-color: #F8FAFF !important;
      color: #F8FAFF !important;
   }
  }

  @media (max-width:767.98px) {
   .block-blog__main{
      grid-template-columns: 1fr;
   }
   .blog-filter__btns{
      display: flex;
      flex-direction:column-reverse;

   }

  }
  .block-blog__card-cats span{
   margin: 0 !important;
  }
  .block-blog__card-cats{
   display: flex !important;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
   gap:8px;
  }