.video-gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin: 20px 0;
padding: 20px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.video-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.video-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.video-card-image {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
}
.video-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.video-card:hover .video-card-image img {
transform: scale(1.05);
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: rgba(0,0,0,0.7);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.video-card:hover .play-button {
opacity: 1;
}
.video-card-content {
padding: 20px;
}
.video-card-content h3 {
margin: 0;
font-size: 18px;
color: #333;
font-weight: 500;
text-align: center;
line-height: 1.4;
}
.no-image {
width: 100%;
height: 100%;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
color: #666;
}
@media (max-width: 768px) {
.video-gallery-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 15px;
}
.video-card-content {
padding: 15px;
}
.video-card-content h3 {
font-size: 16px;
}
}