These are the current Home.css and Home.js codes of my react component home page. Currently the icons we placed inside the cards are not properly visible and also the padding between the cards is less, make any recommendations

/* Home.css */

body, .home-wrapper {
    font-family: 'Arial', sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
  }
  
  .home-wrapper {
    display: flex;
    justify-content: center;
    padding: 0px;
    min-height: 100%;
    margin-top: 20px;
  }
  
  .home-main {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 100%;
    max-width: 800px;
    overflow: hidden;
  }
  
  .home-header {
    margin-top: 0;
    padding-bottom: 20px;
    font-size: 1.5rem;
    color: #2c3e50;
    text-align: center;
  }
  
  .home-description {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 20px;
    font-size: 1.1rem;
    color: #34495e;
    line-height: 1.5;
  }
  
  @import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,700');
  @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
  
  .gr-1 { background: linear-gradient(170deg, #007BFF 0%, #004BA0 100%); }
  .gr-2 { background: linear-gradient(170deg, #28A745 0%, #1E7E34 100%); }
  .gr-3 { background: linear-gradient(170deg, #6F42C1 0%, #443266 100%); }
  .gr-4 { background: linear-gradient(170deg, #FFC107 0%, #D39E00 100%); }
  .gr-5 { background: linear-gradient(170deg, #DC3545 0%, #BD2130 100%); }
  .gr-6 { background: linear-gradient(170deg, #17A2B8 0%, #117A8B 100%); }
  
  * {
    transition: .5s;
  }
  
  .column {
    margin-top: 3rem;
    padding-left: 3rem;
  }
  
  .column:hover {
    padding-left: 0;
  }
  
  .column:hover .card .txt {
    margin-left: 1rem;
  }
  
  .column:hover .card .txt h1,
  .column:hover .card .txt p {
    color: rgba(255, 255, 255, 1);
    opacity: 1;
  }
  
  .column:hover a {
    color: rgba(255, 255, 255, 1);
  }
  
  .column:hover a:after {
    width: 10%;
  }
  
  .card {
    min-height: 170px;
    margin: 0;
    padding: 1.7rem 1.2rem;
    border: none;
    border-radius: 0;
    color: rgba(0, 0, 0, 1);
    letter-spacing: .05rem;
    font-family: 'Oswald', sans-serif;
    box-shadow: 0 0 21px rgba(0, 0, 0, .27);
  }
  
  .card .card-body {
    padding: 0;
    position: relative;
  }
  
  .card .txt {
    margin-left: -3rem;
    z-index: 1;
  }
  
  .card .txt h1 {
    font-size: 1.5rem;
    font-weight: 300;
    text-transform: uppercase;
  }
  
  .card .txt p {
    font-size: .7rem;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 0rem;
    margin-top: 33px;
    opacity: 0;
    color: rgba(255, 255, 255, 1);
  }
  
  .card a {
    z-index: 3;
    font-size: .7rem;
    color: rgba(0, 0, 0, 1);
    margin-left: 1rem;
    position: absolute;
    bottom: .5rem;
    text-transform: uppercase;
  }
  
  .card a:after {
    content: "";
    display: inline-block;
    height: 0.5em;
    width: 0;
    margin-right: -100%;
    margin-left: 10px;
    border-top: 1px solid rgba(255, 255, 255, 1);
    transition: .5s;
  }
  
  .ico-card {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .ico-card svg {
    position: absolute;
    right: -50%;
    top: 60%;
    font-size: 12rem;
    line-height: 0;
    opacity: .2;
    color: rgba(255, 255, 255, 1);
    z-index: 0;
  }
  
  @media (max-width: 768px) {
    .home-wrapper {
      padding: 20px;
    }
  
    .home-main {
      padding: 15px;
    }
  }
  
  @media (max-width: 480px) {
    .home-main {
      padding: 10px;
    }
  }

// src/Home.js

import React, { useEffect } from "react";
import { Link } from 'react-router-dom';
import { Container, Row, Col, Card } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheckSquare, faToggleOn, faPencilSquare, faPuzzlePiece, faSortNumericAsc, faComment } from '@fortawesome/free-solid-svg-icons';
import "./Home.css";

const Home = () => {
  useEffect(() => {
    document.title = "Home";
    return () => {
      document.title = "Campus Goals";
    };
  }, []);

  const cardData = [
    { title: "MULTIPLE CHOICE QUESTIONS", description: "Test knowledge with various options", icon: faCheckSquare, gradient: "gr-1" },
    { title: "TRUE/FALSE QUESTIONS", description: "Quick binary decision making", icon: faToggleOn, gradient: "gr-2" },
    { title: "FILL IN THE BLANKS", description: "Complete sentences with missing words", icon: faPencilSquare, gradient: "gr-3" },
    { title: "MATCHING QUESTIONS", description: "Connect related items or concepts", icon: faPuzzlePiece, gradient: "gr-4" },
    { title: "ORDERING QUESTIONS", description: "Arrange items in correct sequence", icon: faSortNumericAsc, gradient: "gr-5" },
    { title: "OPEN-ENDED QUESTIONS", description: "Express knowledge in own words", icon: faComment, gradient: "gr-6" }
  ];

  return (
    <div className="home-wrapper">
      <div className="home-main">
        <h2 className="home-header">About Us</h2>
        <p className="home-description">
          This is the home section of Campus Goals.com
        </p>

        <Container className="card-container" style={{ maxWidth: '800px' }}>
          <Row>
            {cardData.map((card, index) => (
              <Col md={6} lg={6} className="column" key={index}>
                <Card className={card.gradient}>
                  <Card.Body>
                    <div className="txt">
                      <h1>{card.title}</h1>
                      <p>{card.description}</p>
                    </div>
                    <Link to="/synonymsQuiz">more</Link>
                    <div className="ico-card">
                      <FontAwesomeIcon icon={card.icon} />
                    </div>
                  </Card.Body>
                </Card>
              </Col>
            ))}
          </Row>
        </Container>
      </div>
    </div>
  );
};

export default Home;