/* 視覺化元素之間的關係 */
.debug *, .debug {
/*   outline: 1px solid gold; */
}
/* 設定基底字體大小 */
html {
  font-size: 12px;
}

html, body{
  width: 100%;
  height: 100%;
}
/* 取消預設空隙 */
html, body, h1, h2, h3, h4, p {
  padding: 0;
  margin: 0;
}

.video {
  width: 200px; height: 180px;
  margin: 20px;
  padding-bottom: 10px;
  box-shadow: 0px 2px 20px 0px rgba(100,100,100,0.3);
  border-radius: 10px;
/*  隱藏超出範圍的內層元素  */
  overflow: hidden;
}

/* 把圖片放在 background-image：圖片寬高就會與元素一致 */
.video__thumbnails {
  height: 70%;
  background-image: url('https://miro.medium.com/max/576/1*rGAhIufeK8aenD4Lns_XeQ.jpeg');
/*   讓圖片隨元素裁剪，而不會壓縮比例 */
  background-size: cover;
}

.video__info {
  padding: 10px;
}

/* em: 以母元素的基礎字體大小作為倍數的單位 */
/* 若母元素為 12px，1em = 12px；1.5em = 18px */
/* rem: 以根元素的基礎字體大小作為倍數的單位，便於統一管理樣式*/
.video__title {
  font-size: 1.6rem;
}

.video__date {
  font-size: 1.2rem;
}

.video__time {
  font-size: 1rem;
  color: gray;
}
/* inline-block：兼具 block 擁有寬高的特性，又像 inline 能夠水平排列 */
.video__mark {
  vertical-align: baseline;
  margin-right: 10px;
  background: #ffda03;
  border-radius: 50%;
  width: 1rem; height: 1rem;
  display: inline-block;
}