/* cms2 grid module */
.cms2-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: var(--gap, 16px);
    padding: clamp(22px, 4vw, 48px);
}
.cms2-grid-card { display: block; text-decoration: none; color: inherit; position: relative; }
.cms2-grid-img { display: block; overflow: hidden; border-radius: 10px; background: #f4f4f4; }
.cms2-grid-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; display: block; }
a.cms2-grid-card:hover .cms2-grid-img img { transform: scale(1.04); }
.cms2-grid-ratio-square .cms2-grid-img { aspect-ratio: 1/1; }
.cms2-grid-ratio-portrait .cms2-grid-img { aspect-ratio: 3/4; }
.cms2-grid-ratio-landscape .cms2-grid-img { aspect-ratio: 16/10; }
.cms2-grid-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 2px; }
.cms2-grid-title { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cms2-grid-sub { font-size: 13px; color: #666; }
.cms2-grid-tag { font-size: 14px; font-weight: 700; margin-top: 4px; }

/* layout B: overlay */
.cms2-grid-b .cms2-grid-img::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.65) 100%);
    border-radius: 10px;
}
.cms2-grid-b .cms2-grid-card { overflow: hidden; }
.cms2-grid-b .cms2-grid-overlay {
    position: absolute;
    left: 14px; right: 14px; bottom: 14px;
    display: flex; flex-direction: column; gap: 2px;
    color: #fff;
    z-index: 2;
}
.cms2-grid-b .cms2-grid-sub { color: rgba(255,255,255,.8); }

@media (max-width: 760px) {
    .cms2-grid { grid-template-columns: repeat(var(--cols-m, 2), 1fr); }
}