style.css

/* Basic Reset */
body, h1, p {
 margin: 0;
 padding: 0;
}

/* Styles for Header */
header {
 padding: 2rem;
 background-color: lightblue;
 text-align: center;
}

/* Main Content Area */
main {
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 gap: 1rem;
 max-width: 120rem;
 margin: 0 auto;
 padding: 2rem;
}

/* Post Section */
.posts {
 grid-column: span 9;
}

.post {
 background-color: lightsalmon;
 padding: 1rem;
 margin-bottom: 2rem;
}

.post time {
 color: grey;
}

/* Sidebar Section */
.sidebar {
 grid-column: span 3;
}

/* Footer */
footer {
 grid-column: span 12;
 padding: 1rem;
 background-color: darkgray;
 text-align: center;
}

/* Media Queries for Responsiveness */
@media only screen and (max-width: 768px) {
 main {
   grid-template-columns:repeat(6, 1fr);
 }
 .posts {
   grid-column: span 4;
 }
 .sidebar {
   grid-column: span 2;
 }
}

@media only screen and (max-width: 500px) {
 main {
   grid-template-columns:1fr;
 }
 .posts, .sidebar {
   grid-column: span 1;
 }
}