/* ===== Resize Group Listings on Ning 2.0 ===== */

/* Target group listing items on the Groups page */
.xg_module_groups .xg_list .xg_list_item {
    width: 250px;       /* Adjust width */
    height: 320px;      /* Adjust height */
    margin: 10px;       /* Space between items */
    box-sizing: border-box;
}

/* Resize group thumbnail images */
.xg_module_groups .xg_list .xg_list_item img {
    width: 100%;        /* Make image fill the box width */
    height: auto;       /* Keep aspect ratio */
}

/* Adjust group title font size */
.xg_module_groups .xg_list .xg_list_item h3 {
    font-size: 16px;    /* Change title size */
    line-height: 1.2em;
}

/* Optional: make layout responsive */
@media (max-width: 768px) {
    .xg_module_groups .xg_list .xg_list_item {
        width: 100%;    /* Full width on small screens */
        height: auto;
    }
}


/* Target Ning group boxes */
.xg_module_groups .xg_module_body .xg_list .xg_list_item {
    width: 100px;       /* Reduce width */
    height: auto;       /* Let height adjust automatically */
    padding: 10px;      /* Adjust padding for smaller look */
    font-size: 14px;    /* Reduce text size if needed */
    box-sizing: border-box; /* Ensure padding is included in width */
}

/* Optional: Adjust images inside group boxes */
.xg_module_groups .xg_list_item img {
    max-width: 100%;    /* Keep images responsive */
    height: auto;
}

/* Optional: Center boxes if they shrink */
.xg_module_groups .xg_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center horizontally */
    gap: 15px; /* Space between boxes */
}