body {
  margin:0;
  padding:0;
  width:100%;
  left:0px;
  top:0px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 16px;
}

.entry {
  display:block;
  position:relative;
  float:left;
  height: 96px;
  margin-bottom: 0;
}

a {
  color:#1a1a1a;
  text-decoration:none;
}

span.title {
  display:block;
  font-weight:bold;
  font-size:14px;
  position:relative;
  margin-left:178px;
  margin-right: 8px;
  top:8px;
  word-wrap: break-word;
}

span.duration {
  display:block;
  font-size:11px;
  position:absolute;
  right: 8px;
  bottom:8px;
  color:#eee;
  background: rgba(0, 0, 0, 0.9);
  padding: 2px;
}

span.thumbnail {
  width:170px;
  height: 96px;
  background:#00b2de;
  display:block;
  overflow:hidden;
  position:absolute;
  left:0px;
  top:0px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 2px 0px rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.75);
}



a:hover {
  background: #00b2de;
  color:#fff;
  box-shadow: inset 0 0 2px 0px rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.75);
}
