<style>
                    .bg-centered {
                        background-position: center;
                        background-size: 100% 100%;
                    }

                    .i-container {
                        width: 100%;
                        min-height: 100vh;
                    }

                    .i-header {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: auto;
                        padding: 0.5rem;
                        flex-direction: column;
                    }

                    .i-header__title {
                        max-width: 100%;
                        word-wrap: break-word;
                        margin-bottom: 0.5rem;
                    }

                    .i-background-image {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: -1;
                    }

                    .i-post {
                        display: grid;
                        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                        gap: 10px;
                        align-items: center;
                    }

                    .i-post__info {
                        overflow-wrap: break-word;
                    }

                    .matches {
                        background-image: url('https://fanaticadas.s3.amazonaws.com/sportscrowd/dev/web_customization/Capture+(2).png');
                        padding-top: 31.58%;
                        background-size: 100% 100%;
                        background-position: center;
                        width: 100%;
                        height: auto;
                    }
                </style>

                <main class="i-container">
                    <!-- Header -->
                    <header class="i-header bg-centered" x-data="sections.header" x-show="visible"
                        :style="makrStyles({styles: proportion ?  [{prop:'aspect-ratio', value: `${proportion.w}/${proportion.h}`}]: []},makeBackgrounds(settings.backgroundColor, settings.backgroundImage))">
                        <h2 class="i-header__title" x-show="settings.title?.visible && settings.title?.value"
                            x-text="settings.title?.value" :style="makrStyles(settings.title)"></h2>
                        <article class="i-post" x-show="settings.info?.visible || settings.infoimg?.visible">
                            <p class="i-post__info" x-show="settings.info?.visible && settings.info?.value"
                                x-text="settings.info?.value" :style="makrStyles(settings.info)"></p>
                            <img class="i-post__image" x-show="settings.infoimg?.visible && settings.infoimg?.value"
                                x-bind:src="settings.infoimg?.imageUrl" />
                        </article>
                    </header>
                    <!-- Section 1 -->
                    <section class="i-section bg-centered" x-data="sections.section1" x-show="visible"
                        :style="makrStyles({styles: proportion ?  [{prop:'aspect-ratio', value: `${proportion.w}/${proportion.h}`}]: []},makeBackgrounds(settings.backgroundColor, settings.backgroundImage))">
                        <h2 class="i-section__title" x-show="settings.title?.visible && settings.title?.value"
                            x-text="settings.title?.value" :style="makrStyles(settings.title)"></h2>
                        <article class="i-post" x-show="settings.info?.visible || settings.infoimg?.visible">
                            <p class="i-post__info" x-show="settings.info?.visible && settings.info?.value"
                                x-text="settings.info?.value" :style="makrStyles(settings.info)"></p>
                            <img class="i-post__image" x-show="settings.infoimg?.visible && settings.infoimg?.value"
                                x-bind:src="settings.infoimg?.imageUrl" />
                        </article>
                    </section>
                    <!-- Matches -->
                    <section >
                        @section('matches')
                        <div class="matches"></div>
                        @show
                    </section>

                    <!-- Section 2 -->
                    <section class="i-section bg-centered" x-data="sections.section2" x-show="visible"
                        :style="makrStyles({styles: proportion ?  [{prop:'aspect-ratio', value: `${proportion.w}/${proportion.h}`}]: []},makeBackgrounds(settings.backgroundColor, settings.backgroundImage))">
                        <h2 class="i-section__title" x-show="settings.title?.visible && settings.title?.value"
                            x-text="settings.title?.value" :style="makrStyles(settings.title)"></h2>
                        <article class="i-post" x-show="settings.info?.visible || settings.infoimg?.visible">
                            <img class="i-post__image" x-show="settings.infoimg?.visible && settings.infoimg?.value"
                                x-bind:src="settings.infoimg?.imageUrl" />
                            <p class="i-post__info" x-show="settings.info?.visible && settings.info?.value"
                                x-text="settings.info?.value" :style="makrStyles(settings.info)"></p>
                        </article>
                    </section>
                    <!-- Footer -->
                    <section class="i-section bg-centered" x-data="sections.footer" x-show="visible"
                        :style="makrStyles({styles: proportion ?  [{prop:'aspect-ratio', value: `${proportion.w}/${proportion.h}`}]: []},makeBackgrounds(settings.backgroundColor, settings.backgroundImage))">
                        <h2 class="i-section__title" x-show="settings.title?.visible && settings.title?.value"
                            x-text="settings.title?.value" :style="makrStyles(settings.title)"></h2>
                        <article class="i-post" x-show="settings.info?.visible || settings.infoimg?.visible">
                            <img class="i-post__image" x-show="settings.infoimg?.visible && settings.infoimg?.value"
                                x-bind:src="settings.infoimg?.imageUrl" />
                            <p class="i-post__info" x-show="settings.info?.visible && settings.info?.value"
                                x-text="settings.info?.value" :style="makrStyles(settings.info)"></p>
                        </article>
                    </section>
                </main>