public/video-ui/styles/layout/_grid.scss

.grid {
  display: flex;
}

.grid__message {
  align-self: center;
  text-align: center;
  width: 100%;
  font-size: 30px;
}

.grid__list {
  list-style: none;
  padding: 0 0 0 20px;
  text-align: center;

  &__trail {
    text-align: left;
  }
}

.grid__item {
  display: inline-block;

  position: relative;
  border-top: 1px solid $brandColor;

  width: 300px;
  height: 200px;

  margin: 8px;

  white-space: wrap;
  overflow: hidden;
}

.grid__link {

  text-decoration: none;

  cursor: pointer;

  text-align: left;
  display: block;
  width: 100%;
  height: 100%;
  background: $color650Grey;
}

.grid__image {
  width: 100%;
  height: 180px;



  & img {
    width: 100%;
    display: block;
  }
}

.grid__image__placeholder {
  width: 100%;
  height: 180px;
  display: block;
  text-align: center;
  padding-top: 60px;
  background-color: $color800Grey;

}

.grid__item__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: $color700Grey;
  height: 60px;
  min-height: 60px;
}

.grid__item__title {
  font-family: "Guardian Agate Sans";
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 15px;
  line-height: 19px;
  padding: 8px 10px;
  height: 50px;
  overflow: hidden;

  &__assets {
    width: 70%;
    display: inline-flex;
  }
}

.grid__status__overlay {
  position: absolute;
  left: 5px;
  bottom: 70px;
}