/* tab 太多时自动换行 */
#videoTabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: left; /* 左对齐 */
}

#videoTabs .nav-item {
	flex: 1 0 100px; /* 默认宽度为100px，并允许tab增长填满空间，但不缩小以下限 */
    flex-grow: 0; /* 防止标签在行中自动伸缩填充额外空间 */
    flex-shrink: 0; /* 防止标签在行压缩空间时缩小 */
}

/* 当屏幕宽度至少为500px时 */
@media (min-width: 500px) {
    #videoTabs .nav-item {
        flex: 1 0 20%; /* 每个tab占据20%的宽度 */
    }
}

/*
 * 实现错列瀑布流
 */
.waterfall {
  /* 两列 */
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;

  /* 列间距 */
  -webkit-column-gap: 5px;
  -moz-column-gap: 5px;
  column-gap: 5px;

  width: 100%;
  max-width: 100%;
}

.waterfall .video-thumbnail {
  position: relative;
  cursor: pointer;
}

.video-thumbnail img {
  width: 100%;
  display: block;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; /* Adjust size as needed */
  height: 64px; /* Adjust size as needed */
  background: url('play_button.png') no-repeat center center;
  background-size: contain;
}

/* Optional: Add a hover effect */
.video-thumbnail:hover .play-button {
  opacity: 0.7;
}

/*
 * 模态窗口
 */
.modal-custom-size {
  width: 400px;
  max-width: 100%;
}

/* 小型设备 */
@media (max-width: 768px) {
  .modal-custom-size {
    width: 100%; /* 在小屏幕上使用100%宽度 */
  }
}

/* 大型设备 */
@media (min-width: 992px) {
  .modal-custom-size {
    width: 600px; /* 在大屏幕上使用更宽的尺寸 */
  }
}