@import 'variables';
@import 'mixins';

.home.video-page-title {
  text-align: center;
  header {
    font-size: calc(0.9vw + 10px);
  }
}
.video-collection {
  background: var(--body-bg);
  display: flex;
  max-width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  text-align: left;
  @media screen and (min-width: 950px) {
    border-radius: 3px;
  }

  .single-video-article {
    border: solid 1px $light-medium-gray;
    margin: 5px;
    width: 100%;
    padding-bottom: 8px;
    border-radius: 3px;
    @media screen and (min-width: 550px) {
      width: 47%;
    }
    @media screen and (min-width: 739px) {
      width: 31%;
    }
    .video-image {
      position: relative;
      padding-top: 56%;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      background: $black no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    .video-timestamp {
      position: absolute;
      font-size: 0.7em;
      bottom: 11px;
      right: 4px;
      background-color: rgba(0, 0, 0, 0.8);
      color: $white;
      padding: 2px 5px 3px;
      font-weight: 500;
      border-radius: 3px;
    }
    img {
      margin-bottom: 5px;
    }
    p {
      margin: 0px;
      padding: 2px 8px;
      max-height: 100%;
      max-width: 90%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: var(--body-color);
      font-size: 0.95em;
      &.video-username {
        color: var(--card-color-tertiary);
        font-size: 0.88em;
      }
    }
    img {
      max-width: 350px;
      @media screen and (max-width: 739px) {
        min-width: 100%;
      }
    }
  }
}
