#loop .post .date { text-transform: uppercase; font-size: 14px; line-height: 1em; letter-spacing: 0.2em; padding-top: 25px; }
#loop .post h3 { font-weight: 500; font-size: 28px; padding-bottom: 12px; }
#loop .post p {padding-bottom: 0; }
#loop .posts-section .post h3 {padding-bottom: 0; }
#loop.posts-section .post h3 {
	padding-top: 0;
	padding-bottom: 0;
}

#loop .post .content { flex: 1;  }
/** #loop .post .content p { margin-top: 16px; } **/

#loop .post {
	display: flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 32px 40px;
}

#loop .post img {
	width: 144px;
}

#loop .post .thumbnail {
	position: relative;
	margin-left: 32px;
    margin-top: 50px;
}

.related-posts .post .thumbnail {
	position: relative;
	margin-left: 32px;
    margin-top: 0px !important;
}

/* Smaller screens */
@media (max-width: 768px) {
  #loop .post {
    padding: 32px;
    flex-direction: column-reverse;
  }
  
    #loop .post p { padding-top: 0; }
  
  #loop .post h3.black { 
	padding-bottom: 20px; 
	padding-top: 16px; 
  }
  
  .yarpp-related #loop .post h3.black { 
	padding-bottom: 0;
  }
  
  #loop .post .thumbnail {
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 0;
  }
  #loop .post img {
    width: 100%;
  }
}

@media (max-width: 567px) {
 #loop .post h3 {
   font-size: 24px;
  }
  
  #loop .post .content p {
    font-size: 16px;
    line-height: 28px;
  }
}

@media (prefers-color-scheme: light) {
	#loop .post {
		border: 4px solid #F9F9F9;
		border-radius: 10px;
		margin-bottom: 32px;
	}

	#loop .post img {
		height: auto;
		border-radius: 10px;
		border: 1px solid #F0F0F0;
		box-sizing: border-box;
	}
}

@media (prefers-color-scheme: dark) {
	#loop .post {
	  border: 4px solid #363b3c;
	  background-color: #1C2229;
	  color: #fff;
	  border-radius: 10px;
	  margin-bottom: 32px;

  }

  #loop .post .related-posts {
	background-color: #000;
  }

  #loop .post img {
	height: auto;
	border-radius: 10px;
	border: 1px solid #363b3c;
	box-sizing: border-box;
	}
}