.thumbnail {
  width: 100%;
  height: 200px;
  object-fit: cover
}

.youtube-player {
  display: block;
  position: relative;
  cursor: pointer;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
  height: 100%
}

.youtube-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  top: 0;
  left: 0
}

img.youtube-thumbnail {
  bottom: 0;
  display: block;
  left: 0;
  margin: auto;
  max-width: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  height: auto
}

div.youtube-play-btn {
  height: 72px;
  width: 72px;
  left: 50%;
  top: 50%;
  margin-left: -36px;
  margin-top: -36px;
  position: absolute;
  background: url(https://freepngimg.com/thumb/categories/1398.webp) no-repeat center center;
  background-size: 72px 72px
}
/* 
.video-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  font-family: "Syne Mono", monospace;
  margin: 0;
  padding: 0;
  color: #585f6b !important;
  box-sizing: border-box
}

.video-item {
  width: calc(33.333% - 20px);
  text-align: center;
  background: linear-gradient(347deg, rgba(186, 194, 194, 1) 0, rgba(201, 213, 214, 1) 28%, rgba(179, 196, 196, 1) 50%, rgba(190, 202, 203, 1) 76%, rgba(211, 229, 230, 1) 100%);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
  overflow-x: hidden;
  transition: transform .3s ease;
  background: repeating-linear-gradient(transparent 0 13%, #ffffff02 0 calc(13% + 1px), transparent 0) 30% 0/40% 100%, repeating-linear-gradient(transparent 0 7%, #ffffff03 0 calc(7% + 1px), transparent 0) 70% 0/33% 100%, repeating-linear-gradient(transparent 0 11%, #ffffff02 0 calc(11% + 1px), transparent 0) -10% 0/35% 100%, repeating-linear-gradient(transparent 0 17%, #ffffff04 0 calc(17% + 1px), transparent 0) 110% 0/27% 100%, repeating-linear-gradient(transparent 0 13%, #00000002 0 calc(13% + 1px), transparent 0) 60% -10%/33% 100%, repeating-linear-gradient(transparent 0 8%, #00000002 0 calc(8% + 1px), transparent 0) 21% 2%/27% 100%, repeating-linear-gradient(transparent 0 8%, #00000001 0 calc(8% + 1px), transparent 0) 31% 7%/19% 100%, radial-gradient(farthest-side, #00000011, #0000 60%) 20% 50%/50% 5%, radial-gradient(farthest-side, #ffffff08, #0000 60%) 50% 30%/50% 7%, radial-gradient(100% 10% at 60% 3%, rgba(255, 255, 255, .067), #0000 50%), radial-gradient(100% 10% at 60% 97%, #fff3, #0000 50%), radial-gradient(150% 10% at 50% 99%, #0009, #0000 50%), linear-gradient(#fff1, #fff0 15%, #fff1 85%, #fff3), linear-gradient(#fff2, #fff0 20%, #0000 96%, #0006), linear-gradient(90deg, #555, #868686 10%, #ccc 33%, #b1b1b1 48% 52%, #fff 66% 75%, #9b9b9b 90% 95%, #ccc);
  display: grid;
  flex-direction: row;
  align-items: center;
} */

/* .video-item:hover {
  transform: translateY(-10px)
} */

.thumbnail {
  width: 1000px;
  height: 400px;
  object-fit: cover
}

.video-wrapper {
   font-family: "Orbitron", sans-serif;
  position: relative;
  background: repeating-linear-gradient(transparent 0 13%, #ffffff02 0 calc(13% + 1px), transparent 0) 30% 0/40% 100%, repeating-linear-gradient(transparent 0 7%, #ffffff03 0 calc(7% + 1px), transparent 0) 70% 0/33% 100%, repeating-linear-gradient(transparent 0 11%, #ffffff02 0 calc(11% + 1px), transparent 0) -10% 0/35% 100%, repeating-linear-gradient(transparent 0 17%, #ffffff04 0 calc(17% + 1px), transparent 0) 110% 0/27% 100%, repeating-linear-gradient(transparent 0 13%, #00000002 0 calc(13% + 1px), transparent 0) 60% -10%/33% 100%, repeating-linear-gradient(transparent 0 8%, #00000002 0 calc(8% + 1px), transparent 0) 21% 2%/27% 100%, repeating-linear-gradient(transparent 0 8%, #00000001 0 calc(8% + 1px), transparent 0) 31% 7%/19% 100%, radial-gradient(farthest-side, #00000011, #0000 60%) 20% 50%/50% 5%, radial-gradient(farthest-side, #ffffff08, #0000 60%) 50% 30%/50% 7%, radial-gradient(100% 10% at 60% 3%, rgba(255, 255, 255, .067), #0000 50%), radial-gradient(100% 10% at 60% 97%, #fff3, #0000 50%), radial-gradient(150% 10% at 50% 99%, #0009, #0000 50%), linear-gradient(#fff1, #fff0 15%, #fff1 85%, #fff3), linear-gradient(#fff2, #fff0 20%, #0000 96%, #0006), linear-gradient(90deg, #555, #868686 10%, #ccc 33%, #b1b1b1 48% 52%, #fff 66% 75%, #9b9b9b 90% 95%, #ccc)
}

.video-embed-wrapper {
  display: none;
  background: repeating-linear-gradient(transparent 0 13%, #ffffff02 0 calc(13% + 1px), transparent 0) 30% 0/40% 100%, repeating-linear-gradient(transparent 0 7%, #ffffff03 0 calc(7% + 1px), transparent 0) 70% 0/33% 100%, repeating-linear-gradient(transparent 0 11%, #ffffff02 0 calc(11% + 1px), transparent 0) -10% 0/35% 100%, repeating-linear-gradient(transparent 0 17%, #ffffff04 0 calc(17% + 1px), transparent 0) 110% 0/27% 100%, repeating-linear-gradient(transparent 0 13%, #00000002 0 calc(13% + 1px), transparent 0) 60% -10%/33% 100%, repeating-linear-gradient(transparent 0 8%, #00000002 0 calc(8% + 1px), transparent 0) 21% 2%/27% 100%, repeating-linear-gradient(transparent 0 8%, #00000001 0 calc(8% + 1px), transparent 0) 31% 7%/19% 100%, radial-gradient(farthest-side, #00000011, #0000 60%) 20% 50%/50% 5%, radial-gradient(farthest-side, #ffffff08, #0000 60%) 50% 30%/50% 7%, radial-gradient(100% 10% at 60% 3%, rgba(255, 255, 255, .067), #0000 50%), radial-gradient(100% 10% at 60% 97%, #fff3, #0000 50%), radial-gradient(150% 10% at 50% 99%, #0009, #0000 50%), linear-gradient(#fff1, #fff0 15%, #fff1 85%, #fff3), linear-gradient(#fff2, #fff0 20%, #0000 96%, #0006), linear-gradient(90deg, #555, #868686 10%, #ccc 33%, #b1b1b1 48% 52%, #fff 66% 75%, #9b9b9b 90% 95%, #ccc)
}

.video-title {
   font-family: "Orbitron", sans-serif;
  padding: 10px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  background: linear-gradient(347deg, rgba(186, 194, 194, 1) 0, rgba(201, 213, 214, 1) 28%, rgba(179, 196, 196, 1) 50%, rgba(190, 202, 203, 1) 76%, rgba(211, 229, 230, 1) 100%);
  border-top: 1px solid #eee;
  text-align: center;
  background: repeating-linear-gradient(transparent 0 13%, #ffffff02 0 calc(13% + 1px), transparent 0) 30% 0/40% 100%, repeating-linear-gradient(transparent 0 7%, #ffffff03 0 calc(7% + 1px), transparent 0) 70% 0/33% 100%, repeating-linear-gradient(transparent 0 11%, #ffffff02 0 calc(11% + 1px), transparent 0) -10% 0/35% 100%, repeating-linear-gradient(transparent 0 17%, #ffffff04 0 calc(17% + 1px), transparent 0) 110% 0/27% 100%, repeating-linear-gradient(transparent 0 13%, #00000002 0 calc(13% + 1px), transparent 0) 60% -10%/33% 100%, repeating-linear-gradient(transparent 0 8%, #00000002 0 calc(8% + 1px), transparent 0) 21% 2%/27% 100%, repeating-linear-gradient(transparent 0 8%, #00000001 0 calc(8% + 1px), transparent 0) 31% 7%/19% 100%, radial-gradient(farthest-side, #00000011, #0000 60%) 20% 50%/50% 5%, radial-gradient(farthest-side, #ffffff08, #0000 60%) 50% 30%/50% 7%, radial-gradient(100% 10% at 60% 3%, rgba(255, 255, 255, .067), #0000 50%), radial-gradient(100% 10% at 60% 97%, #fff3, #0000 50%), radial-gradient(150% 10% at 50% 99%, #0009, #0000 50%), linear-gradient(#fff1, #fff0 15%, #fff1 85%, #fff3), linear-gradient(#fff2, #fff0 20%, #0000 96%, #0006), linear-gradient(90deg, #555, #868686 10%, #ccc 33%, #b1b1b1 48% 52%, #fff 66% 75%, #9b9b9b 90% 95%, #ccc)
}

.video-title:hover {
  color: #fff
}

@media (max-width:768px) {
  .video-item {
    width: calc(50% - 20px)
  }
}

@media (max-width:768px) {
  .video-item {
    width: 80vw;
  }
}