/* ================= HERO ================= */

.page-hero{

    height: 60vh;

    background: url('../assets/habitaciones/suite1.png') center/cover no-repeat;

    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;
}

.page-overlay{

    position: absolute;
    inset: 0;

    background: rgba(0,0,0,0.5);
}

.page-hero-content{

    position: relative;
    z-index: 2;

    color: white;
}

.page-hero-content h1{

    font-size: 72px;
    margin-bottom: 20px;
}

.page-hero-content p{

    font-size: 20px;
}

/* ================= ROOMS ================= */

.rooms-page{

    display: flex;
    flex-direction: column;
    gap: 120px;
}

.room-full{

    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 60px;

    align-items: center;
}

.reverse .room-image{

    order: 2;
}

.room-image img{

    border-radius: 30px;

    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.room-details h2{

    font-size: 48px;
    margin: 20px 0;
}

.price{

    color: var(--green);

    font-size: 24px;
    font-weight: 700;

    margin-bottom: 25px;
}

.room-details p{

    line-height: 1.8;
    margin-bottom: 25px;
}

.room-details ul{

    margin-bottom: 35px;
    padding-left: 20px;
}

.room-details ul li{

    margin-bottom: 12px;
}

/* ================= RESPONSIVE ================= */

@media(max-width:992px){

    .room-full{

        grid-template-columns: 1fr;
    }

    .reverse .room-image{

        order: 0;
    }

}

@media(max-width:768px){

    .page-hero-content h1{

        font-size: 52px;
    }

    .room-details h2{

        font-size: 38px;
    }

}

@media(max-width:480px){

    .page-hero-content h1{

        font-size: 40px;
    }

    .room-details h2{

        font-size: 30px;
    }

}