.event-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.event-tile {
position: relative;
width: 300px;
height: 350px;
background-size: cover;
background-position: center;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
transition: transform 0.3s ease;
}
.event-tile::after {
content: attr(data-text);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0,0,0,0.6);
color: #fff;
padding: 16px;
font-size: 1.2rem;
font-weight: 700;
transition: background 0.3s ease;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.event-tile:hover::after {
background: rgba(0,0,0,0);
}
.event-tile:hover {
transform: scale(1.02);
}
