How to use

<div id="shopify-section-template--17389125894327__pdp_how_to_use" class="shopify-section">

    <style>
        /* General styling */
        .section_holder_wrapper {
            padding: 0 5vw;
            max-width: 1360px;
            margin: auto;
        }

        .section_title {
            color: #2d2d2d;
            font-size: 30px;
            font-weight: 600;
            line-height: 1.2;
            text-align: center;
            margin-bottom: 48px;
        }

        .section_items {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 32px;
        }

        .section_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.3s ease-in-out;
        }

        .section_item:hover {
            transform: translateY(-10px);
        }

        .item_image {
            width: 100%;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s;
        }

        .item_image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease-in-out;
        }

        .section_item:hover .item_image img {
            transform: scale(1.1);
        }

        .item_text {
            color: #000;
            font-size: 16px;
            line-height: 1.5;
            margin-top: 16px;
            text-align: center;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .section_holder_wrapper {
                padding: 0 4vw;
            }

            .section_title {
                font-size: 26px;
                margin-bottom: 32px;
            }

            .item_text {
                font-size: 15px;
            }
        }

        @media (max-width: 768px) {
            .section_items {
                gap: 20px;
            }

            .section_title {
                font-size: 24px;
            }
        }

        @media (max-width: 480px) {
            .section_title {
                font-size: 20px;
            }

            .item_text {
                font-size: 14px;
            }
        }
    </style>

    <div class="section_holder">
        <div class="section_holder_wrapper">
            <h2 class="section_title">How to Use!</h2>
            <div class="section_items">

                <!-- Example Item -->
                <div class="section_item" data-flavor="Coffee">
                    <div class="item_image">
                        <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/Energy2.webp?v=1736739401"
                            alt="How to use step 1">
                    </div>
                    <div class="item_text">1) how to use point example 1</div>
                </div>

                <div class="section_item" data-flavor="Coffee">
                    <div class="item_image">
                        <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/Energy3.webp?v=1736739403"
                            alt="How to use step 2">
                    </div>
                    <div class="item_text">2) how to use point example 2</div>
                </div>

                <div class="section_item" data-flavor="Coffee">
                    <div class="item_image">
                        <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/Energy7.webp?v=1736739413"
                            alt="How to use step 3">
                    </div>
                    <div class="item_text">3) how to use point example 3</div>
                </div>

                <div class="section_item" data-flavor="Coffee">
                    <div class="item_image">
                        <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/Energy5.webp?v=1736739406"
                            alt="How to use step 4">
                    </div>
                    <div class="item_text">4) how to use point example 4</div>
                </div>

                <div class="section_item" data-flavor="Coffee">
                    <div class="item_image">
                        <img src="//spacegoods.com/cdn/shop/files/2024-09-29_23-33-40_B_R8_S4_CHOC_1x1_d6c6c5d8-e0b7-4203-bb59-a2063ca9b251_1000x.jpg?v=1728025685"
                            alt="How to use step 1">
                    </div>
                    <div class="item_text">1) scoop 8g of Rainbow Dust</div>
                </div>

                <div class="section_item" data-flavor="Coffee">
                    <div class="item_image">
                        <img src="//spacegoods.com/cdn/shop/files/mix_2_1000x.webp?v=1720520021"
                            alt="How to use step 2">
                    </div>
                    <div class="item_text">2) mix with water or milk - hot or cold</div>
                </div>

                <div class="section_item" data-flavor="Coffee">
                    <div class="item_image">
                        <img src="//spacegoods.com/cdn/shop/files/frother_3_1000x.webp?v=1720520021"
                            alt="How to use step 3">
                    </div>
                    <div class="item_text">3) use your frother to blend to perfection</div>
                </div>

                <div class="section_item" data-flavor="Coffee">
                    <div class="item_image">
                        <img src="//spacegoods.com/cdn/shop/files/SCC00936_1x1_77b9b3d3-2afe-4964-b522-e4aa8d233d06_1000x.jpg?v=1728025943"
                            alt="How to use step 4">
                    </div>
                    <div class="item_text">4) drink & enjoy focus - energy - calm</div>
                </div>

                <div class="section_item" data-flavor="Coffee">
                    <div class="item_image">
                        <img src="//spacegoods.com/cdn/shop/files/2024-09-29_23-33-40_B_R8_S4_CIN_1x1_1b50a2f7-28e4-4630-b92d-500a1794a20c_1000x.jpg?v=1728025746"
                            alt="How to use step 1">
                    </div>
                    <div class="item_text">1) scoop 8g of Rainbow Dust</div>
                </div>

                <div class="section_item" data-flavor="Coffee">
                    <div class="item_image">
                        <img src="//spacegoods.com/cdn/shop/files/2024-09-29_23-41-00_B_R8_S4_H_1x1_f551f486-0062-46ef-8cf0-96e498376a8a_1000x.jpg?v=1728026249"
                            alt="How to use step 2">
                    </div>
                    <div class="item_text">2) mix with water or milk - hot or cold</div>
                </div>

                <div class="section_item" data-flavor="Coffee">
                    <div class="item_image">
                        <img src="//spacegoods.com/cdn/shop/files/SCC00615_1x1_552b872c-8020-4cd7-81d3-17c3f7d04b5d_1000x.jpg?v=1728026331"
                            alt="How to use step 3">
                    </div>
                    <div class="item_text">3) use your frother to blend to perfection</div>
                </div>

                <div class="section_item" data-flavor="Coffee">
                    <div class="item_image">
                        <img src="//spacegoods.com/cdn/shop/files/SCC00855_1x1_b9963ffd-9dc1-40d5-85c7-9680e7546a67_1000x.jpg?v=1728025978"
                            alt="How to use step 4">
                    </div>
                    <div class="item_text">4) drink & enjoy focus - energy - calm</div>
                </div>

            </div>
        </div>
    </div>
</div>