/* 클럽 첫 화면 맨 위의 이미지들.

   원래 한 장이던 자리에 이제 최대 세 장이 차례로 붙는다. 한 장만 넣은
   커뮤니티는 예전과 똑같이 보인다.

   Club.css에 넣지 않고 파일을 따로 둔 이유: 그 파일은 서버에서 직접 손을
   댄 흔적이 있어, 우리 사본을 덮어쓰면 그 손질이 사라진다. */

.ClubMainImgContainer {
    margin-bottom: 10px;
    text-align: center;
    overflow: hidden;
}

.ClubMainImgContainer:last-child {
    margin-bottom: 0;
}

.ClubMainImgContainer img.ClubMainImg {
    display: block;
    width: 100%;
    height: auto;

    /* 세로로 긴 사진 세 장이 이어지면 글까지 한참을 내려야 한다.
       넘치는 부분은 위아래를 잘라 낸다. */
    max-height: 600px;
    object-fit: cover;
    object-position: center;
}

/* 주소를 넣은 이미지만 눌러서 넘어갈 수 있다는 것이 드러나도록. */
.ClubMainImgContainer a {
    display: block;
}

.ClubMainImgContainer a img.ClubMainImg {
    transition: opacity 0.15s ease;
}

.ClubMainImgContainer a:hover img.ClubMainImg {
    opacity: 0.9;
}

@media (max-width: 767px) {
    .ClubMainImgContainer img.ClubMainImg {
        max-height: 320px;
    }
}