.fpv-gallery {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 20px 0;
}
.fpv-thumb {
position: relative;
cursor: pointer;
border-radius: 6px;
overflow: hidden;
flex: 0 0 calc(33.333% - 8px);
aspect-ratio: 16 / 9;
background: #000;
box-shadow: 0 2px 8px rgba(0,0,0,.18);
transition: transform .2s ease, box-shadow .2s ease;
}
.fpv-thumb:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.fpv-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity .2s ease;
}
.fpv-thumb:hover img {
opacity: .85;
} .fpv-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.fpv-play svg {
width: 56px;
height: auto;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
transition: transform .2s ease;
}
.fpv-thumb:hover .fpv-play svg {
transform: scale(1.1);
} .fpv-gallery:has(.fpv-thumb:only-child) .fpv-thumb {
flex: 0 0 480px;
max-width: 100%;
} .fpv-gallery:has(.fpv-thumb:nth-child(2):last-child) .fpv-thumb {
flex: 0 0 calc(50% - 6px);
} @media (max-width: 600px) {
.fpv-thumb {
flex: 0 0 100%;
}
} #fpv-lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
align-items: center;
justify-content: center;
}
#fpv-lightbox.fpv-open {
display: flex;
}
#fpv-lb-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,.85);
animation: fpv-fade-in .2s ease;
}
#fpv-lb-inner {
position: relative;
z-index: 1;
width: min(900px, 92vw);
animation: fpv-scale-in .25s ease;
}
#fpv-lb-embed {
aspect-ratio: 16 / 9;
background: #000;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
#fpv-lb-embed iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
#fpv-lb-close {
position: absolute;
top: -40px;
right: 0;
background: none;
border: none;
color: #fff;
font-size: 32px;
line-height: 1;
cursor: pointer;
padding: 4px 8px;
opacity: .8;
transition: opacity .15s;
}
#fpv-lb-close:hover {
opacity: 1;
} @keyframes fpv-fade-in {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes fpv-scale-in {
from { transform: scale(.93); opacity: 0; }
to   { transform: scale(1);   opacity: 1; }
}