.card_container {
    max-width: 100%;
    margin: 2em auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
  }
  .card_center {
    justify-content: center;
  }
  .card_container img {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
  }
  .card_item {
    position: relative;
    flex: 0 1 calc(50% - 0.5em);
    margin-bottom: 2em;
  }
  @media (max-width: 800px){
    .card_item {
      flex: 1 1 100%;
    }
  }
  .card {
    text-align: center;
    margin: 0 auto;
    color: #333;
    background: white;
    border-radius: 1em;
    padding-bottom: 0.75rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 0.5em #0000001a;
    width: 100%;
    display: flex;
    flex-direction: column; /* So content stacks properly */
    transition: scale 0.1s ease-in-out;
  }
  .card:hover {
    scale: 1.02;
    z-index: 20000;
  }
  .card ul {
    text-align: left;
    margin-top: 1em;
    margin-left: 1em;
  }
  .card img {
    margin-bottom: 0.25rem;
  }
  .card h4 {
    margin: 1em 0 0.25em;
  }
  .card h5 {
    font-size: 0.83em;
    margin: 0.5em 0 1em;
    font-family: var(--decimal-light); /* Or default if not available */
    color: #bfbfbf;
    text-transform: uppercase;
    font-size: 0.7em;
  }
  .card p {
    margin: 0;
    padding: 0 2em;
  }
  .card {
    height: 100%;
  }
  .container.content,
  .container.content p {
    flex: auto;
  }
  
  .learn_more {
    border: 1px solid #222222;
    padding: 1em 2em;
    display: inline-block;
    border-radius: 5em;
    font-size: 0.8em;
    border-image-slice: 1;
    border-width: 2px;
    color: #000000;
    transition: all 0.3s ease-in-out;
    width: fit-content;
    margin: 1.5em auto 0.5em;
    cursor: pointer;
    min-width: 140px;
    text-transform: uppercase;
    font-family: var(--decimal);
    font-size: 0.75em;
    line-height: 1.5em;
  }
  .learn_more:hover {
    color: #555;
    border-color: #555;
  }