styling_courses.css

  /* Create two equal columns that floats next to each other
  .container {
    display: flex;  Enables flexible arrangement of child elements
     Allows boxes to wrap to multiple lines if needed 
    justify-content: center;  Centers boxes horizontally within the container 
    margin: 0 auto;  Centers the container horizontally on the page */

    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjust as needed */
      grid-gap: 10px; /* Optional spacing between cards */
    }
  
    h2 {
      font-size: 20px;
      font-weight: bold;
    }
  
    li {
      list-style-type: none;
    }
  
    a {
      text-decoration: none;
      color: blue;
    }
  
    .card {
      width: auto;
      /* Adjust width as needed */
      height: 360px;
      /* Adjust height as needed */
      background-color: rgb(220,220,220);
      color: black;
      border-radius: 50px;
      /* Creates rounded corners */
      margin: 25px;
      /* Adds spacing between boxes */
      font-size: 12.5px;
      font-family: "Roboto", sans-serif;
      box-shadow: 10px 10px;
      text-align: center;
      padding: 30px;
    }

    .short-card {
      /* background-color: red; */
      height: 210px;
    }
  
    @media screen and (max-width: 767px) {
      .card {
        width: 70%; /* Adjust as needed (percentage for responsiveness) */
        margin: 30px;
        height: 80%;
      }
      .short-card {
        font-size: 14px;
        height: 70%;
      }

    }