.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.card {
    position: relative;
    transition: transform 0.3s;
}

.card-link:hover .card {
    transform: scale(1.02); /* Optional: Add a slight zoom effect on hover */
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Grey overlay */
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none; /* To ensure the overlay doesn't interfere with clicks */
    
    /* Center content vertically and horizontally */
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-link:hover .card-overlay {
    opacity: 1;
}

.overlay-text {
    color: white;
    font-size: 18px; /* You can adjust this size as needed */
    font-weight: bold; /* Makes the text stand out more */
}

/* Default font size for larger screens */
.news,
.team-name {
    font-size: 1em; /* or any size that fits your design */
}

/* Smaller font size for screens narrower than 768px */
@media (max-width: 768px) {
    .news,
    .team-name {
        font-size: 0.8em; /* Adjust as needed */
    }
}

/* Even smaller font size for very narrow screens */
@media (max-width: 480px) {
    .news,
    .team-name {
        font-size: 0.7em; /* Adjust as needed */
    }
}

/* Adjust font size for screens narrower than 768px */
@media (max-width: 768px) {
    h5 {
        font-size: 1.5em; /* Slightly smaller font size for medium screens */
    }
}

/* Smaller font size for very narrow screens */
@media (max-width: 480px) {
    h5 {
        font-size: 1.25em; /* Smaller but still legible font size for small screens */
    }
}

/* Optional: For extremely narrow screens (like some mobile phones in portrait mode) */
@media (max-width: 320px) {
    h5 {
        font-size: 1.0em; /* Adjusted font size for extra small screens */
    }
}