@charset "UTF-8";

.map-container {
    position: relative;
    width: 100%;      /* 화면 너비에 맞춤 */
    padding-bottom: 56.25%; /* 16:9 비율 (높이 / 너비) */
    height: 0;
    overflow: hidden;
}
.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.map-image {
    max-width: 100%;  /* 화면 폭에 맞춰 자동 줄어듦 */
    height: auto;     /* 비율 유지 */
    display: block;   /* 여백 제거 */
    margin: 0 auto;   /* 가운데 정렬 */
}
/* 컨테이너: 이미지들을 묶는 영역 */
.image-grid {
    display: flex;
    flex-wrap: wrap;      /* 화면 줄바꿈 허용 */
    gap: 10px;            /* 이미지 사이 간격 */
}

/* 개별 이미지: 반응형 + 절반 너비 */
.image-grid img {
    width: calc(50% - 5px); /* 한 줄에 두 개 (간격 보정) */
    height: auto;           /* 비율 유지 */
    display: block;         /* 여백 제거 */
}