.video-articles {
  width: 100vw !important;
  flex-direction: row;
  max-width: var(--max-width);
  overflow-y: auto;
  align-items: flex-start;
  padding-bottom: 1rem;
}

/*.slick-track > * {
  outline: 1px solid orange;
}*/
.video-articles .video-article-all {
  background: var(--compare-more);
  width: 100vw;
  max-width: calc(var(--max-width) - 4rem);
  margin: 0 2rem;
  border-radius: .25rem;
  box-shadow: var(--float-close);
}

.video-articles .video {
  width: 50vw;
  max-width: calc((var(--max-width) - 4rem)/ 2);
  margin: 0;
  border-radius: .25rem;
  flex-shrink: 0;
  box-shadow: none;
}

.video-articles .title {
  font-weight: 200;
  font-size: 1.5rem;
  margin-bottom: 2rem;
  overflow: hidden;
}
  .video-articles .title::before {
    content: "";
    width: 2px;
    height: inherit;
    background: var(--color);
    margin-right: .5rem;
    flex-shrink: 0;
  }

  .video-articles .title span {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    overflow: hidden;
  }

.video-articles video {
  border-radius: .25rem;
  box-shadow: var(--float-close);
  object-fit: cover !important;
  object-position: center center;
  width: 100%;
  max-width: var(--max-width);
}

.video-articles .message {
  max-height: 300px;
  flex-direction: column;
  overflow-y: auto;
  margin-top: 3rem;
}

.video-articles .message * {
  display: revert !important;
}

.video-article-half {
  flex-direction: column;
  width: calc(50vw - 4rem);
  padding: 2rem;
  flex-shrink: 0;
  max-width: calc((var(--max-width) - 4rem )/ 2);
  background: var(--compare-more);
  border-radius: .25rem;
  box-shadow: var(--float-close);
}

.video-articles .video {
  margin: 0 2rem;
  width: fit-content;
  box-shadow: var(--float-close);
max-width: calc((var(--max-width) - 4rem) / 2);
}


.video-article-all .video-article-half {
  box-shadow: unset;
  margin: 0;
}

.video-articles .video-container {
  width: 100%;
  padding-top: 56.25%;
  flex-shrink: 0;
  position: relative;
  max-width: 800px;
  max-height: 450px;
 }

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.video-container video[poster]{
  overflow: hidden;
}

/*
  THIRD Party Fix Start
*/

.extra.slick-slide,
.slick-track,
.slick-list.draggable {
  display: flex !important;
}

.slick-list.draggable {
  overflow: visible !important;
}



.slick-slide {
  height: unset !important;
}

  /*THIRD Party Fix End
*/

@media screen and (max-width: 600px) {
  .video-articles {
    overflow: unset;
  }

  .video-articles :is(.video-article-all, .video) {
    width: calc(100vw - 2rem) !important;
    flex-direction: column;
    margin: 1rem;
    box-shadow: unset;
    align-items: stretch;
  }

  .video-articles .video-article-all {
    position: relative;
    height: min-content !important;
  }

  .video-article-all .message {
    padding: 0 1rem;
    margin-top: 0rem;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: var(--contrast);
  }

  .video-article-half {
    width: 100%;
    padding: 1rem;
    margin: 0rem;
    justify-content: space-between;
  }

  .video-article-half + .video-article-half {
    padding: 1rem;
    bottom: -2rem;
    position: absolute;
    transform-origin: bottom center;
    background: var(--contrast);
    height:0;

  }

  .video .video-article-half {
    height: 100%;
  }

  .video-article-half.active {
    height: calc(100% + 2rem);
    background: white;
  }
  .video-article-half + .video-article-half::before {
    content: "";
    height: 1ch;
    width: 1.5ch;
    background: var(--color-med);
    clip-path: var(--triangle);
    position: absolute;
    top: .75rem;
    transform-origin: 50% 50%;
    transform: rotate(180deg);
  }

  .video-article-half + .video-article-half::after {
    content: "About This Video";
    position: absolute;
    top: .5rem;
    left: 3rem;
    transform-origin: 50% 50%;
    color: white;
  }

  .video-article-half.active .message {
    margin: 1rem 0;
    background: white;
  }

  .video-article-half.active::before {
    transform: rotate(0deg);
  }

  .video-article-half.active::after {
    color: var(--color-med);
  }
}