* {
    box-sizing: border-box;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

.container{
    display: flex;
    width: 90vw;
}

.first{background-image: url(https://cdn.pixabay.com/photo/2020/01/08/18/50/clouds-4750959_1280.jpg);}
.second{background-image: url(https://cdn.pixabay.com/photo/2020/07/19/14/15/sky-5420151_1280.jpg);}
.third{background-image: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884_1280.jpg);}
.fourth{background-image: url(https://cdn.pixabay.com/photo/2022/09/10/15/13/sky-7445243_1280.jpg);}

.panel{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    height: 80vh;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    flex: 0.5;
    margin: 10px;
    position: relative;
    transition: flex 0.7s ease-in;
}

.panel h3{
    font-size: 24px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin: 0;
    opacity: 0;
}

.panel.active{  /* flex 값이 확대 값임 */
    flex: 1;
}

.panel.active h3{
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
}

@media (max-width: 480px){  /* 480 미만의 화면의 코드 */
    .container{
        width: 100vw;
    }
    /* 그 경우 3번째, 4번째 패널을 안보이게 만든다. => 반응형 코드 */
    .panel:nth-of-type(3),
    .panel:nth-of-type(4){
        display: none;
    }
}