@media(max-width:768px){
    html,body{width:100%;max-width:100%;overflow-x:hidden}

    .hero{
        min-height:68svh;
        padding:150px 18px 34px;
        background-position:center;
    }

    .hero-content{width:100%;max-width:100%}

    .hero h1{
        max-width:100%;
        font-size:clamp(30px,9vw,40px);
        line-height:1.08;
        overflow-wrap:anywhere;
    }

    .hero h2{font-size:23px}

    .hero p{
        max-width:100%;
        font-size:15px;
        line-height:1.5;
    }

    .property-meta{gap:7px;margin-top:20px}

    .property-meta span{
        padding:7px 10px;
        border-radius:5px;
        font-size:12px;
    }

    .container{
        width:100%;
        max-width:100%;
        margin:42px auto;
        padding:0 16px;
    }

    .grid{display:block;width:100%}
    .section-title,.map-section h3{font-size:25px}

    .description{
        max-width:100%;
        font-size:16px;
        line-height:1.6;
        overflow-wrap:anywhere;
        white-space:normal;
    }

    .gallery{
        width:100%;
        padding:10px;
        border-radius:8px;
    }

    .main-img{
        width:100%;
        height:clamp(220px,62vw,310px);
        border-radius:6px;
    }

    .thumbs{
        display:flex;
        width:100%;
        gap:8px;
        margin-top:10px;
        padding-bottom:7px;
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
    }

    .thumbs img{
        width:76px;
        height:56px;
        flex:0 0 76px;
        border-radius:4px;
        scroll-snap-align:start;
    }

    .btn{
        display:block;
        width:100%;
        margin-top:20px;
        padding:13px 16px;
        border-radius:5px;
        text-align:center;
    }

    .details{
        position:static;
        width:100%;
        margin-top:32px;
        padding:20px;
        border-radius:8px;
    }

    .details h3{font-size:23px}

    .details li{
        align-items:flex-start;
        gap:12px;
        padding:12px 0;
        font-size:14px;
    }

    .details li span{flex:1 1 42%}

    .details li strong{
        flex:1 1 50%;
        max-width:55%;
        text-align:right;
        overflow-wrap:anywhere;
    }

    .map-section{
        width:100%;
        margin-top:42px;
        padding:18px;
        border-radius:8px;
    }

    .map-section p{line-height:1.5}
    .map{width:100%;border-radius:6px}

    .map iframe{
        display:block;
        width:100%;
        height:290px;
    }

    footer{
        margin-top:50px;
        padding:32px 18px 82px;
        font-size:13px;
    }
}

@media(max-width:390px){
    .hero{padding-left:14px;padding-right:14px}
    .container{padding-left:12px;padding-right:12px}
}