/*
|--------------------------------------------------------------------------
| SM Ad-Link v1.1 - Multi-creative Cards
|--------------------------------------------------------------------------
| Keep separate from ad-link.css and journal-features.css so existing
| SweetMeet spacing, fonts and featured styling are preserved.
*/

/* One item occupies the left-hand column, never centred. */
.smjf.smal-multi--1.smjf--cards .smjf__items,
.smjf.smal-multi--2.smjf--cards .smjf__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smjf.smal-multi--3.smjf--cards .smjf__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.smjf.smal-multi .smjf__item {
    min-width: 0;
}

/* Text-only paid/custom promotion card, without an image. */
.smjf.smal-multi .smal-creative-card .smjf__body {
    min-height: 170px;
}

/* The component itself acts as the container; adapt to its actual width. */
@container (max-width: 700px) {
    .smjf.smal-multi.smjf--cards .smjf__items {
        grid-template-columns: 1fr;
    }

    .smjf.smal-multi .smal-creative-card .smjf__body {
        min-height: 0;
    }
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
    @media (max-width: 767px) {
        .smjf.smal-multi.smjf--cards .smjf__items {
            grid-template-columns: 1fr;
        }
    }
}