{{ if isset .Site.Params "carousel" }} {{ if gt (len .Site.Params.carousel) 0 }}
<section
    id="screenshots"
    class="text-light p-4 pt-5 d-flex flex-nowrap align-items-center"
    style="
        background-color: var(--hd-plum-600);
        gap: 1em 1em;
        overflow-x: scroll;
    "
>
    {{ range sort .Site.Params.carousel "weight" }}
    <figure class="my-5 me-5 text-center" style="min-width: 65vw">
        <a href="{{ .image }}">
            <img
                class="rounded img-thumbnail"
                src="{{ .image }}"
                alt="{{ .title }}"
                loading="lazy"
                style="max-height: 80vh"
            />
        </a>
        <figcaption class="mt-2 text-center">
            {{ .description | markdownify }}
        </figcaption>
    </figure>
    {{ end }}
</section>
{{ end }} {{ end }}