how to make this component card so that it can scroll horizontally especially using antDesign and Reactjs

Question

  <Card
    style={{
      margin: "10px",
      borderRadius: "20px",
    }}
  >
    <div className="titleTraining">My Training Event</div>
    <Row gutter={[15, 15]}>
      <Col>
        <MyTrainingCardCom />
      </Col>
      <Col>
        <MyTrainingCardCom />
      </Col>
      <Col>
        <MyTrainingCardCom />
      </Col>
      <Col>
        <MyTrainingCardCom />
      </Col>
      <Col>
        <MyTrainingCardCom />
      </Col>
    </Row>
  </Card>

this is my code.

how to make the card can scroll view (scroll horizontally) when there are more than 3 or 4 cards especially using antDesign or whatever.