html(lang="en-us")

body

  .ml

    .ml-pnl

      .ml-pnl__cntnt.tx--white.bg--green

        h1 Here is a masonry layout.

​

    .ml-pnl.ml-clstr.ml-clstr--vrt

      .ml-clstr__sgmnt.ml-clstr__sgmnt--clmn

        .ml-pnl.ml-clstr__sgmnt

          .ml-pnl__cntnt.bg--green.tx--white

            h1 hello

      .ml-clstr__sgmnt.ml-clstr__sgmnt--clmn

        .ml-pnl.ml-clstr__sgmnt

          .ml-pnl__cntnt.bg--blue.tx--white

            h1 yes

        .ml-pnl.ml-clstr__sgmnt

          .ml-pnl__cntnt.bg--red.tx--white

            p.

              Some cool pics.

​

    .ml-pnl.ml-clstr.ml-clstr--hrz

      .ml-clstr__sgmnt.ml-clstr__sgmnt--rw

        .ml-pnl.ml-clstr__sgmnt

          img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-2.jpg")

      .ml-clstr__sgmnt.ml-clstr__sgmnt--rw

        .ml-pnl.ml-clstr__sgmnt.ml-clstr__sgmnt--hlf

          img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-1.jpg")

        .ml-pnl.ml-clstr__sgmnt

          .ml-pnl__cntnt.bg--red.tx--white

            p.

              Some cool pics.

    .ml-pnl

      .ml-pnl__cntnt.tx--white.bg--purple

        h3 That's pretty cool, thanks for showing me.

    .ml-pnl.ml-clstr.ml-clstr--vrt

      .ml-clstr__sgmnt.ml-clstr__sgmnt--clmn.ml-clstr__sgmnt--hlf

        .ml-pnl.ml-clstr__sgmnt

          img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-2.jpg")

      .ml-clstr__sgmnt.ml-clstr__sgmnt--clmn

        .ml-pnl.ml-clstr__sgmnt

          .ml-pnl__cntnt.bg--blue.tx--white

            p.

              This is an image, it's quite nice.

        .ml-pnl.ml-clstr__sgmnt

          .ml-pnl__cntnt.bg--blue.tx--white

            a Click here to find out more.

​