/**
 * 이 파일은 루틴 콘텐츠 기본 템플릿의 일부입니다. (https://www.rootin.co.kr)
 *
 * 아티클 목록 컨텍스트 스타일
 *
 * @file /modules/rootin/content/templates/default/styles/collection.css
 * @author krkim <krkim@naddle.com>
 * @license MIT License
 * @modified 2026. 8. 13.
 */
body[data-frame='site'] {
    section[data-role='rootin-collection-list'] {
        margin: 0 auto;
        padding: 34px 0 34px;

        ul {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 18px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        article {
            overflow: hidden;
            border-radius: 10px;
            background: var(--color-text-brand-primary);
            color: var(--color-text-white);
        }

        img {
            display: block;
            width: 100%;
            aspect-ratio: 2 / 1;
            object-fit: cover;
            background: var(--rootin-primary);
        }

        strong {
            display: block;
            padding: 14px 16px 4px;
            font-size: 16px;
            font-weight: 900;
            line-height: 1.35;
        }

        article > span {
            display: block;
            padding: 0 16px 16px;
            font-size: 14px;
            font-weight: 700;
            opacity: 0.9;
        }
    }
}

@media (max-width: 860px) {
    body[data-frame='site'] section[data-role='rootin-collection-list'] {
        width: min(calc(100% - 32px), var(--rootin-container-width));
        padding: 24px 0 56px;

        h2 {
            font-size: 21px;
        }

        ul {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }
    }
}