/* Ensure the Grid is Responsive */
.readon-native-block .grid-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Desktop: ~3 cards per row */
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none !important;
}

/* Mobile Adjustments (Max width 600px) */
@media (max-width: 600px) {
    .readon-native-block .grid-columns {
        grid-template-columns: 1fr; /* 1 card per row on mobile */
    }

    /* Force height on mobile if seamless mode looks weird */
    .readon-native-block .card__image {
        min-height: 120px;
    }
}

/* Optional: Fix for Seamless Image Borders in custom loop */
.readon-native-block .card._seamless .card__image img {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}