/*======================================== 
// grid_template 
========================================*/
.grid-article-item-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(15px, 2.33vw, 35px);
    padding-bottom: var(--content-vertical-gap-sm);

    @media screen and (max-width: 1000px) {
        & {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    @media screen and (max-width: 640px) {
        & {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media screen and (max-width: 400px) {
        & {
            grid-template-columns: 1fr;
        }
    }

    &.no-data {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;

        & .grid-article-item  {
            width: 100%;
            border: none;
            text-align: center;
        }
    }

    & .grid-article-item {
        overflow: hidden;
        border: 1px solid var(--color-line-01);
        border-radius: var(--simple-input-border-radius);

        &.notice {
            border: 3px solid var(--color-main-03);
        }

        & .grid-article-img-box {
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            aspect-ratio: 1/0.69;
            background-color: var(--color-main-03);

            @media screen and (max-width: 400px) {
                & {aspect-ratio: 1/0.5;}
            }

            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: top;
                transition: transform 0.3s ease;

                &.no-image {
                    height: fit-content;
                    object-fit: contain;
                    transform: scale(0.5);
                }
            }

            &:hover img {transform: scale(1.2);}
            &:hover img.no-image {transform: scale(0.6);}
        }

        & .grid-article-text-box {
            display: flex;
            flex-direction: column;
            gap: clamp(10px, 3.125vw, 20px);
            padding: clamp(10px, 2vw, 30px);
            border-top: 1px solid var(--color-line-01);

            & em {
                font-weight: var(--font-weight-bold);
                color: var(--color-main-03);

                @media screen and (max-width: 1500px) {
                    & {font-size: var(--font-size-14);}
                }
            }
            & h3 {
                font-size: var(--font-hero-sub-title-size);
                white-space: nowrap;      /* 줄바꿈 방지 */
                overflow: hidden;         /* 넘치는 부분 숨김 */
                text-overflow: ellipsis;  /* … 표시 */

                @media screen and (max-width: 1500px) {
                    & {font-size: var(--font-size-18);}
                }
            }
            & p {
                color: var(--color-text-03);

                @media screen and (max-width: 1500px) {
                    & {font-size: var(--font-size-14);}
                }
            }
        }
    }
}