/* ==========================================================
   MAIN LAYOUT
========================================================== */

.main-container {
  display: flex;

  align-items: flex-start;

  gap: 24px;

  width: 100%;

  max-width: 1900px;

  margin: 0 auto;

  padding: 20px;

  box-sizing: border-box;
}

/* ==========================================================
   MAIN CONTENT
========================================================== */

.main-content {
  flex: 1;

  min-width: 0;
}

.my-title {
  color: #ffffff;

  font-size: 28px;

  font-weight: 700;

  margin-bottom: 25px;
}

.card-wrapper {
  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

  gap: 24px;
}

.pagination-wrapper {
  display: flex;

  justify-content: center;

  margin: 40px 0;
}

body {
  background: #0e273c;

  color: #acdde7;
}

@media (max-width: 1200px) {
  .main-container {
    gap: 18px;
  }
}

@media (max-width: 992px) {
  .main-container {
    flex-direction: column;
  }

  .site-sidebar {
    width: 100%;
  }
}

.video-card {
  display: flex;

  flex-direction: column;
}

.video-thumbnail {
  display: block;

  aspect-ratio: 16/9;

  overflow: hidden;

  border-radius: 10px;
}

.video-thumbnail img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.25s;
}

.video-thumbnail:hover img {
  transform: scale(1.04);
}

.video-info {
  padding-top: 12px;
}

.video-title {
  margin: 0;

  font-size: 15px;

  line-height: 1.4;

  font-weight: 600;
}

.video-title a {
  color: #fff;

  text-decoration: none;
}

.video-title {
  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;
}

.video-meta {
  margin-top: 8px;

  display: flex;

  gap: 18px;

  color: #8aa6b3;

  font-size: 13px;
}

.video-card:hover .video-title a {
  color: #2fbbf4;
}

.video-card {
  gap: 12px;
}

.video-thumb {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.video-thumb img {
  pointer-events: none;
}