/* imageType */
.image__inner {
    display: flex;
    justify-content: space-between;
}
.image {
    width: 32%;
    position: relative;
    overflow: hidden;
}
.image__box {
    height: 100%;
}
.image__box img {
    transition: all 0.5s ease-in-out;
}
.image__desc {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;     /* image__desc 박스 안넘치게 하기 */
    backdrop-filter: blur(10px);
    transition: all 0.3s ease-in-out;
}

/* 이미지 설명칸 배경색, h3/more 글씨색상 설정 */
.img1 > .image__desc {
    background: rgba(178, 82, 36, 0.5);
}
.img1 > .image__desc h3 {
    color: #fff;
}
.img1 > .image__desc .more {
    color: #fff;
}
.img2 > .image__desc {
    background-color: rgba(187, 238, 239, 0.5);
}
.img2 > .image__desc h3 {
    color: #006462;
}
.img2 > .image__desc .more {
    color: #006462;
}
.img3 > .image__desc {
    background-color: rgba(161, 166, 172, 0.5);
}
.img3  > .image__desc h3 {
    color: #183169;
}
.img3  > .image__desc .more {
    color: #183169;
}

/* 위로 올라오는 애니메이션 주기 위해 hover 효과 주기 */
.img1 .image__desc {
    bottom: -100px;
}
.img1:hover .image__desc {
    bottom: 0;
}
.img2 .image__desc {
    bottom: -100px;
}
.img2:hover .image__desc {
    bottom: 0;
}
.img3 .image__desc {
    bottom: -100px;
}
.img3:hover .image__desc {
    bottom: 0;
}

.image:hover .image__box img {
    transform: scale(1.05);
}

/* 이미지 설명칸 글씨 크기와 margin값 등등... */
.image__desc h3 {
    font-size: 24px;
    margin-bottom: 5px;
}
.image__desc .more {
    font-size: 16px;
    font-weight: 300;
}
.image__desc .more:hover {
    text-decoration: underline;
}

/* 반응형 */
@media (max-width: 768px) {
    .image__inner {
        flex-direction: column;
    }
    .image {
        width: 100%;
        margin-bottom: 20px;
    }
    .image:nth-child(3) {
        margin-bottom: 0;
    }
}