.fx-recent-blog-sec{
  padding-block:100px;
  background-color: var(--neutral-100);
}

.fx-recent-blog-sec-header{
  text-align: center;
  margin-bottom:64px;
}

.fx-recent-blog-card-wrraper{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3, 1fr);
}

.fx-recent-blog-card{
  background-color: var(--white);
  border-radius: 24px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fx-recent-blog-card-img {
  max-height:315px;
  height:100%;
}

.fx-recent-blog-card-img img{
  height:100%;
  /*   width:100%; */
  object-fit:cover;
}

.fx-recent-blog-info{
  padding: 24px;
  display: flex;
  height:100%;
  flex-direction: column;
  background-color:var(--background);
}

.fx-recent-blog-tag-wrraper{
  flex-wrap:wrap;
  display:flex;
  align-items: center;
  gap:8px;
  margin-bottom:32px;
}

.fx-recent-blog-tag{
  border-radius: 24px;
  padding:2px 10px;
  font-weight: 400;
  font-size:14px;
}

.fx-recent-blog-date{
  font-size:14px;
  color:var(--primary);
  margin-bottom:16px;
  font-weight:600;
}

.fx-recent-blog-card-title {
  margin-bottom:16px;
}

.fx-recent-blog-card-content{
  margin-bottom:32px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.fx-recent-blog-card-link{
  margin-top:auto;
  display: flex;
  gap: 8px;
  color:var(--primary);
}
.fx-recent-blog-bottom{
  display: flex;
  justify-content: center;
  margin-top: 64px;
}
.fx-recent-blog-btn-wrraper a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
}
@media only screen and (max-width: 991.99px) {
  .fx-recent-blog-sec {
    padding-block: 50px;
  }
  .fx-recent-blog-card-wrraper{
    gap:24px;
    grid-template-columns:repeat(2, 1fr);
  }

}
@media only screen and (max-width: 639.99px) {
  .fx-recent-blog-sec-header {
    margin-bottom: 40px;
  }
  .fx-recent-blog-card-wrraper{
    margin-bottom:64px;
    gap:24px;
    grid-template-columns:repeat(1, 1fr);
  }
  .fx-recent-blog-info {
    padding: 18px;
  }
  .fx-recent-blog-card-img img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
  .fx-recent-blog-card-content {
    margin-bottom: 20px;
  }
  .fx-recent-blog-bottom {
    margin-top: 40px;
  }
}