.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Grid columns */
    gap: 30px;
  }
  
  .image-grid img {
    width: 100px;  /* Set width to 150px */
    height: auto;  /* Maintain aspect ratio */
  }

.grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Adjust the gap between images */
}

.grid-item {
    flex: 1 1 calc(33.333% - 10px); /* 3 images per row */
    box-sizing: border-box;
}

.grid-item img {
    width: 100%;
    max-width: 100px; /* Ensure each image does not exceed 30px in width */
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .grid-item {
        flex: 1 1 calc(50% - 10px); /* 2 images per row on medium screens */
    }
}

@media (max-width: 480px) {
    .grid-item {
        flex: 1 1 100%; /* 1 image per row on small screens */
    }
}

.card-header {
    text-align: center;
}

.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-body a {
    display: flex;
    justify-content: center;
    width: 100%; /* Ensure the anchor takes full width */
}

.card-body img {
    max-width: 100%; /* Make sure the image stays within the bounds */
}


.card-text {
    text-align: center;
}