.index{

    .header{
        &::after{
            background-color: var(--color-main);
        }
        a{
            color: var(--color-text);
        }
        .m-gnb-btn{
            color: var(--color-text);
        }
    }

    .section-include-hero{
        background-color: var(--color-main);
        .title{
            font-size:2.5rem ; /*46,26*/
            color: var(--color-text);
        }
    }

    .section-index-room{
        background-color: var(--color-main);
        color: var(--color-text);
        padding-top: clamp(55px, 5vw, 92px);
        padding-bottom: clamp(53px, 7vw ,120px);
        .room-list{
            padding-top: clamp(30px, 6.5vw, 120px);
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: auto;
            row-gap: clamp(60px, 8vw, 80px);
            column-gap: clamp(0px , 2vw, 56px);
            .room-item-title{
                border-bottom: 1px solid var(--color-text);
                overflow: hidden;
            }
            &>div:first-child{
                grid-area: 1/2;
                display: flex;
                grid-column: 1/3;
                .room-item{
                    width: 70%;
                }
                .section-content{
                    padding-left: 40px;

                }
            }
            .room-item:nth-child(2),
            .room-item:nth-child(5),
            .room-item:nth-child(6),
            .room-item:nth-child(9),
            .room-item:nth-child(10){
                img{
                aspect-ratio: 86/80;
                }
            }
            .room-item:nth-child(3),
            .room-item:nth-child(4),
            .room-item:nth-child(7),
            .room-item:nth-child(8){
                img{
                    aspect-ratio: 2/1;
                }
            }
        }
    }

    .section-index-special{
        padding-block: 40px;
        .wrap{
            position: relative;
        }
        .section-title{
            border-top: 1px solid var(--color-black);
            width: 100%;
        }
    }

}
@media(width < 1400px){
}
@media(width < 1024px) {
    .index {
        .header {
            &::after {
                background-color: var(--color-main);
            }

            a {
                color: var(--color-text);
            }
        }

        .section-include-hero {
            background-color: var(--color-main);

            .title {
                font-size: 2rem;
            }
        }

        .section-index-room{
            .room-list{
                display: flex;
                flex-direction: column;
                & > div:first-child {
                    .room-item{
                        width: 100%;
                    }
                }
            }
        }

        .section-index-special{
            padding-bottom: 15vw;
        }

    }
}
@media(width < 768px){
}
@media(width < 400px){
}