// makes it so images don't bleed into the content on the right
.catalog img {
  max-width: 100%;
  height: auto;
}

.document-thumbnail {
  img {
    width: 100%;
  }
}

.document {
  .list-thumbnail {
    width: 30%;
    float: left;
  }

  .metadata {
    width: 70%;
    display: inline-block;
  }
}

// Styles added to help with newly implemented
// Bootstrap row / column setup for search results
.search-result-wrapper {
  border-bottom: 1px dashed #ccc;
  margin-bottom: 30px;
  padding-bottom: 0;

  .search-results-title-row {
    align-items: center;
    display: flex;
    padding: 0 0 15px;

    .search-result-title {
      display: inline-block;
      margin: 0 15px;
      font-size: 18px;
    }

    @media (max-width: 768px) {
      display: block;

      > .search-result-title {
        display: block;
        padding-bottom: 5px;
      }

      .label {
        margin-left: 15px;
      }
    }
  }

  .list-thumbnail {
    float: none;
    padding-bottom: 20px;
    width: 100%;

    @media (max-width: 768px) {
      img {
        max-height: 200px;
      }

    }
  }

  .collection-icon-search {
    padding-bottom: 20px;
  }

  .metadata {
    width: 100%;
  }

  .collection-counts-wrapper {
    text-align: right;

    @media (max-width: 992px) {
      text-align: left;
    }

    .collection-counts-item {
      background-color: #f5f5f5;
      color: #666;
      display: inline-block;
      font-size: 13px;
      font-weight: bold;
      margin-left: 10px;
      padding: 8px;
      text-align: center;

      &:first-child {
        margin-left: 0;
      }

      span {
        display: block;
        font-size: 18px;
        font-weight: normal;
        line-height: 1;
      }
    }
  }

  @media (max-width: 768px) {
    padding-bottom: 20px;

    > div {
      padding-bottom: 10px;
    }
  }
}