.blog {
   padding: 40px 0;
   background-color: #f9f9f9;
}
 .blog__tabs {
   margin-top: 24px;
}
 .blog__grid {
   display: none;
   gap: 12px;
   margin-top: 24px;
}
 .blog__grid.active {
   display: grid;
}
 .blog__btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   color: #000;
   font-size: 16px;
   font-weight: 500;
   line-height: 24px;
   padding: 12px 24px;
   border-radius: 12px;
   background-color: transparent;
   border: 1px solid #000;
   margin-top: 24px;
   transition: 0.3s color, 0.3s background-color, 0.3s border;
}
 .blog__btn--desktop {
   display: none;
}
 .blog__btn svg {
   width: 24px;
   height: 24px;
   fill: #000;
   transition: 0.3s fill;
}
 .blog__btn:hover {
   background-color: #275894;
   color: #fff;
   border: 1px solid #275894;
}
 .blog__btn:hover svg {
   fill: #fff;
}
 @media screen and (min-width: 992px) {
   .blog {
     padding: 64px 0;
  }
   .blog__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
  }
   .blog__tabs {
     margin-top: 32px;
  }
   .blog__grid {
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     margin-top: 48px;
  }
   .blog__btn {
     margin-top: 0;
  }
   .blog__btn--desktop {
     display: flex;
  }
   .blog__btn--mobile {
     display: none;
  }
}

.blog-card__picture {
   display: block;
}
 .blog-card__img {
   width: 100%;
   aspect-ratio: 1.09375;
   object-fit: cover;
   object-position: center;
   border-radius: 12px;
}
 .blog-card__row {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-top: 24px;
}
 .blog-card__tag {
   color: #fff;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: -0.14px;
   border-radius: 8px;
   background-color: #275894;
   padding: 4px 8px;
}
 .blog-card__date {
   color: #000;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: -0.14px;
}
 .blog-card__title {
   color: #000;
   font-size: 20px;
   font-weight: 600;
   line-height: 28px;
   letter-spacing: -0.4px;
   margin-top: 8px;
}
 .blog-card__author {
   color: #000;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: -0.14px;
   margin-top: 8px;
}

.tabs {
   display: flex;
}
 ul.tabs__list {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
   border-radius: 12px;
   background-color: #f2f2f2;
   padding: 4px;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;

  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/old Edge */
  user-select: none;
}

 ul.tabs__list.is-dragging {
  cursor: grabbing;
  user-select: none;
}

 ul.tabs__list::-webkit-scrollbar {
  width: 0;
  height: 0;
 }
 .tabs__item {
   color: #000;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
   padding: 10px 16px;
   border-radius: 12px;
   white-space: nowrap;
   cursor: pointer;
   transition: 0.3s color, 0.3s background-color;
}
 .tabs__item.active {
   color: #fff;
   background-color: #275894;
}