Between Shards and Shadows

The air is still—almost too still—and yet there’s a faint humming, a melody flickering between the walls of the labyrinth. It sounds like a song someone might sing from inside a sack of despair and chaos. Tinker beeps nervously: “That sounds like Willow. I’m 90 percent sure he’s done something he shouldn’t have… again.”

A flicker ahead, and Luma appears out of nowhere. “Of course he did. Willow is a walking disaster. But hey, what would you do without me constantly reminding you how hopeless you’d be on your own?” She grins brightly, sparkling like an overly self-confident firefly.

Before you lies a shattered mosaic, its pieces scattered in odd formations. In the center flickers a half-transparent silhouette of Willow, who looks like he’s had enough of being trapped in an avant-garde art project.
“It would be great if you got me out of here,” he says. “No pressure, but I can feel that bloody centaur getting closer.” “It’s a pattern,” explains Tinker. “We have to restore the mosaic by putting the pieces in the correct order. It might not only free Willow, but also trap Vorath at his own game.”

Luma circles above the shards, her voice a smug chant. “Come on, be useful. And please—don’t leave any pieces out. Willow would make a terrible piece of modern art.”
Vorath’s thunderous laughter echoes through the labyrinth as you begin fitting the pieces together.

“You cannot win this,” he calls—but with every fragment you place, the labyrinth falls quieter, as if order itself is pushing back against the chaos.

Save Willow

To save Willow, you must decipher the correct codes and put them in the right order.
Tinker hums quietly and gives you a valuable clue: “There’s a common trait in the properties. If you find it, the rest will fall into place.” Show your skills and free Willow! If you succeed, Vorath will be sealed into the mosaic forever, a relic of his own defeat.

Solve the task using Grid to free Willow from his prison. [–> Open in a new tab]

CSS
img {
    width: 100%;
    height: 100%;
}

/* Solution 1*/
/* Container für das Mosaik */
.mosaic-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    width: 900px;
    margin: 20px auto;
    gap: 5px;
}

.img1 {
    grid-column: 1 / 3;
    grid-row: 3;
}

.img2 {
    grid-column: 2;
    grid-row: 1;
}

.img3 {
    grid-column: 3;
    grid-row: 3;
}

.img4 {
    grid-column: 2;
    grid-row: 2;
}

.img5 {
    grid-column: 1;
    grid-row: 1 / 3;
}

.img6 {
    grid-column: 3;
    grid-row: 1 / 3;
}

/* Solution 2: Grid-Template Areas*/
.mosaic-container {
    display: grid;
    grid-template-areas:
        "img5 img2 img6"
        "img5 img4 img6"
        "img1 img1 img3";
    width: 900px;
    margin: 20px auto;
    grid-gap: 5px;
}

.img1 {
    grid-area: img1;
}

.img2 {
    grid-area: img2;
}

.img3 {
    grid-area: img3;
}

.img4 {
    grid-area: img4;
}

.img5 {
    grid-area: img5;
}

.img6 {
    grid-area: img6;
}
Scroll to Top