html{scroll-padding-top:100px}
@media(max-width:1099px){html{scroll-padding-top:160px}}
@media(max-width:767px){
 main img{max-width:100%}
 main .grid>*{min-width:0}
 main h1,main h2,main h3{overflow-wrap:break-word}
 #availability-form{border-radius:24px}
 #availability-form input{min-width:0;width:100%}
 .contact-modal-card{padding:20px}
 .contact-field input,.contact-field textarea{font-size:16px}
}
@media(max-width:639px){
 main h1{font-size:clamp(2rem,8.5vw,2.25rem)}
 main h2.text-4xl{font-size:clamp(1.85rem,8vw,2.25rem)}
 main .grid.grid-cols-2:has(>div>img.field-photo){grid-template-columns:minmax(0,1fr)}
 #availability-form input{font-size:16px}
}