.vg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
.vg-item {
position: relative;
aspect-ratio: 16/9;
background: #F6F5F4;
overflow: hidden;
border-radius: 18px;
position: relative;
}
.vg-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vg-item video {
width: 100%;
height: 100%;
object-fit: cover;
}
.vg-play {
position: absolute;
inset: 0;
border: none;
background: none;
cursor: pointer;
}
.vg-play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(0,0,0,0.6);
}
.vg-play-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
border-style: solid;
border-width: 10px 0 10px 18px;
border-color: transparent transparent transparent #fff;
}
.vg-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.vg-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.8);
}
.vg-modal-inner {
position: relative;
z-index: 1;
max-width: 90vw;
max-height: 90vh;
}
.vg-modal-video {
display: block;
max-width: 100%;
max-height: 100%;
}
.vg-modal-close {
position: absolute;
top: -32px;
right: -32px;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: #fff;
cursor: pointer;
font-size: 32px;
line-height: 1;
padding: 0;
}
body.vg-modal-open {
overflow: hidden;
}
@media (max-width: 768px) {
.vg-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}