Custom figure-lightbox shortcode for Hugo

custom.css

.lightbox {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 999;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.8);
 }
 .lightbox img {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   max-width: 100%;
   max-height: 100%;
 }
 .lightbox:target {
   outline: none;
   display: block;
 }

figure-lightbox.html

{{/*
Mashup of original {{< figure >}} shortcode https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html
and the beautiful pure CSS lightbox idea from https://jlelse.blog/dev/css-lightbox-hugo/ to make the {{< figure-lightbox >}} shortcode.
Preserves the power of {{< figure >}} while adding pure CSS lightbox. Pair with requisite CSS.
*/}}
<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
   <a href="#{{ .Get "src" | md5 }}-lightbox">
      <img src="{{ .Get "src" }}"
         {{- if or (.Get "alt") (.Get "caption") }}
            alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
         {{- end -}}
         {{- with .Get "width" }} width="{{ . }}"{{ end -}}
         {{- with .Get "height" }} height="{{ . }}"{{ end -}}
      /> <!-- Closing img tag -->
   </a>
   {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
      <figcaption>
         {{ with (.Get "title") -}}
            <h4>{{ . }}</h4>
         {{- end -}}
         {{- if or (.Get "caption") (.Get "attr") -}}<p>
            {{- .Get "caption" | markdownify -}}
               {{- with .Get "attrlink" }}
                  <a href="{{ . }}">
               {{- end -}}
               {{- .Get "attr" | markdownify -}}
               {{- if .Get "attrlink" }}</a>{{ end }}</p>
         {{- end }}
      </figcaption>
   {{- end }}
</figure>
<a href="#_" class="lightbox" id="{{ .Get "src" | md5 }}-lightbox">
   <img src="{{ .Get "src" }}" alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}">
</a>