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

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

.phrases_listed {
   background: var(--darker-background);
   padding: 15px;
   border-radius: 10px;
   position: relative;
   transition: all 0.25s;
   /* background: linear-gradient(180deg, var(--darker-background), transparent); */
   display: grid;
   /* grid-template-columns: auto 1fr; */
   /* gap: 15px; */
}

.phrases_listed a {
   text-decoration: none;
   transition: all 0.25s;
}

.phrases_listed a:hover {
   color: #c5c5c5;
}

.phrases_page_title {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 15px;
}

.phrases_pic {
   width: 121px;
   height: 63px;
   border-radius: 5px;
}

.phrases_page_time {
   font-size: 13px;
   color: #c3c3c3;
}

.phrases_page_post_title {
   padding-bottom: 10px;
   /* margin-bottom: 10px;
   border-bottom: 1px solid #ffffff63; */
   width: fit-content;
}

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



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

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

.phrases_post {
   background-color: var(--darker-background);
   /* border: 1px solid white; */
   border-radius: 10px;
   position: relative;
   padding: 15px 20px;
   line-height: 1.5;
}

.phrases_post p {
   margin: 0;
}

.phrases_single_pic {
   width: 50%;
   border-radius: 5px;
   float: right;
   margin: 0 0 10px 10px;
}

.phrases_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) {
   .phrases_single_pic {
      width: 100%;
   }
 }