/* ---------- mobile ---------- */

.community-module-wrap {
    padding: 0 var(--space-md);
    margin-bottom: var(--space-xxxl)
}

.community-module-wrap .community-module-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: var(--space-md);
    max-width: 80rem;
    margin: 0 auto;
}

.community-module-wrap .community-module-grid h2 {
    grid-column: span 4;
    text-align: center;
    margin-bottom: var(--space-xxl);
}

.community-module-wrap .community-module-grid .community-gallery {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    row-gap: var(--space-lg);
}

.community-module-wrap .community-module-grid .community-gallery a {
    color: var(--black);
    text-decoration: none;
}

.community-module-wrap .community-module-grid .community-gallery a img {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    width: 100%;
}

.community-module-wrap .community-module-grid .community-gallery a .community-thumbnail-box {
    background-color: #f8f8f8;
    padding: var(--space-md);
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    min-height: 96px;
}

.community-module-wrap .community-module-grid .community-gallery a .community-thumbnail-box h3 {
    margin-bottom: var(--space-md);
}

/* ---------- tablet ---------- */

@media screen and (min-width: 48rem) {
     .community-module-wrap .community-module-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .community-module-wrap .community-module-grid h2 {
        grid-column: span 6;
    }

    .community-module-wrap .community-module-grid .community-gallery {
        grid-column: span 6;
        flex-direction: row;
        column-gap: var(--space-md);
        row-gap: var(--space-lg);
        flex-wrap: wrap;
    }

    .community-module-wrap .community-module-grid .community-gallery a {
        width: calc(50% - var(--space-sm));
        display: flex;
        flex-direction: column;
    }

    .community-module-wrap .community-module-grid .community-gallery a .community-thumbnail-box {
        height: 100%;
    }
}

/* ---------- laptop ---------- */

@media screen and (min-width: 80rem) {
    .community-module-wrap {
        margin-bottom: var(--space-xxxxl);
    }

    .community-module-wrap .community-module-grid {
        grid-template-columns: repeat(12, 1fr);
    }

    .community-module-wrap .community-module-grid h2 {
        grid-column: 2 / span 10;
    }

    .community-module-wrap .community-module-grid .community-gallery {
        grid-column: 2 / span 10;
        column-gap: var(--space-lg);
    }

    .community-module-wrap .community-module-grid .community-gallery a {
        width: calc(50% - (var(--space-lg) / 2));
    }

    .community-module-wrap .community-module-grid .community-gallery a .community-thumbnail-box h3 {
        margin-bottom: var(--space-lg);
    }
}