.grammar_page {
   padding: 15px;
   margin: 0 0 40px 0;
   display: grid;
   gap: 20px;
}

.grammar_page h1 {
   padding: 0;
   margin: 0;
}

.grammar_page_post_title {
   padding-bottom: 10px;
   width: fit-content;
}

.grammar_post_excerpt {
   font-style: italic;
   font-weight: 300;
   margin-top: 10px;
}

.grammar_container {
   padding: 15px 0;
   display: grid;
   gap: 20px;
}

.grammar_container h2 {
   font-weight: 700;
   font-size: 18px;
   margin: 25px 0 5px 0;
   display: flex;
   align-items: center;
}

.grammar_post {
   background-color: var(--darker-background);
   border-radius: 10px;
   position: relative;
   padding: 15px 20px;
   line-height: 1.5;
}

.grammar_post p {
   margin: 0;
}

.grammar_single_pic {
   width: 245px;
   height: 128px;
   border-radius: 5px;
   float: right;
   margin: 0 0 10px 10px;
}

.grammar_container h1 {
   padding: 0;
   margin: 0;
   z-index: 5;
}

.why_people_make_it,
.what_is_correct {
   background: var(--darker-background);
   padding: 20px 20px 10px 20px;
   width: fit-content;
   border-radius: 10px;
   position: relative;
   margin-top: 20px;
}

@media only screen and (max-width: 600px) {
   .grammar_single_pic {
      width: 40%;
      height: auto;
      margin: 0 0 10px 10px;
   }
 }