img {
  mix-blend-mode: normal;
}

#video-container {
  max-width: clamp(5vw, 120rem, 90vw);
  margin: 0 auto;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: stretch;

  row-gap: 20px;
  column-gap: 20px;
}

.video-card {
  border-style: solid;
  border-width: 3px;
  border-color: rgb(0, 0, 30);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
  width: 400px;

  display: grid;
  /* grid-template-columns: 1fr; */
  align-items: center;
  /* gap: 2rem; */
  /* margin: auto; */

  background: linear-gradient(to top,
      rgb(255, 255, 255) 0%,
      rgb(255, 255, 255, 0.738) 9.5%,
      rgb(255, 255, 255, 0.541) 17%,
      rgb(255, 255, 255, 0.382) 23.5%,
      rgb(255, 255, 255, 0.278) 28.25%,
      rgb(255, 255, 255, 0.194) 32.5%,
      rgb(255, 255, 255, 0.126) 36.5%,
      rgb(255, 255, 255, 0.075) 40.1%,
      rgb(255, 255, 255, 0.042) 43.05%,
      rgb(255, 255, 255, 0.021) 45.5%,
      rgb(255, 255, 255, 0.008) 47.6%,
      rgb(255, 255, 255, 0.002) 49.1%,
      rgb(255, 255, 255, 0) 50%,
      rgb(255, 255, 255, 0.002) 50.9%,
      rgb(255, 255, 255, 0.008) 52.4%,
      rgb(255, 255, 255, 0.021) 54.5%,
      rgb(255, 255, 255, 0.042) 56.95%,
      rgb(255, 255, 255, 0.075) 59.9%,
      rgb(255, 255, 255, 0.126) 63.5%,
      rgb(255, 255, 255, 0.194) 67.5%,
      rgb(255, 255, 255, 0.278) 71.75%,
      rgb(255, 255, 255, 0.382) 76.5%,
      rgb(255, 255, 255, 0.541) 83%,
      rgb(255, 255, 255, 0.738) 90.5%,
      rgb(255, 255, 255) 100%,
      transparent);
}

.video-card:hover {
  cursor: pointer;
}

.video-thumb {
  /* width: 100%; */
  max-height: 200px;
  max-width: 300px;
  margin: auto;
  /* display: block; */
  filter: drop-shadow(0 0 0.4rem black);
}

.video-card:hover .video-thumb {
  filter: drop-shadow(0 0 0.8rem black);
}

.video-link {
  display: contents;
  text-decoration: none;
  color: inherit;
}

.video-title {
  font-weight: bold;
  font-style: normal;
  font-size: 1.25rem;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 30px;
}

.video-description {
  height: auto;
  font-size: 1.05rem;
}

.video-date {
  /* color: #707070; */
  /* margin-top: 10px; */
  font-weight: bold;
  font-style: italic;
  /* background: white; */
  /* filter: drop-shadow(0 0 0.4rem white); */

  position: absolute;
  display: inline-block;
  width: auto;
  top: -6px;
  left: -6px;
  /* z-index: -1; */
  margin-top: 0;
  padding: 2px;
  padding-left: 6px;
  padding-right: 5px;

  background: white;

  border-style: solid;
  border-width: 3px;
  border-color: rgb(0, 0, 30);
  border-radius: 8px;
}

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -10;
  filter: blur(8px);
}