* { margin:0px; padding:0px; }
.postlist-wrapper { display:flex; flex-direction:column; flex-wrap:wrap; list-style-type:none; margin:0px; padding:0px; }
.postlist-item { border:5px solid white; background-size:cover; background-repeat:no-repeat; position:relative; background-color:#487A90; background-position:center center; background-position:10% 5%; background-size:80%; background-image:url("noimage.png"); cursor:pointer; }
.postlist-item1 { order:1; }
.postlist-item2 { order:2; }
.postlist-item3 { order:3; }

.postlist-wrapper-211 { height:500px; } 
.postlist-wrapper-211 .postlist-item1 { flex:0 0 100%; width:67%; height:100%; }
.postlist-wrapper-211 .postlist-item2, .postlist-wrapper-211 .postlist-item3 { flex:0 0 50%; width:33%; height:50%; }

.postlist-wrapper-112 { height:500px; } 
.postlist-wrapper-112 .postlist-item1, .postlist-wrapper-112 .postlist-item2 { flex:0 0 50%; width:33%; height:50%; }
.postlist-wrapper-112 .postlist-item3 { flex:0 0 100%; width:67%; height:100%; }

.postlist-wrapper-111 { height:250px; } 
.postlist-wrapper-111 .postlist-item1, .postlist-wrapper-111 .postlist-item3 { flex:0 0 100%; width:33%; height:100%; }
.postlist-wrapper-111 .postlist-item2 { flex:0 0 100%; width:34%; height:100%; }

.postlist-item-text { position:absolute; left:0px; right:0px; bottom:0px; color:white; font-weight:300; text-shadow:2px 2px 3px black; background-color:rgba(1,1,1,0.30); padding:10px; margin:0px; }
.postlist-item-text span { display:block; color:white; }
.postlist-item-text .category { text-transform:uppercase; color:rgb(255, 196, 128); }
.postlist-item-text .title { font-weight:600; font-size:1.5em; color:white; }
.postlist-item-text .circled-image { display:inline-block; font-style:normal; height:32px; width:32px; line-height:29px; -moz-border-radius:16px; border-radius:16px; background-color:rgb(255, 128, 0); color:white; font-weight:300; text-align:center; font-size:18px; vertical-align:middle; text-shadow:none; border:1px solid rgb(255, 128, 128); text-align:center; padding:0px; }

@media all and (max-width:992px) {
  .postlist-wrapper-211 { height:400px !important; } 
  .postlist-wrapper-112 { height:400px !important; } 
  .postlist-wrapper-111 { height:200px !important; }
  .postlist-item-text { font-size:0.85em; }
}

@media all and (max-width:768px) {
  .postlist-wrapper-211 { height:300px !important; } 
  .postlist-wrapper-112 { height:300px !important; } 
  .postlist-wrapper-111 { height:150px !important; } 
  .postlist-item-text { font-size:0.7em; }
}

@media all and (max-width:576px) {
  /* We tell both sidebars to share a row */
  .postlist-wrapper { display:block !important; width:100% !important; }
  .postlist-wrapper-211 { flex-direction:none !important; height:800px !important; }
  .postlist-wrapper-112 { flex-direction:none !important; height:800px !important; }
  .postlist-wrapper-111 { flex-direction:none !important; height:600px !important; }
  .postlist-wrapper-211 .postlist-item1 { flex:none !important; width:100% !important; height:400px !important; }
  .postlist-wrapper-112 .postlist-item3 { flex:none !important; width:100% !important; height:400px !important; }
  .postlist-item1, .postlist-item2, .postlist-item3 { flex:none !important; width:100% !important; height:200px !important; }
  .postlist-item-text { font-size:0.85em; }
}