.video-post {
   width: 397px;
   height: 372px;
   background-color: #FFFFFF;
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: start;
   flex-shrink: 0;
   box-sizing: border-box;
   transition: all 250ms ease-out;

   &:hover  .video-play-icon {
      display: flex;
   }
}

.video-post__promo {
   width: 100%;
   height: 230px;
   border-radius: 16px;
   position: relative;
}

.video-post__promo-img {
   width: 100%;
   height: 100%;
   object-position: center;
   object-fit: cover;
   border-radius: 16px;
}

.video-post__promo-time {
   position: absolute;
   right: 10px;
   bottom: 10px;

   padding: 5px 7px;
   background-color: #00000099;
   border-radius: 6px;

   font-size: 12px;
   letter-spacing: 0%;
   line-height: 14.4px;
   color: #FFFFFF;
}

.video-post__info {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
}



.video-post__info-date {
   font-size: 12px;
   line-height: 14.4px;
   letter-spacing: 0%;
   color: #919EAB;
}

.video-post__footer {
   padding: 14px;
   width: 100%;
   height: 142px;
   box-sizing: border-box;

   display: flex;
   flex-direction: column;
   align-items: start;
   justify-content: space-between;
}

.video-post__name {
   width: 100%;
   height: 40px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: #131313;
   flex-shrink: 0;
   font-size: 16px;
   font-weight: 600;
   line-height: 120%;
   letter-spacing: 0%;
   margin: 12px 0;
   flex-grow: 1;
}

.video-post__info-date {
   font-size: 12px;
   line-height: 14.4px;
   letter-spacing: 0%;
   color: #919EAB;
}