.fc-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 10px;
}

.fc-item {
    position: relative;
    overflow: hidden;
    display: block;
    border-style: ridge;
    border-width: 4px;
    border-color: #ebd07a; 
    transition: border-color 0.3s; 
}

.fc-item img {
    width: 100%;
    display: block;
    height: auto;
}

.fc-item:hover {
    border-color: white; 
}

.fc-info, .fc-comment {
    position: absolute;
    left: 0;
    right: 0;
    padding: 5px;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    color: white;
}

.fc-info {
    top: 0;
}

.fc-comment {
    bottom: 0;
    font-size: calc(8px + 0.5vw); /* Font size adapts to the width of the viewport */
}

/* Media Queries for Mobile Devices */
@media (max-width: 600px) {
    .fc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .fc-comment {
        font-size: calc(8px + 1vw); /* Larger relative font size on smaller screens */
    }
}