.aspect-ratio img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}
.custom-rated-profile{
    width:17%;
    float:left;
    padding-top:10px;
}
.custom-rated-profile img{
    width:50px;
    height:50px;
    border-radius:50%;
}
.custom-rated-description{
    width:83%;
    float:left;
    padding-top:5px;
}

.video-card{
    flex: 0 0 calc(33.33% - 20px);
    scroll-snap-align: start;
    margin-bottom:0px;
}

.video-card .aspect-ratio {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio (9 / 16 = 0.5625) */
    overflow: hidden;
    border-radius: 8px;
}

.video-card .aspect-ratio img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-card i{
    color:#7f00ff;
}
body.dark-mode .video-card i{
    color:#00c6ff;
}

/* responsive */
@media screen and (max-width: 1024px) {
  .video-card {
    flex: 0 0 calc(50% - 20px);
  }

  .custom-rated-profile{
      width:17%;
  }
  
  .custom-rated-description{
      width:83%;
  }
}

@media screen and (min-width: 641px) and (max-width: 1023px){
    .custom-rated-profile{
      width:20%;
    }
    .custom-rated-description{
      width:80%;
    }
}

@media screen and (max-width: 640px) {
  .video-card {
    flex: 0 0 100%;
  }

  .custom-rated-profile{
      width:17%;
  }
  
  .custom-rated-description{
      width:83%;
  }
}