This stylesheet uses CSS grids to force a consistent look between link posts and image posts when using the compact layout option. There's probably a better way to accomplish this, but this is quick & dirty & it works.

It probably doesn't play nice with different page layouts triggered at smaller breakpoints.

.col.post_teaser_body {  
  display: grid;  
  grid-template-columns: auto 170px;  
}  

.col.post_teaser_body h3 {  
  grid-column: 1;  
  grid-row: 1;  
}  

.col.post_teaser_body .author {  
  grid-column: 1;  
  grid-row: 2;  
}  

.col.post_teaser_body .post_teaser_image_preview {  
  align-self: end;  
  margin-left: auto;  
  grid-column: 2;  
  grid-row: 1/3;  
  height: 90px;  
  width: 170px;  
  overflow: hidden;  
}  

.col.post_teaser_body .post_teaser_image_preview .post_link {  
  width: 100%;  
}  

.col.post_teaser_body .post_teaser_image_preview .post_link img {  
  object-fit: cover;  
  width: 100%;  
}  

.col.post_teaser_body .col_thumbnail.thumbnail {  
  grid-column: 2;  
  grid-row: 1/3;  
}  

.col.post_teaser_body .post_utilities_bar {  
  grid-row: 3;  
  grid-column: 1/3;  
}  

Slightly improved version:

div.post_teaser {  
  padding-top: 8px;  
  padding-bottom: 8px !important;  
}  

.col.post_teaser_body {  
  display: grid;  
  grid-template-columns: auto 170px;  
}  

.col.post_teaser_body h3 {  
  grid-column: 1;  
  grid-row: 1;  
}  

.col.post_teaser_body .author {  
  grid-column: 1;  
  grid-row: 2;  
}  

.col.post_teaser_body .post_teaser_image_preview {  
  margin-left: auto;  
  margin-top: 0;  
  grid-column: 2;  
  grid-row: 1/4;  
  height: 90px;  
  width: 170px;  
}  

.col.post_teaser_body .post_teaser_image_preview .post_link {  
  width: 100%;  
  height: 100%;  
}  

.col.post_teaser_body .post_teaser_image_preview .post_link img {  
  object-fit: cover;  
  object-position: center;  
  width: 170px;  
  height: 100%;  
  border-radius: 5px;  
}  

.post_list .post_teaser .thumbnail img, .post_teaser_image_preview img {  
  border-radius: 5px;  
}  

.col.post_teaser_body .col_thumbnail.thumbnail {  
  grid-column: 2;  
  grid-row: 1/4;  
  height: 100%;  
}  

.col.post_teaser_body .post_utilities_bar {  
  grid-row: 3;  
  grid-column: 1/2;  
}  

div.navbar {  
  min-height: 40px;  
}  

div.navbar a.navbar-brand {  
  line-height: 40px;  
  padding-top: 0;  
  padding-bottom: 0;  
}  

div.navbar .navbar-brand img {  
  width: 20px;  
  height: 20px;  
}  

Looks good!

This seems to work really well on desktop and mobile. Thanks for doing the work on this.

how would you do this with thumbnails on the left instead of right? the center of my screen is empty space; it doesn't make sense for me to have the thumbnail on the right. gotta put it beside the start of the title so that you can eyeball the thumbnail and the title at the same time, instead of ping-ponging across the empty space after the end of the title but before the thumbnail

The elements are positioned via the use of CSS grid. Horizontal position is set with the grid-column property. So if you set the grid-column for the previews to 1, and shift everything else's column over, you should get the images on the left.

Thanks this is working really well!