<div class="lab-container">
<div class="masonry-container">
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div> <div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div> <div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
<div class="masonry-item"></div>
</div>
</div>
:root {
--container-width: 75rem;
}
.lab-container {
padding-block: 8rem;
}
/* ---- Container ---- */
.masonry-container {
--items: 1;
--gap: 1rem;
column-count: var(--items);
column-gap: var(--gap);
}
@media only screen and (min-width: 48rem) { .masonry-container { --items: 3}}
@media only screen and (min-width: 64rem) { .masonry-container { --items: 4}}
/* ---- Brick base ---- */
.masonry-item {
counter-increment: brick-index;
break-inside: avoid;
border-radius: .75rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
/* Default hue & height */
--hue: 210;
height: 150px;
background: hsl(var(--hue) 75% 85%);
margin-bottom: var(--gap);
}
/* ---- Index label (centered, subtle, matching hue) ---- */
.masonry-item::before {
content: counter(brick-index);
font-family: system-ui, sans-serif;
font-size: 1.5rem;
font-weight: 600;
color: hsl(var(--hue) 65% 32%);
opacity: 0.25;
}
/* ---- Hue map (sets --hue for background + text color) ---- */
.masonry-item:nth-child(2n+1) { --hue: 0; }
.masonry-item:nth-child(3n) { --hue: 40; }
.masonry-item:nth-child(5n) { --hue: 80; }
.masonry-item:nth-child(7n) { --hue: 120; }
.masonry-item:nth-child(11n) { --hue: 160; }
.masonry-item:nth-child(13n) { --hue: 200; }
.masonry-item:nth-child(17n) { --hue: 240; }
.masonry-item:nth-child(19n) { --hue: 280; }
.masonry-item:nth-child(23n) { --hue: 320; }
.masonry-item:nth-child(3n+1) { --hue: 20; }
.masonry-item:nth-child(3n+2) { --hue: 60; }
.masonry-item:nth-child(5n+1) { --hue: 100; }
.masonry-item:nth-child(5n+2) { --hue: 140; }
.masonry-item:nth-child(5n+3) { --hue: 180; }
.masonry-item:nth-child(5n+4) { --hue: 220; }
.masonry-item:nth-child(7n+1) { --hue: 260; }
.masonry-item:nth-child(7n+2) { --hue: 300; }
.masonry-item:nth-child(7n+3) { --hue: 340; }
.masonry-item:nth-child(7n+4) { --hue: 10; }
.masonry-item:nth-child(7n+5) { --hue: 50; }
.masonry-item:nth-child(7n+6) { --hue: 90; }
.masonry-item:nth-child(11n+1){ --hue: 130; }
.masonry-item:nth-child(11n+2){ --hue: 170; }
.masonry-item:nth-child(11n+3){ --hue: 190; }
.masonry-item:nth-child(11n+4){ --hue: 230; }
.masonry-item:nth-child(11n+5){ --hue: 270; }
.masonry-item:nth-child(13n+1){ --hue: 310; }
.masonry-item:nth-child(13n+2){ --hue: 350; }
.masonry-item:nth-child(13n+3){ --hue: 30; }
.masonry-item:nth-child(13n+4){ --hue: 70; }
.masonry-item:nth-child(13n+5){ --hue: 110; }
/* ---- Heights (150px – 500px) ---- */
.masonry-item:nth-child(2n) { height: 200px; }
.masonry-item:nth-child(3n) { height: 250px; }
.masonry-item:nth-child(5n) { height: 300px; }
.masonry-item:nth-child(7n) { height: 350px; }
.masonry-item:nth-child(11n) { height: 400px; }
.masonry-item:nth-child(13n) { height: 450px; }
.masonry-item:nth-child(3n+1) { height: 180px; }
.masonry-item:nth-child(3n+2) { height: 220px; }
.masonry-item:nth-child(5n+1) { height: 280px; }
.masonry-item:nth-child(5n+2) { height: 320px; }
.masonry-item:nth-child(5n+3) { height: 380px; }
.masonry-item:nth-child(5n+4) { height: 420px; }
.masonry-item:nth-child(7n+1) { height: 460px; }
.masonry-item:nth-child(7n+2) { height: 170px; }
.masonry-item:nth-child(7n+3) { height: 240px; }
.masonry-item:nth-child(7n+4) { height: 340px; }
.masonry-item:nth-child(7n+5) { height: 480px; }
.masonry-item:nth-child(7n+6) { height: 190px; }
.masonry-item:nth-child(11n+1){ height: 370px; }
.masonry-item:nth-child(11n+2){ height: 430px; }
.masonry-item:nth-child(11n+3){ height: 260px; }
.masonry-item:nth-child(11n+4){ height: 490px; }
.masonry-item:nth-child(11n+5){ height: 210px; }
.masonry-item:nth-child(13n+1){ height: 390px; }
.masonry-item:nth-child(13n+2){ height: 440px; }
.masonry-item:nth-child(13n+3){ height: 290px; }
.masonry-item:nth-child(13n+4){ height: 470px; }
.masonry-item:nth-child(13n+5){ height: 230px; }