{{-- <section class="video-wrapper bg-overlay bg-overlay-gradient px-12 mt-0 min-vh-60 bg-cover bg-image"
    data-image-src="{{ asset('/bg/bg_01_new.png') }}"
    style="background-image: url({{ asset('/bg/bg_01_new.png') }}); background-size: 100%; background-position: center;">
    <div class="video-content">
        <div class="container text-center">
            <div class="row">
                <div class="col-lg-8 col-xl-6 text-center text-white mx-auto">
                    <h1 class="display-1 fs-54 text-white mb-5"><span class="rotator-zoom">@yield('title')</span></h1>

                </div>
            </div>
        </div>
    </div>
</section> --}}

<style>
    .video-wrapper {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    @media (max-width: 768px) {
        .video-wrapper {
            min-height: 50vh;
            /* ลดความสูงบนหน้าจอเล็ก */
        }

        .video-wrapper h1 {
            font-size: 2rem;
            /* ลดขนาดฟอนต์ */
        }
    }
</style>
<section class="video-wrapper bg-overlay bg-overlay-gradient px-3 px-md-12 mt-0 min-vh-60 bg-cover bg-image d-flex align-items-center justify-content-center"
    data-image-src="{{ asset('/logo/Main Menu.png') }}"
    style="background-image: url({{ asset('/logo/Main Menu.png') }}); background-size: cover; background-position: center;">
    <div class="video-content text-center text-white">
        <h1 class="display-1 fs-54 fs-md-30 fs-lg-12 text-white mb-4">
            <span class="rotator-zoom">@yield('title')</span>
        </h1>
    </div>
</section>