/*
* Tiles
*/
.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__content{
    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);
}