/* Configurable gap */
:root {
  --video-gap: 5px; /* Change this value to adjust the gap */
}

/* Blog grid container */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 per row on desktop */
  gap: var(--video-gap);
  margin-top: 20px;
}

/* Individual video card */
.video-post {
  background: radial-gradient(circle at top left, #00C6FF, #e0f7fa, #90D5FF);
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.video-post:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* Video title */
.video-post h5 {
  color: #00C6FF;
  margin-bottom: 10px;
}

/* iframe responsive */
.video-post iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}

/* Mobile / Small devices */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr; /* 1 video per row */
    gap: var(--video-gap);
  }

  .video-post iframe {
    width: 100%;
    height: auto;
  }
}