/* Styles.css is for elements beyond semantic HTML */

.blog-info {
     margin-block: 2rem;
     font-size: 0.92rem;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 }

 .blog-info__item {
     display: flex;
     gap: 0.5rem;
     align-items: center;
     color: var(--color-gray-dark);
     background-color: var(--color-input-bg);
     width: fit-content;
     padding: 0.25rem 1rem;
     border-radius: 16px;
     border: 1px solid var(--color-border);
		       
     & a {
	 color: inherit;
	 transition: all 0.25s ease-in;
	 text-decoration: none;
     }
     & a:hover {
	 color: var(--color-link);
     }
 }

 ul.blog-posts {
     padding: 0;
     margin: 0;
     list-style-type: none;
 }

 div.blog-post {
     display: flex;
     flex-direction: column;
     padding-block: 1.5rem;

     & span {
	 color: gray;
	 font-size: 0.86rem;
	 margin-bottom: 0.25rem;
     }

     & a {
	 text-decoration: none;
	 max-width: 50ch;
	 font-size: 1rem;
     }

     & a:visited {
	 color: var(--color-link-visited);
     }
 }

 .blog-post__description {
     margin-top: 1rem;
     font-size: 0.92rem;
     max-width: 60ch;
     color: var(--color-text);
     line-height: 1.4;
 }

 ul.blog-posts li:not(:last-child) {
     border-bottom: 1px solid var(--color-border);
 }