body {
  background: #003a29 !important;
  color: #F5FAFA!important; /* Override with desired color */
  font-family: "Libre Franklin", sans-serif;
}

/* Center the heading and year for the results gallery */
.results-heading {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    color: #F5FAFA;
    margin-bottom: 10px;
}

.results-year {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #F5FAFA !important;
    margin-bottom: 20px;
}

/* Center the results image grid */
.results-image-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center horizontally */
    gap: 20px; /* Space between images */
    padding: 10px 0; /* Add padding around the grid */
    
}

.results-image-grid .image-item {
    flex: 1 1 calc(25% - 20px); /* Adjust for four images per row */
    max-width: 300px; /* Limit the maximum width of each image */
    text-align: center; /* Center align content */
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.results-image-grid .image-item:hover {
    transform: scale(1.05);
}

.results-image-grid .image-item img {
    width: 50%; /* Ensure images are responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Add rounded corners */
    
}

/* Style for the descriptive text under images */
.results-image-grid .image-item p {
    font-size: 1rem;
  color:  #00ff6a !important;
    margin-top: 10px;
}

/* Style for the heading above descriptive text under images */
.results-image-grid .image-item h3 {
    font-size: 1.2rem;
    color: #F5FAFA;
    margin-bottom: 5px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Style for the button under the descriptive text */
.results-image-grid .image-item button {
    font-size: 0.8rem;
    color: #003a29;
    background-color: #00ff6a;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s;
}

.results-image-grid .image-item button:hover {
    background-color: #e0e0e0;
}

/* Make the results image grid mobile-friendly */
@media (max-width: 768px) {
    .results-image-grid {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items */
    }

    .results-image-grid .image-item {
        flex: 1 1 100%; /* Full width on smaller screens */
        max-width: 90%; /* Add some margin on smaller screens */
    }
}