.video {
     grid-gap: 24px;
     padding: 10px 0;
}

.video li {
     text-align: center;
     background: var(--bg-card);
     border-radius: var(--radius-md);
     overflow: hidden;
     box-shadow: var(--shadow-sm);
     border: 1px solid var(--border-color);
     transition: var(--transition);
     position: relative;
     height: 100%;
}

.video li:hover {
     transform: translateY(-6px);
     box-shadow: var(--shadow-lg);
     border-color: rgba(205, 162, 116, 0.4);
}

.videoWrapper {
     position: relative;
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
     overflow: hidden;
}

.videoWrapper iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: 0;
}

.text-video {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(15, 23, 42, 0.85);
     backdrop-filter: blur(4px);
     color: #ffffff !important;
     font-size: 14px;
     font-weight: 600;
     font-family: var(--font-headings);
     padding: 12px !important;
     margin: 0 !important;
     transition: var(--transition);
}

.video li:hover .text-video {
     background: rgba(205, 162, 116, 0.95);
}

@media (max-width: 740px) {
     .video {
          grid-template-columns: 1fr;
          grid-gap: 20px;
     }
}

@media (min-width: 741px) {
     .video {
          grid-template-columns: 1fr 1fr 1fr;
     }
}
