<div class="mx-auto space-y-6 z-10 absolute">
    <div class="flex !m-0 justify-center pt-[5vh] md:pt-[15vh] w-[99vw]">
        <img src="/images/cropped-HS-1-270x270.webp" loading="lazy" height="133px" width="133px">
    </div>
    <div class="flex !m-0 justify-center h-[4vh] md:h-[7vh] w-[99vw]">
        <h1 class="font-bold text-2xl md:text-4xl whitespace-nowrap dark:text-white">hstream.moe</h1>
    </div>
    <div class="flex !m-0 justify-center h-[4vh] md:h-[7vh] w-[99vw]">
        <h2 class="text-1xl md:text-3xl font-extralight dark:text-white">{{ __('home.branding') }}</h2>
    </div>
</div>

<div class="mx-auto space-y-6 h-[30vh] sm:h-[40vh] md:h-[60vh] z-10 overflow-hidden">

    <div class="!m-0">
        @php 
            $array = \cache()->remember('background', 300, function () {
                $bg = new \App\Models\SiteBackground();
                return $bg->getImages();
            });
        @endphp

        @if ($array->isNotEmpty())
        @php
            $imageId = $array->random();
        @endphp
        <img
            class="fade-img sm:relative md:absolute top-0 w-screen"
            src="/images/background/{{ $imageId }}-1080p.webp"
            srcset="/images/background/{{ $imageId }}-640p.webp 640w,
                    /images/background/{{ $imageId }}-720p.webp 720w,
                    /images/background/{{ $imageId }}-1080p.webp 1080w,
                    /images/background/{{ $imageId }}-1440p.webp 1440w"
            sizes="(max-width: 640px) 640px,
                (max-width: 1080px) 720px,
                (max-width: 1440px) 1080px,
                1440px"
            loading="lazy"
            height="640px"
        >
        @else
        <img
            class="fade-img sm:relative md:absolute top-0 w-screen"
            src="/images/hs_branding_1.webp"
            loading="lazy"
        >
        @endif
    </div>

</div>
