/* ============================================================
   Block: Featured Mosaic  —  mobile-first
   Breakpoints: base (mobile) · 768 (tablet) · 992 (desktop)
   ============================================================ */

.fm__inner {
    padding-block: 2.5rem;
}

.fm__top,
.fm__bottom {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;   /* mobile: stacked */
}

.fm__bottom {
    margin-top: 1rem;
}

/* Card */
.fm__card {
    position: relative;
    display: block;
    overflow: hidden;
}

.fm__media {
    width: 100%;
}
.fm__card--lg .fm__media { aspect-ratio: 16 / 10; }
.fm__card--sm .fm__media { aspect-ratio: 4 / 3; }

.fm__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.fm__card:hover .fm__media img { transform: scale(1.03); }

.fm__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--muted);
}

/* Title-in-image overlay */
.fm__overlay {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1rem 1rem 1rem;
    padding-top: 3rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4) 45%, transparent);
}

.fm__title {
    margin: 0;
    color: #fff;
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}
.fm__card--lg .fm__title { font-size: 2.4rem; }   /* h3 */
.fm__card--sm .fm__title { font-size: 1.8rem; }   /* h4 */

/* ---------- ≥ 768px (tablet) ---------- */
@media (min-width: 768px) {
    .fm__inner   { padding-block: 3.5rem; }
    .fm__top     { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .fm__bottom  { grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
    .fm__card--lg .fm__overlay { padding: 1.5rem; padding-top: 5rem; }
    .fm__card--lg .fm__title   { font-size: 2.4rem; }
}

/* ---------- ≥ 992px (desktop) ---------- */
@media (min-width: 992px) {
    .fm__bottom { grid-template-columns: repeat(3, 1fr); }
}