---
import Step from "./Step.astro";
import steps from "../../data/steps.json";
import Subtitle from "../core/Subtitle.astro";
---

<div class="flex flex-col items-center mt-[7%] mb-[10%]">
    <Subtitle title="How it works:" />
    <div class="grid grid-rows-2 md:w-[70%] w-[80%] gap-[2vw]">
        <div class="grid grid-cols-4 gap-[1.5vw]">
            {
                steps
                    .slice(0, 3)
                    .map((step) => (
                        <Step
                            text={step.text}
                            number={step.number}
                            col={step.col}
                            position={step.position}
                            width={step.width}
                        />
                    ))
            }
        </div>
        <div class="grid grid-cols-3 gap-[1.5vw]">
            {
                steps
                    .slice(3, 5)
                    .map((step) => (
                        <Step
                            text={step.text}
                            number={step.number}
                            col={step.col}
                            position={step.position}
                            width={step.width}
                        />
                    ))
            }
        </div>
    </div>
</div>