GatsbyJSの間違った使い方？『作って学ぶ HTML＆CSSモダンコーディング』のサンプル制作について

import React from "react"
import { css } from "@emotion/react"
import Layout from "../components/layout"

const Parts = () => {
  return (
    <section className="imgtext">
      <div className="imgtext-container w-container">
        <div className="text">
          <h2>日常のツールたち</h2>
          <p>Convenient</p>
          <p>
            どこにでもある、誰でも使ったことがある、普段は存在を意識しないけどないと困るツールたち。日常をちょっと楽しくしてくれます。
          </p>
        </div>
        <figure className="img">
          <img src="/img/tool.jpg" alt="" width="1600" height="1260" />
        </figure>
      </div>
    </section>
  )
}

const Page = () => {
  return (
    <Layout>
      <div css={[design, flex01]}>
        <Parts />
      </div>
      <div css={[design, flex02]}>
        <Parts />
      </div>
      …略…
      <div css={[design, grid03]}>
        <Parts />
      </div>
    </Layout>
  )
}

const flex01 = css`
  .imgtext-container {
    display: flex;
    flex-direction: column;
    gap: 45px 80px;
  }
  …略…
`

const flex02 = css` …略… `

const flex03 = css` …略… `

const grid01 = css`
  .imgtext-container {
    display: grid;
    gap: 45px 80px;
  }
  …略…
`

const grid02 = css` …略… `

const grid03 = css` …略… `

const design = css`
  .imgtext {
    padding: clamp(90px, 9vw, 120px) 0;
    background-color: #ffffff;
  }
  …略…
`

export default Page