/* 관련 글 스타일 */
.related-posts-after-content100 {
    max-width: 100%; /* 컨테이너의 최대 너비 설정 */
    overflow: hidden; /* 내부 요소가 넘쳤을 때 숨기기 */
    /* 필요하다면 여기에 padding이나 margin을 조정 */
}

.related-thumb100 {
    float: left;
    width: 33%; /* 기본적으로 한 줄에 4개의 게시물 */
    box-sizing: border-box; /* 패딩과 보더가 너비에 포함되도록 설정 */
    padding: 10px;
    margin: 0; /* 필요하다면 여백 조정 */
}

/* 태블릿 화면에서는 한 줄에 3개만 보이도록 조정 */
@media (max-width: 768px) {
    .related-thumb100 {
        width: 33.3333%;
    }
}

/* 모바일 화면에서는 한 줄에 2개만 보이도록 조정 */
@media (max-width: 480px) {
    .related-thumb100 {
        width: 50%;
    }
}

/* 매우 작은 화면에서는 한 줄에 1개만 보이도록 조정 */
@media (max-width: 320px) {
    .related-thumb100 {
        width: 100%;
    }
}
/* 관련 글 스타일 끝 */

/* H4 레인보우 물결 효과 */
@keyframes rainbow-wave {
    0%, 100% {
        background-position: 0%;
    }
    50% {
        background-position: 100%;
    }
}

.related-title100 {
    font-weight: bold; /* 볼드체 */
    background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red); /* 레인보우 그라디언트 설정 */
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* 그라디언트가 텍스트 색상으로 보이도록 설정 */
    animation: rainbow-wave 2s linear infinite; /* 2초 동안 무한 반복 */
}
/* H4 레인보우 물결 효과 끝 */