.page-header{
    width:980px;
    margin:auto;
}
.blog-layout{
  display:flex;
  gap:30px;
  width:980px;
  margin:auto;
}
.latest-posts{
  width:700px;
}
.blog-sidebar{
  width:250px;
  border-left:
  1px solid #ccc;
  padding-left:20px;
}

.blog-card{
  display:flex;
  height:130px;
  gap:15px;
  padding:15px;
  margin-bottom:15px;
  background:
      linear-gradient(
          to bottom,
          #fafafa 0%,
          #eeeeee 100%
      );
  border:8px solid #ffffff;
  border-radius:12px;
  box-shadow:
  0 2px 8px rgba(0,0,0,.30);
  text-decoration:none;
  color:black;
}
.blog-card img{
width:170px;
height:100px;
object-fit:cover;
border-radius:8px;
}
.blog-card h2{
font-size:20px;
margin:0 0 8px;
}
.blog-card p{
margin:0;
font-size:14px;
}
.blog-card span{
font-size:12px;
color:#777;
}

.blog-sidebar h2{
margin-top:0;
}
.blog-sidebar h3{
font-size:16px;
border-bottom:
1px solid #ddd;
}
.blog-sidebar ul{
list-style:none;
padding:0;
}
.blog-sidebar li{
margin:
8px 0;
}
.blog-sidebar a{
color:#333;
text-decoration:none;
}
.blog-sidebar a:hover
{
text-decoration:underline;
}