.next-tiles{
overflow: hidden;
position: relative;
width: 400px; height: 400px; border: 1px solid rgba(229, 229, 229, 1); border-radius: 16px; display: flex;
justify-content: center;
align-items: center;
--offset: 20px;
--mouseenter-color: rgba(236, 236, 236, 1);
--mouseleave-color: rgba(129, 129, 129, 1);
--duration: 0.2s;
--easing: ease-in-out;
}
.next-tiles[data-flickering="1"]{
opacity: 0;
}
.next-tiles__content,
.next-tiles__content-new{
position: relative;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.next-tiles__squares-layout{
position: absolute;
top: calc(-50% - var(--offset));
left: calc(-50% - var(--offset));
width: 100%;
height: 100%;
}
.next-tiles__square{
border: .5px solid rgba(229, 229, 229, 1); transition: background-color var(--duration) var(--easing);
position: absolute;
}
.next-tiles__square--mouseleave{
background-color: var(--mouseleave-color);
}
.next-tiles__square--mouseenter{
background-color: var(--mouseenter-color);
}