.articlecontainer {
  display: grid;
  grid-template-columns: 1fr;
  /* row-gap: 10px;
          column-gap: 10px; */
  gap: 40px 40px;

  margin: 30px auto;
}

@media (min-width: 700px) {
  /* New IP */

  .articlecontainer {
    grid-template-columns: 1fr 1fr;
  }
}

.video__article {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.video__title {
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.8rem;
  letter-spacing: 0.1em;
  height: 5.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video__link {
  display: block;
  padding-bottom: 20px;
  text-decoration: none;
}

.video__article .video__link {
  color: black;
  letter-spacing: 0.05em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video__article:hover .video__link {
  color: #fcaf1a;
}

.video__figure {
  position: relative;
}

.video__figure__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgb(136, 134, 134);
}

.yt-css-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 43px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'>\
<path d='M66.52 7.85a8.27 8.27 0 0 0-5.82-5.83C55.58 0 34 0 34 0S12.42 0 7.3 2.02A8.27 8.27 0 0 0 1.48 7.85 86.6 86.6 0 0 0 0 24a86.6 86.6 0 0 0 1.48 16.15 8.27 8.27 0 0 0 5.82 5.83C12.42 48 34 48 34 48s21.58 0 26.7-2.02a8.27 8.27 0 0 0 5.82-5.83A86.6 86.6 0 0 0 68 24a86.6 86.6 0 0 0-1.48-16.15z' fill='%23ff0000'/>\
<path d='M45 24 27 14v20' fill='white'/>\
</svg>");
}


.video__authordate {
  display: flex;
  align-items: center;
  min-height: 120px;
  justify-content: space-between;
}

.video__company__img {
  max-height: 100px;
  max-width: 100px;
  /* padding: 5px; */
  /* border: 1px solid rgb(131, 127, 127); */
  /* border-radius: 50%; */
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 20px;
}

.video__author {
  font-weight: bold;
  padding-left: 30px;
}
.video__date {
  padding-left: 30px;
}

.viewmore {
  text-align: center;
  padding: 25px;
}

.viewmore__button {
  background: var(--primary);
  color: #ffffff;

  border-radius: 3px;
  padding: 10px 15px;
  font-weight: bold;
  font-size: 1.1rem;
  text-transform: uppercase;
  text-decoration: none;
}

.viewmore__button:hover {
  background: #fcaf1a;
}