h1 {
    text-align: center;   /* Center the heading */
    font-size: 2.5em;     /* Increase the font size */
    color: #333;          /* Optional: change the text color (e.g., dark gray) */
    margin-top: 20px;     /* Optional: add margin above the heading */
    margin-bottom: 20px;  /* Optional: add margin below the heading */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* Light gray background for contrast */
}

.container {
    display: grid; /* Use CSS Grid layout */
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); /* Responsive columns */
    grid-gap: 15px; /* Space between grid items */
    padding: 20px; /* Padding around the grid */
}

.link {
    position: relative; /* Position for overlay elements */
    width: 100%; /* Full width of the grid cell */
    max-width: 400px; /* Maximum width of each link */
    height: 400px; /* Fixed height for square shape */
    margin: 15px auto; /* Center the links and add vertical spacing */
    text-decoration: none; /* Remove underline from links */
    color: #fff; /* Text color */
    overflow: hidden; /* Hide overflow content */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Drop shadow */
    transition: transform 0.3s; /* Smooth scale on hover */
}

.link img {
    width: 100%;  /* Image takes full width of link */
    height: 100%; /* Image takes full height of link */
    object-fit: cover; /* Cover the area while maintaining aspect ratio */
}

.link span {
    position: absolute; /* Absolute positioning for overlay */
    top: 50%; /* Position from the top as a percentage of the parent height */
    left: 50%; /* Center the title box */
    transform: translate(-50%, -50%); /* Center the title box */
    background: rgba(0, 0, 0, 0.6); /* Translucent black background for text */
    width: 80%; /* Consistent width for title boxes */
    max-width: 300px; /* Maximum width (adjust as necessary) */
    height: 80px; /* Fixed height for all title boxes */
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    text-align: center; /* Center text */
    font-weight: bold; /* Bold text */
    font-size: 2.0em; /* Font size for titles */
    color: #fff; /* Text color (white) */
}

.link:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Media Queries for Responsive Adjustments */
@media (max-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr); /* Two columns on tablets */
    }
}

@media (max-width: 480px) {
    .container {
        grid-template-columns: 1fr; /* One column on mobile */
    }
}