/* Report.css */

.app {
  font-family: Arial, sans-serif;
  margin: 20px auto; /* Adjust margin to create space between cards and navbar */
  padding: 0 20px;
  max-width: 800px;
}

h1 {
  text-align: center;
  color: #333;
}

.card-container {
  display: grid;
  grid-template-columns: minmax(350px, 1fr) minmax(350px, 1fr) minmax(350px, 1fr) repeat(auto-fill, minmax(250px, 1fr)); /* Ensure first three cards are in the same row and increase their width */
  gap: 20px;
  max-width: 100%; /* Limit the maximum width of the card container */
  margin: 0 auto; /* Center the card container */
}

.card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 30px; /* Increase padding for better spacing */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adjust box shadow for a more pronounced effect */
  transition: transform 0.3s ease-in-out;
  width: 100%; /* Make cards take up full width of their container */
  height: auto; /* Allow cards to expand vertically based on content */
}

.card:hover {
  transform: translateY(-5px);
}

.card h2 {
  margin-top: 0;
  color: #333;
  font-size: 20px; /* Increase font size of card headings */
}

.card p {
  margin: 10px 0; /* Increase margin for better spacing */
  color: #666;
}

@media (max-width: 1400px) {
  .card-container {
    grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr) repeat(auto-fill, minmax(250px, 1fr)); /* Adjust columns for smaller screens */
  }
}

@media (max-width: 1100px) {
  .card-container {
    grid-template-columns: minmax(250px, 1fr) repeat(auto-fill, minmax(200px, 1fr)); /* Further adjust columns for even smaller screens */
  }
}

@media (max-width: 900px) {
  .card-container {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjust columns for smaller screens */
  }
}

@media (max-width: 600px) {
  .card-container {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Adjust columns for smaller screens */
  }
}
