/**
 * widgets/ad/square-banners — 게시판 목록 상단 사각 배너 (1:1)
 *
 * 🔴 필고 v7 의 .v7-square-banners 배치를 그대로 재현한다
 *    (v7/css/advertisement.css:92-127 참고 — 그 파일을 로드하지는 않는다.
 *     v7 CSS 는 .v7-* 마크업을 전제하므로 URL 로드가 무용하다).
 *
 * 데스크톱 5열 · 모바일 4열 · 배너가 3개 이하면 모바일 3열.
 */
.w-square-banners {
    --w-square-banners-gap:    4px;
    --w-square-banners-radius: 4px;

    display: grid;
    gap: var(--w-square-banners-gap);
    margin-bottom: 16px;
}

/* 데스크톱 — 5열 */
@media (min-width: 992px) {
    .w-square-banners { grid-template-columns: repeat(5, 1fr); }
}

/* 모바일 — 기본 4열, 배너가 3개 이하면 3열 */
@media (max-width: 991.98px) {
    .w-square-banners { grid-template-columns: repeat(4, 1fr); }
    .w-square-banners.is-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.w-square-banners a { display: block; }

.w-square-banners img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: fill;
    border-radius: var(--w-square-banners-radius);
}