/* 전체 body 스타일링 */
body {
    font-family: Arial, sans-serif;
    background-color: #2f2f2f;
    margin: 0;
    padding: 0;
}

/* 헤더 스타일링 */
header {
    background-color: #333;
    padding: px 0;
    text-align: center;
}

/* 로고 이미지 스타일링 */
.logo {
    width: 100px; /* 로고 이미지의 너비 조정 */
}

/* 메인 컨테이너 스타일링 */
main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap; /* 요소들이 넘치면 다음 줄로 넘어갈 수 있도록 설정 */
    padding: 20px;
}

/* 사진 컨테이너 스타일링 */
.photo-container {
    width: calc(50% - 20px); /* 반응형으로 두 개의 요소가 가로로 나란히 나타나도록 설정 */
    margin: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    background-color: #000000;
    text-align: center;
    overflow: hidden; /* 내부 요소가 넘치는 경우를 대비하여 오버플로우 숨김 처리 */
    margin-top: 150px;
}

/* 이미지 스타일링 */
.photo {
    width: 100%;
    height: auto;
    transition: transform 0.7s ease; /* 호버 효과를 위한 트랜지션 설정 */
}

.photo:hover {
    transform: scale(1.05); /* 호버 시 이미지 확대 */
}

/* 설명 텍스트 스타일링 */
.photo-description {
    padding: 5px;
    text-align: center;
    background-color: #f5f5f5;
}