@layer components {
    .events { padding-block: 10px 88px; }
    .events__heading { padding-top: 32px; border-top: 1px solid var(--line); }
    .events__grid { --event-columns: 5; --event-gap: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--event-gap); list-style: none; padding: 0; margin: 0; }
    .event-card { flex: 0 0 calc((100% - (var(--event-columns) - 1) * var(--event-gap)) / var(--event-columns)); min-width: 0; aspect-ratio: 1; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--subtle); }
    .event-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
    .events__empty { color: var(--muted); font-size: 13px; line-height: 1.8; padding-block: 24px; }
}
@layer responsive {
    @media (max-width: 1199px) { .events__grid { --event-columns: 4; } }
    @media (max-width: 999px) { .events__grid { --event-columns: 3; } }
    @media (max-width: 759px) { .events__grid { --event-columns: 2; --event-gap: 16px; } }
    @media (max-width: 479px) { .events__grid { --event-columns: 1; } }
    @media (max-width: 700px) {
        .events { padding-bottom: 50px; }
        .events__heading { padding-top: 24px; }
    }
}