.videos-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 16px;
  row-gap: 50px;
  margin: 112px 0 0 72px;
  padding: 24px 24px;
}

.video-preview-container {
  position: relative;
  width: 100%;
  margin: auto;
  margin-top: 0;
}

.video-preview-container .highlight {
  position: absolute;
  top: 2%;
  left: 2%;

  width: 96%;
  height: 96%;
  background: rgba(0, 0, 0, 0);
  border-radius: 12px;

  transition: all ease-out .2s;
  z-index: -10;
}

.video-preview-container:hover .highlight{
  top: -2%;
  left: -2%;
  width: 104%;
  height: 104%;
  background: rgba(235, 235, 235, 0.8);

  transition: all ease-out .2s;
}

.video-thumbnail {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 10px;
}

.video-details-container { 
  display: flex;
  flex-direction: row;
}

.channel-icon-container {
  width: 37px;
}

.channel-icon {
  width: 100%;
  border-radius: 50%;
}

.video-text-container {
  flex: 1;
  margin: 0 10px;
}

.video-text-container p, .video-text-container h3,  .video-text-container span{
  font-family: "Roboto", sans-serif;
  margin: 0;
}

.video-title {
  font-size: 11.7px;
  color: black;
}

.video-title a {
  display: block;
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 500;
  max-height: 4.4rem;

  /* Was playing arround with how youtube actually handles video title wrapping just to understand it but for now I don't actually need it unless I'm using unatural sizing.*/
  display: box;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;

  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
}

.video-title span {
  /* Was playing arround with how youtube actually handles video title wrapping just to understand it but for now I don't actually need it unless I'm using unatural sizing. */
  white-space: pre-wrap;
}

.channel-name, .video-stats { 
  margin-top: 2px;
  overflow: hidden;
}

.channel-name span, .video-stats span {
  font-size: 1.4rem;
  /* line-height: 2rem; */
  /* font-weight: 400; */
  /* white-space: nowrap;
  text-overflow: ellipsis; */
  color: #606060;
}

.video-details-container > .icon-container {
  margin-top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 20px;
}

.icon-container img {
  width: 100%;
}

.three-dot.icon {
  /*  NOTE: You can move these variables to your main CSS file under what ever specific class you give the icon. Just make sure you give the icon's CONTAINER a unique identifying class and paste these variables under that.*/
  --icon-size: 20; /* Change this value to change entire icon size scalably (square) */
  --unit: 1px; /* Use this to decide what the size of the icon is measured in. (ex. "1%", "1px", 1vw" etc.) */
  --icon-color: #0f0f0f; /* Change this too, self explanitory */
}

.video-stats p {
  margin-top: 2px;
  color: #606060;
  font-size: 1.4rem;
  font-weight: 400;
}



@media(max-width: 1838px) {
  .videos-container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}


@media(max-width: 976px) {
  .videos-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width: 791px) {
  .videos-container {
    margin-left: 0;
  }
}

@media(max-width: 586px) {
  .videos-container {
    grid-template-columns: 1fr;
  }
}