.blog-header{

  padding:
  160px 7% 90px;

  position:relative;

  overflow:hidden;
}

.blog-header h1{

  font-size:
  clamp(3rem,7vw,5.5rem);

  line-height:.95;

  letter-spacing:-3px;

  color:var(--dark);

  max-width:800px;

  margin-bottom:24px;
}

.blog-header .sub{

  color:var(--light);

  max-width:620px;

  font-size:1.1rem;
}

.rule{

  border:none;

  border-top:1px solid var(--border);

  margin:0 7%;
}

/* =========================
   FEATURED
========================= */

.featured{

  padding:100px 7%;

  display:grid;

  grid-template-columns:
  1fr 500px;

  gap:60px;

  align-items:center;
}

.featured-text h2{

  font-size:
  clamp(2rem,4vw,3rem);

  line-height:1.05;

  letter-spacing:-1px;

  color:var(--dark);

  margin-bottom:22px;
}

.excerpt{

  color:var(--light);

  margin-bottom:20px;
}

.featured-img-wrap{

  width:100%;
}

.featured-img-wrap img{

  width:100%;

  height:420px;

  object-fit:cover;

  border-radius:32px;

  box-shadow:var(--shadow);
}

/* =========================
   POSTS
========================= */

.posts-list{

  padding:0 7% 100px;
}

.post-row{

  display:grid;

  grid-template-columns:
  90px 1fr 300px;

  gap:40px;

  padding:40px;

  background:white;

  border-radius:28px;

  border:1px solid var(--border);

  margin-bottom:26px;

  transition:var(--transition);

  box-shadow:var(--shadow);
}

.post-row:hover{

  transform:
  translateY(-6px);
}

.post-row-num{

  font-size:3rem;

  font-weight:900;

  color:
  rgba(20,110,245,.12);
}

.post-row-tag{

  display:inline-flex;

  padding:8px 14px;

  border-radius:100px;

  background:
  rgba(22,179,100,.12);

  color:var(--green);

  font-size:.75rem;

  font-weight:700;

  margin-bottom:18px;
}

.post-row-title{

  font-size:1.5rem;

  color:var(--dark);

  margin-bottom:14px;

  line-height:1.2;
}

.post-row-excerpt{
  color:var(--light);
}

.post-row-img{

  width:100%;

  height:220px;

  object-fit:cover;

  border-radius:24px;
}

/* =========================
   READ MORE
========================= */

.full-content{

  max-height:0;

  overflow:hidden;

  transition:
  max-height .5s ease,
  margin-top .4s ease;

  margin-top:0;
}

.full-content.open{

  max-height:1000px;

  margin-top:22px;
}

.post-read-more{

  display:inline-flex;

  margin-top:18px;

  color:var(--blue);

  font-weight:700;

  text-decoration:none;

  transition:var(--transition);
}

.post-read-more:hover{
  opacity:.8;
}

/* =========================
   TABLETS
========================= */

@media(max-width:1000px){

  .featured{

    grid-template-columns:1fr;

    gap:40px;
  }

  .post-row{

    grid-template-columns:1fr;

    gap:28px;
  }

  .post-row-num{
    display:none;
  }

  .featured-img-wrap img{

    height:360px;
  }

  .post-row-img{

    height:300px;
  }
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

  .blog-header{

    padding:140px 5% 80px;
  }

  .blog-header h1{

    letter-spacing:-2px;

    line-height:1;
  }

  .featured,
  .posts-list{

    padding-left:5%;

    padding-right:5%;
  }

  .featured{

    padding-top:80px;

    padding-bottom:80px;
  }

  .rule{
    margin:0 5%;
  }

  .featured-text h2{

    font-size:2rem;
  }

  .featured-img-wrap img{

    height:260px;

    border-radius:24px;
  }

  .post-row{

    padding:24px;

    border-radius:22px;
  }

  .post-row-title{

    font-size:1.3rem;
  }

  .post-row-img{

    height:220px;

    border-radius:18px;
  }

  .post-row-tag{

    font-size:.7rem;
  }
}

/* =========================
   SMALL MOBILE
========================= */

@media(max-width:480px){

  .blog-header h1{

    font-size:2.5rem;
  }

  .featured-text h2{

    font-size:1.7rem;
  }

  .featured-img-wrap img{

    height:220px;
  }

  .post-row{

    padding:20px;
  }

  .post-row-title{

    font-size:1.15rem;
  }

  .post-row-img{

    height:200px;
  }

  .post-read-more{

    font-size:.95rem;
  }
}