/* ==========================================================================
   Blog lista page
   ========================================================================== */
.blog-hero{
  background:url('../../images/backgrounds/mosaic-pattern.png') repeat;
  text-align:center;
  padding:64px 20px 74px;
}
.blog-hero h1{font-size:42px;font-weight:700;color:var(--heading);margin-bottom:20px}
.blog-hero p{font-size:17px;color:var(--body);margin-bottom:26px}

.blog-layout{display:grid;grid-template-columns:250px 1fr;gap:44px;padding:56px 0 40px}
.blog-cats{align-self:start}
.blog-cats button{
  display:block;width:100%;text-align:left;
  font-size:13px;color:var(--heading);
  padding:9px 14px;border-radius:5px;margin-bottom:6px;
  transition:background-color .25s,color .25s;
}
.blog-cats button:hover{color:var(--green)}
.blog-cats button.is-active{background:var(--green);color:var(--white)}

.blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 30px;align-self:start}
.blog-card{
  border:1px solid #E8EAEC;border-radius:8px;overflow:hidden;
  background:var(--white);
  display:flex;flex-direction:column;
  transition:box-shadow .3s;
}
.blog-card:hover{box-shadow:var(--shadow-card)}
.blog-card__img{display:block;aspect-ratio:3/2;overflow:hidden}
.blog-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.blog-card:hover .blog-card__img img{transform:scale(1.04)}
.blog-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.blog-card__chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.blog-card__chips span{
  font-size:11px;color:var(--green);
  background:#E8F7EF;border-radius:4px;
  padding:5px 10px;
}
.blog-card__title{font-size:19px;line-height:1.35;font-weight:600;color:var(--heading);margin-bottom:16px}
.blog-card__title a:hover{color:var(--green)}
.blog-card__rt{font-size:13px;color:var(--body);margin:auto 0 14px}
.blog-card__meta{display:flex;align-items:center;gap:10px}
.blog-card__meta img{width:36px;height:36px;border-radius:50%}
.blog-card__meta strong{display:block;font-size:13px;font-weight:600;color:var(--heading)}
.blog-card__meta time{font-size:12px;color:var(--body)}

@media (max-width:1024px){
  .blog-layout{grid-template-columns:1fr;gap:30px}
  .blog-cats{display:flex;flex-wrap:wrap;gap:6px}
  .blog-cats button{width:auto}
}
@media (max-width:767px){
  .blog-hero h1{font-size:30px}
  .blog-grid{grid-template-columns:1fr}
}