/* 1. Main Grid Container */
.sapa-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;      /* keep horizontal spacing */
    row-gap: 10px;         /* tighter vertical spacing */
    max-width: 800px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;     /* slightly tighter line height */
    color: #333;
}

/* 2. Individual Grid Items */
.sapa-item {
    background: #fff;
    padding-bottom: 5px;   /* reduced from 10px */
    overflow: hidden;
}

/* 3. Image Styling */
.sapa-item img {
    float: left;
    margin-right: 10px;
    margin-bottom: 4px;    /* reduced */
    border: 0;
    max-width: 158px;
    height: auto;
}

/* 4. Headings */
.sapa-item strong {
    display: block;
    margin-bottom: 3px;    /* reduced from 5px */
    font-size: 1.1em;
}

/* 5. Link Lists */
.sapa-links {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sapa-links li {
    margin-bottom: 2px;    /* tighter list spacing */
    position: relative;
    padding-left: 12px;    /* slightly tighter indent */
}

/* Custom bullet */
.sapa-links li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: #333;
}

.sapa-links a {
    text-decoration: none;
    color: #0000EE;
}

.sapa-links a:hover {
    text-decoration: underline;
}

/* 6. Footer Styling */
.sapa-footer {
    text-align: center;
    margin-top: 15px;      /* slightly reduced */
    padding-top: 8px;
    border-top: 1px solid #eee;
    font-weight: bold;
    color: #555;
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 600px) {
    .sapa-grid-container {
        column-gap: 10px;
        row-gap: 8px;       /* tighter mobile rows */
        padding: 5px;
    }

    .sapa-item img {
        float: none;
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 0 8px 0;
    }
}