/* BASIC css start */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    margin-top: 68px; /* 페이지 상단에 68px 마진 추가 */
}

.image-Area {
    display: grid;
    max-width: 1700px; /* 페이지 내에서 가운데 정렬 */
    margin: 0 auto; /* 페이지 중앙 정렬 */
    padding: 20px;
    gap: 20px; /* 이미지 사이 간격 */
    
    /* 기본 열 수 설정 */
    grid-template-columns: repeat(4, 1fr); /* 기본 4열 */
}

.image-item {
    position: relative;
}

.image-item img {
    width: 100%;
    max-width: 600px; /* 이미지의 최대 너비 제한 */
    height: auto;
    object-fit: cover; /* 이미지 비율 유지하며 컨테이너 채우기 */
}

/* 반응형 설정 */
@media (max-width: 1200px) {
    .image-Area {
        grid-template-columns: repeat(3, 1fr); /* 1200px 이하일 때 3열 */
    }
}

@media (max-width: 768px) {
    .image-Area {
        grid-template-columns: repeat(2, 1fr); /* 768px 이하일 때 2열 */
    }
}

@media (max-width: 480px) {
    .image-Area {
        grid-template-columns: 1fr; /* 480px 이하일 때 1열 */
    }
}

/* BASIC css end */