/* Trích nguyên từ mã bạn cung cấp (docx), chỉ thêm phần mở rộng ở cuối file. */
.grid-motion {
position: relative;
isolation: isolate;
width: 100%;
height: 100%;
overflow: hidden;
}
.grid-motion__plane {
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
}
.grid-motion__row {
position: absolute;
left: 0;
display: flex;
gap: var(--gm-gap);
will-change: transform;
}
.grid-motion__tile {
position: relative;
display: flex;
flex: none;
align-items: center;
justify-content: center;
width: var(--gm-tile-w);
height: var(--gm-tile-h);
overflow: hidden;
border-radius: var(--gm-radius);
background: var(--gm-tile);
color: var(--gm-text);
font-size: var(--gm-font);
line-height: 1.2;
text-align: center;
opacity: calc(1 - var(--gm-dim) * (1 - var(--spot, 0)));
}
.grid-motion__tile::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px var(--gm-border);
pointer-events: none;
}
.grid-motion--gray .grid-motion__tile {
filter: grayscale(calc(1 - var(--spot, 0)));
}
.grid-motion__tile img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
user-select: none;
}
.grid-motion__text {
padding: 0 1em;
}