/* Sarajevo Rent — responsive overrides. The pages style everything with inline styles, which always beat a stylesheet, so every mobile override here must use !important to win the cascade. Classes are added to key layout containers in each *.dc.html page. */ img, iframe { max-width: 100%; } /* ---- Tablet / small laptop ---- */ @media (max-width: 960px) { /* Guard against accidental horizontal scroll on small screens. Scoped to mobile so it can't turn into a scroll container on desktop (which would break the Property page's sticky booking panel). */ html, body { max-width: 100%; overflow-x: hidden; } .sr-pad { padding-left: 28px !important; padding-right: 28px !important; } .sr-header { padding-left: 28px !important; padding-right: 28px !important; flex-wrap: wrap !important; row-gap: 14px !important; } .sr-nav { order: 3 !important; width: 100% !important; justify-content: center !important; gap: 12px 22px !important; } .sr-cards { grid-template-columns: 1fr 1fr !important; } .sr-2col { grid-template-columns: 1fr !important; gap: 36px !important; } .sr-2col-flush { grid-template-columns: 1fr !important; } .sr-facts { grid-template-columns: repeat(2, 1fr) !important; } .sr-h1 { font-size: 38px !important; } .sr-h2 { font-size: 32px !important; } .sr-about { padding-top: 96px !important; } } /* ---- Phones ---- */ @media (max-width: 640px) { .sr-pad { padding-left: 18px !important; padding-right: 18px !important; } .sr-header { padding-top: 14px !important; padding-bottom: 14px !important; } .sr-nav { gap: 10px 16px !important; font-size: 13px !important; } .sr-actions { gap: 10px !important; } .sr-cards { grid-template-columns: 1fr !important; } .sr-stats { grid-template-columns: 1fr 1fr !important; row-gap: 30px !important; } .sr-h1 { font-size: 30px !important; } .sr-h2 { font-size: 26px !important; } /* Hero: drop the fixed height + absolute overlay layout and let it stack */ .sr-hero { height: auto !important; } .sr-header-hero { position: relative !important; } .sr-hero-inner { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; padding: 8px 18px 26px !important; } .sr-hero-title { font-size: 33px !important; max-width: none !important; } .sr-searchwrap { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; padding: 0 18px !important; } .sr-search { grid-template-columns: 1fr !important; max-width: none !important; box-shadow: 0 12px 30px rgba(15,51,43,0.18) !important; } .sr-search > * { border-right: none !important; border-left: none !important; } .sr-search > * + * { border-top: 1px solid #ece8df !important; } .sr-search button { padding: 18px 24px !important; letter-spacing: 0.14em !important; } .sr-about { padding-top: 48px !important; } /* Property page photo gallery: main photo, then the two smaller ones */ .sr-gallery { grid-template-columns: 1fr !important; grid-template-rows: 250px 180px 180px !important; } .sr-gallery-main { grid-row: auto !important; } }