hugo-stack/layouts/partials/stack.html

<style>


@media(min-width: 800px){
  .stack_row{
    position: relative;
    display: flex;
    margin-top: 30px;
    flex-direction: column;
    justify-content: flex-start;
  }

  .stack_item{
    width: 34%;
    margin: 5px; 
  }

  .stack_item_wide{
    width: 42%;
  }
  .stack_item_0{
    transform: translateX(0%);
  }

  .stack_item_1{
    transform: translateX(58%);
  }

  .stack_item_2{
    transform: translateX(122%);
  }

  .stack_item_3{
    transform: translateX(30%);
  }

  .stack_item_4{
    transform: translateX(88%);
  }

  .stack_item_5{
    transform: translateX(10%);
  }

  .stack_item_6{
    transform: translateX(68%);
  }

  .stack_item_7{
    transform: translateX(118%);
  }

  .stack_item_8{
    transform: translateX(40%);
  }

  .stack_item_9{
    transform: translateX(6%);
  }

  .stack_item_10{
    transform: translateX(78%);
  }

  .stack_item_11{
    transform: translateX(24%);
  }

  .stack_item_12{
    transform: translateX(98%);
  }
  .stack_image{
    width:100%;
    padding: 20px;
  }

  .stack_item:not(:has(img)) {
    width: fit-content;
    min-width: 20%;
    max-width: 32%;
  }

  .stack_item:nth-child(even of .stack_item):not(:has(img)) {
    max-width: 38%;
  }
}

.stack_row{
  display: flex;
  flex-direction: column;
  position: relative;
}

.stack_image{
    width:100%;
    box-sizing: border-box;
    padding: 0px;
    align: center;
  }

 .stack_text{
   width:100%;
   padding: 0px 5px;
   box-sizing: border-box;
   border-left: 4px solid {{ .Site.Params.accentColor }};
   position: relative;
 }

.stack_item{
  padding: 0px;
  box-sizing: border-box;
  margin: 10px; 
}

.stack_row::before{
  content: "";
  position: absolute;
  left: -25px;
  top: 0;
  bottom: -30px;
  width: 1px;
  background: {{ .Site.Params.accentColor }};
}

.stack_header{
  position: relative;
  padding: 0px;
  margin: 0px;
}

.stack_header::before {
  content: "";
  position: absolute;

  left: -24px;
  top: 50%;

  width: 15px;
  height: 15px;

  background: {{ .Site.Params.accentColor }};
  border: 2px solid {{ .Site.Params.accentColor }};
  border-radius: 20px;

  transform: translate(-50%, -50%);
  z-index: 1;
}

</style>

{{ $.Scratch.Set "counter" 0 }}
{{ range hugo.Data.stack }}
  <div class = "stack_row">
      <h3 class="stack_header"> {{ .section }} </h3>
      <p style="margin: 0px;">{{.description}}</p>
    {{ range .items }}
      {{ $i := $.Scratch.Get "counter"}} 
      <div class='stack_item stack_item_{{mod $i 13}} {{ if mod $i 2}} stack_item_wide {{end}}'>
          {{ with .image }}
            <div class = "stack_image">
                <img src={{.}} style="width:100%; align:center; display: block;"/>
            </div>
          {{end}}
          <div class="stack_text">
            <h4 style="margin: 0px;"> {{ .name }} </h4>
            <p style="margin: 0px;">{{.description | markdownify}}</p>
          </div>
          {{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}
      </div>
    {{ end }}
  </div>
{{ end }}