<section class="container pt-5 pb-4 pb-sm-5 my-2 mt-md-3 mt-xxl-4 mb-sm-0 mb-lg-4 mb-xl-5">
    <h2 class="h1 text-center pt-lg-3 pt-xl-0 pb-md-2 pb-lg-3 pb-xl-4">Theme Customizer</h2>

    <!-- Colors -->
    <div class="row align-items-center justify-content-center py-4">
        <div class="col-9 col-sm-7 col-md-6 order-md-2 offset-lg-1">
            <div class="ratio" style="max-width: 593px; --cz-aspect-ratio: calc(542 / 593 * 100%)">
                <img src="/img/intro/customizer/colors-light.jpg" class="d-none-dark" alt="Colors">
                <img src="/img/intro/customizer/colors-dark.png" class="d-none d-block-dark" alt="Colors">
            </div>
        </div>
        <div class="col-md-6 col-lg-5 order-md-1 text-center text-md-start mt-3 mt-md-n5">
            <span class="badge fs-sm bg-primary-subtle text-primary mb-3 mb-md-4">Colors</span>
            <h2 class="h3 mb-md-4">Change theme brand colors quickly and easily</h2>
            <p class="mb-0">Customize theme colors to match your brand palette using the color picker or just type in
                the color hex. Supported colors: primary, warning, success, info, danger.</p>
        </div>
    </div>

    <hr class="d-md-none my-3 my-sm-4">

    <!-- Typography -->
    <div class="row align-items-center justify-content-center py-4">
        <div class="col-10 col-sm-7 col-md-6 col-lg-7">
            <div class="ratio" style="max-width: 668px; --cz-aspect-ratio: calc(510 / 668 * 100%)">
                <img src="/img/intro/customizer/typography-light.jpg" class="d-none-dark" alt="Typography">
                <img src="/img/intro/customizer/typography-dark.png" class="d-none d-block-dark" alt="Typography">
            </div>
        </div>
        <div class="col-md-6 col-lg-5 text-center text-md-start mt-3 mt-md-n5">
            <span class="badge fs-sm bg-info-subtle text-info mb-3 mb-md-4">Typography</span>
            <h2 class="h3 mb-md-4">Set up fonts from the huge Google font collection</h2>
            <p class="mb-0">Easily change the font to your liking. Choose the font from Google Fonts library of 1,600+
                open source font families. Update headings and body font sizes right from customizer.</p>
        </div>
    </div>

    <hr class="d-md-none my-3 my-sm-4">

    <!-- Borders -->
    <div class="row align-items-center justify-content-center py-4">
        <div class="col-10 col-sm-7 col-md-6 col-lg-7 order-md-2 d-flex justify-content-end">
            <div class="ratio" style="max-width: 668px; --cz-aspect-ratio: calc(428 / 668 * 100%)">
                <img src="/img/intro/customizer/borders-light.jpg" class="d-none-dark" alt="Borders">
                <img src="/img/intro/customizer/borders-dark.png" class="d-none d-block-dark" alt="Borders">
            </div>
        </div>
        <div class="col-md-6 col-lg-5 order-md-1 text-center text-md-start mt-4 mt-md-0">
            <span class="badge fs-sm bg-success-subtle text-success mb-3 mb-md-4">Borders</span>
            <h2 class="h3 mb-md-4">Rounded or square? Customize borders as you wish</h2>
            <p class="mb-0">It's up to you to make your website soft and friendly with increased border radius or add
                business vibes with less rounded shapes. Additionally, you can adjust the border width.</p>
        </div>
    </div>
</section>
