<style>
  /* Base styles for desktop */
  .card-image {
    flex: 1 0 5%;
    text-align: center;
  }

  .card-title {
    flex: 1 0 25%;
    padding: 0 20px;
    text-align: left;
  }

  .card-para {
    flex: 1 0 60%;
    padding-left: 20px;
    text-align: left;
    border-left: 1px solid; /* Border on the left for desktop */
  }

  /* Media query for mobile devices */
  @media (max-width: 768px) {
    .card-container {
      flex-direction: column;
    }

    .card-title,
    .card-para {
      flex: 1 0 100%;
      text-align: center;
      padding: 10px 0; /* Adjust padding for all text elements */
      border-left: none; /* Remove left border for mobile layout */
    }

    .card-para {
      border-top: 1px solid; /* Move border to the top for paragraph div on mobile */
      text-align: left; /* Text left align for paragraph */
    }
  }
</style>