@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #222;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

#elastic-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
    height: 100vh;
}

.row {
    display: flex;
    width: 100%;
    height: calc(100vh / 5); /* 5 rows */
    transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.cell {
    flex: 1;
    background: #333;
    border: 1px solid #111;
    transition: flex 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.4s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: transparent;
    overflow: hidden;
}

.row:hover {
    height: calc(100vh / 1.5); /* Expand row heavily */
}

.row:hover .cell:hover {
    flex: 5; /* Expand cell horizontally heavily */
    background: #ffcc00;
    color: #000;
    font-size: 6rem;
}

.hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    pointer-events: none;
    font-size: 4rem;
    mix-blend-mode: difference;
}