/* This media query targes screens with a maximum width of 768px,
which covers most tablest and mobile phones in portrait orientation */

@media (max-width: 768px){
    /* Adjustments for mobile devices */
    a, button-class {
        padding: 0.5em 1em; /*Reduce padding */
        font-size: 1rem; /* Adjust font size if necessary */
    }
}

@media (max-width: 480px) {
    /* Further adjustments for very small devices */
    a, button {
        padding: 0.4em 0.8em; /*Even smaller padding */
        font-size: 0.8rem; /* Even smaller font size */
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card {
      flex-basis: calc(50% - 20px); /* Two cards per row on smaller screens */
    }
  }
  
  @media (max-width: 480px) {
    .card-container {
      justify-content: center; /* Center cards on very small screens */
    }
  
    .card {
      flex-basis: 100%; /* One card per row on very small screens */
    }
  }