Pls I need explanation of this code snippet written in Haml

Pls I don't know anything about Haml just know that it is a markup language predominantly used with Ruby.

So I am trying to do animation with gsap and I saw the code below on codepen

- w = 1240
- h = 874



.demo-wrapper
  %header.df.aic.jcc
    %div
      %h1 ScrollTrigger
      %h2 demo

  %section.demo-text
    .wrapper.text
      ABCDEFGHIJKLMNOPQRSTUVWXYZ

  - (1..4).each do |i|
    %section.demo-gallery
      %ul.wrapper
        - (1..rand(3..4)).each do |i|
          %li
            %img{:src=>"https://source.unsplash.com/random/#{w}x#{h}?sig=#{rand(0..206)}", 
:width => w, :height => h}

  %section.demo-text
    .wrapper.text
      ABCDEFGHIJKLMNOPQRSTUVWXYZ

  %footer.df.aic.jcc
    %p Images from <a href="https://unsplash.com/">Unsplash</a>

Please I need an explanation of this section of the code

 - (1..4).each do |i|
%section.demo-gallery
  %ul.wrapper
    - (1..rand(3..4)).each do |i|
      %li
        %img{:src=>"https://source.unsplash.com/random/#{w}x#{h}?sig=#{rand(0..206)}", 
:width => w, :height => h}