.gridscan {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.gridscan__preview {
position: absolute;
right: 12px;
bottom: 12px;
width: 220px;
height: 132px;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
background: #000;
color: #fff;
font:
12px/1.2 system-ui,
-apple-system,
Segoe UI,
Roboto,
sans-serif;
pointer-events: none;
}
.gridscan__video {
width: 100%;
height: 100%;
object-fit: cover;
transform: scaleX(-1);
}
.gridscan__badge {
position: absolute;
left: 8px;
top: 8px;
padding: 2px 6px;
background: rgba(0, 0, 0, 0.5);
border-radius: 6px;
backdrop-filter: blur(4px);
}
.gridscan {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.gridscan__preview {
position: absolute;
right: 12px;
bottom: 12px;
width: 220px;
height: 132px;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
background: #000;
color: #fff;
font:
12px/1.2 system-ui,
-apple-system,
Segoe UI,
Roboto,
sans-serif;
pointer-events: none;
}
.gridscan__video {
width: 100%;
height: 100%;
object-fit: cover;
transform: scaleX(-1);
}
.gridscan__badge {
position: absolute;
left: 8px;
top: 8px;
padding: 2px 6px;
background: rgba(0, 0, 0, 0.5);
border-radius: 6px;
backdrop-filter: blur(4px);
}