/* ═══════════════════════════════════════════════
   COMMUNITY — 2×5 image grid, B&W → color on hover
═══════════════════════════════════════════════ */

.community-layout {
    display: flex;
    align-items: center;
    height: 100%;
    gap: calc(var(--grid-gap) * 1.5);
}

.community-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.community-row {
    display: flex;
    gap: 6px;
}

.community-img {
    position: relative;
    overflow: hidden;
    width: max(160px, calc(12vw * var(--scale)));
    aspect-ratio: 3/4;
}

.community-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.5s ease, transform 1.2s cubic-bezier(0.25, 0.05, 0, 1.02);
}

.community-img:hover img {
    filter: grayscale(0%);
    transform: scale(1.03);
}

.community-see-more {
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin-left: calc(var(--big-padding) / 2 - var(--grid-gap) * 1.5);
    font-size: max(13px, calc(0.9vw * var(--scale)));
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-color);
    transition: opacity 0.3s ease;
}

.community-see-more:hover {
    opacity: 0.6;
}