.list_event_container{
  border-radius:5px;
  margin:10px;
  padding:30px;
  min-width:300px;
  position:relative;
}
/* zebra */
.list_event_container:nth-child(odd){
  background:#eee;
  border:1px solid #999;
}
.list_event_container:nth-child(even){
  border:1px solid #ccc;
}

/* make the thumbnail wrap with 15px gap */
.list_event_thumb{
  float:left;
  width:180px;
  margin:0 15px 15px 0; /* <-- 15px wrap space */
}
.list_event_thumb img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:4px;
}

/* let text flow around the floated image */
.list_event_description{
  overflow:hidden; /* establishes a new block formatting context so it sits next to the float */
  min-width:250px; /* optional – remove if you want tighter wrap on small widths */
}

/* button */
.list_event_btn.button{
  background:#136F42;
  border-radius:5px;
  color:#fff;
  float:right;
  display:inline-block;
  padding:.6em 1em;
  text-decoration:none;
}

/* clearfix in case you add more blocks after */
.list_event_container::after{
  content:"";
  display:block;
  clear:both;
}

/* responsive: stack image on small screens */
@media (max-width: 600px){
  .list_event_thumb{
    float:none;
    width:100%;
    margin:0 0 15px 0;
  }
  .list_event_description{
    overflow:visible;
    min-width:0;
  }
  .list_event_btn.button{
    float:none;
  }
}
