.mobile-only {}
.desktop-only {display:none}
.gallery-desktop-img {display:block; width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform .22s ease}

@media (min-width:64rem) {
  :root {
    --HeroTitle:2rem;
    --HeroTitleLine:2.5rem;
    --InsetBlock:1.5rem;
    --OffsetInBlock:1.5rem;
  }

  /*Visible/hidden*/
  .mobile-only {display:none}
  .desktop-only.gallery-desktop {display:block}
  .desktop-only.btn {display:inline-flex}
  .desktop-only.link {display:inline-flex}
  .header-center.desktop-only {display:flex}

  /*Base*/
  header {border-radius:0}
  .container--column {gap:var(--GapXL)}
  .collection-hero, .full-service-hero, .page-hero {gap:var(--GapM)}
  .overlap-top {padding-top:var(--InsetM)}
  h2.headline {font-size:var(--Title); line-height:var(--TitleLine)}
  .map-preview--desktop {aspect-ratio:21 / 9}
  .divider--group {height:var(--Stroke)}
  .listing-flow {margin-top:0; padding-top:0}
  .listing-flow .listing-hero {gap:var(--GapS)}
  .slider {gap:var(--GapM)}


  /*Header*/
  .page-header--wide {width:100%; max-width:var(--WidthWideBlock); margin:0 auto}
  .page-header--overlay.page-header--wide {left:50%; right:auto; width:100%; transform:translateX(-50%)}
  .header-center--logo {flex:1 1 auto; justify-content:flex-start}

  /*Hero*/
  .canvas.hero {border-radius:0}
  .hero {padding-bottom:calc(var(--InsetXXL) + var(--RadiusXXL)); border-radius:0}
  .hero-form {display:flex; flex-direction:row; align-items:stretch; gap:var(--GapL); width:100%; margin:var(--OffsetM) auto}
  .listing-hero {gap:var(--GapL)}
  .hero-note {max-width:var(--WidthBlock); font-size:var(--Large); line-height:var(--LargeLine)}
  .blog-hero, .blog-category-hero, .blog-post-hero {gap:var(--GapS)}
  .blog-hero-label {font-size:var(--Headline); line-height:var(--HeadlineLine);}

  /*Hero + Rent Forms*/
  .hero-form .rent-form {flex:1 1 auto}
  .hero-form > .btn {flex:0 0 12rem; width:12rem; height:auto; border-radius:var(--RadiusXL)}

  .rent-form--segmented .btn-field,
  .rent-form--segmented .btn-field--full,
  .rent-form--segmented .btn-field--half {flex:1 1 0; min-width:0}

  .rent-form--segmented .btn-field {border-left:0; box-shadow:none}
  .rent-form--segmented .btn-field:not([hidden]) {box-shadow:inset -0.0625rem 0 0 var(--StrokeSecondary)}
  .rent-form--segmented .btn-field:not([hidden]):last-of-type {box-shadow:none}

  .rent-form--segmented .btn-field--stroke-b,
  .rent-form--segmented .btn-field--stroke-b-l,
  .rent-form--segmented .btn-field--stroke-l,
  .rent-form--segmented .btn-field--stroke-r {box-shadow:none}

  .rent-form--segmented .btn-field--half[data-depends-layout="type"] {flex:0 0 10rem}
  .rent-form--segmented .btn-field[data-target="#h-type"] {flex:1.15 1 0}
  .rent-form--segmented .btn-field[data-target="#h-district"] {flex:1.15 1 0}
  .rent-form--segmented .btn-field[data-target="#h-rent-min"] {flex:0.8 1 0}
  .rent-form--segmented .btn-field[data-target="#h-price-min"] {flex:0.95 1 0}

  /*Hero banners*/
  .slider--banners {overflow:visible; scroll-snap-type:none}
  .slider--banners > .banner {flex:0 0 calc(50% - (var(--GapM) / 2)); min-width:0}
  .banner:hover {transform:translateY(-0.375rem); box-shadow:var(--ShadowDefault)}

  /*Promo Blocks*/
  .slider--promo-blocks {overflow:visible; scroll-snap-type:none}
  .slider--promo-blocks > .promo-block {flex:0 0 calc(50% - (var(--GapM) / 2)); min-width:0}\

  /*Benefites block*/
  .slider--benefits {overflow:visible; scroll-snap-type:none}
  .slider--benefits > .benefit-card {flex:1 1 0; min-width:0; scroll-snap-align:none}

  /*Join Widget*/
  .rent-join {align-items:center; justify-content:space-between; gap:var(--GapL)}
  .rent-join-content {justify-content:center}

  /*Slider*/
  .slider-shell {position:relative; padding-left:var(--InsetBlock); padding-right:var(--InsetBlock)}
  .slider-shell .slider--cards-S {gap:var(--GapM); padding:0; scroll-padding:0}
  .slider-shell .slider--cards-S > .card {flex:0 0 calc((100% - (var(--GapM) * 3)) / 4)}
  .slider-shell--cards-5 .slider--cards-S > .card {flex:0 0 calc((100% - (var(--GapM) * 4)) / 5)}
  .slider-shell--cards-6 .slider--cards-S > .card {flex:0 0 calc((100% - (var(--GapM) * 5)) / 6)}
  .slider--cards-XS {gap:var(--GapM); overflow:visible; padding:0 var(--InsetBlock); scroll-snap-type:none}
  .slider--cards-XS > .card {flex:0 0 calc((100% - (var(--GapM) * 5)) / 6); min-width:0; scroll-snap-align:none}
  .slider-nav-btn {position:absolute; top:50%; z-index:2; transform:translateY(-50%)}
  .slider-nav-btn[hidden] {display:none}
  .slider-nav-btn--prev {left:calc(var(--InsetBlock) - 1.375rem)}
  .slider-nav-btn--next {right:calc(var(--InsetBlock) - 1.375rem)}

  /*Cards List & Grid*/
  .list--cards {display:flex; flex-flow:row wrap; gap:var(--GapL)}
  .list--cards-2 > .card {flex:0 0 calc((100% - var(--GapL)) / 2); min-width:0}
  .list--cards-3 > .card {flex:0 0 calc((100% - (var(--GapL) * 2)) / 3); min-width:0}

  .grid--cards {row-gap:var(--GapL); column-gap:var(--GapL)}
  .grid--cards-3 > .card {flex:0 0 calc((100% - (var(--GapL) * 2)) / 3); min-width:0}
  .grid--cards-5 > .card {flex:0 0 calc((100% - (var(--GapL) * 4)) / 5); min-width:0}

  /*Sheet*/
  .sheet {left:50%; right:auto; top:50%; bottom:auto; width:calc(100% - 2rem); max-width:30rem; max-height:calc(100dvh - 5rem); border-radius:var(--RadiusXXL); transform:translate(-50%, calc(-50% + 2rem)) scale(.98); opacity:0; visibility:hidden; pointer-events:none; box-shadow:var(--ShadowDefault)}
  .sheet.is-open {transform:translate(-50%, -50%) scale(1); opacity:1; visibility:visible; pointer-events:auto}
  .sheet-content {padding:var(--InsetXL)}
  .sheet-dock {padding:var(--InsetM) var(--InsetXL) var(--InsetXL)}
  .sheet-close {top:var(--InsetM); right:var(--InsetM)}

  /*List*/
  .list--desktop-divided .list-item {border-bottom:var(--Stroke) solid var(--StrokePrimary)}
  .list--desktop-divided .list-item:last-child {border-bottom:0}
  .list--popular-searches {padding-left:var(--InsetBlock); padding-right:var(--InsetBlock)}
  .list--helpful-posts {padding-left:0; padding-right:0}


  /*Filters*/
  .filters-bar {border-bottom:var(--Stroke) solid var(--StrokePrimary)}
  .slider--pills {padding:var(--InsetBlock); gap:var(--GapM); transition:padding .18s ease}
  .filters-bar.is-stuck .slider--pills {padding:var(--InsetM) var(--InsetBlock)}

  /*Pagination*/
  .pagination {display:flex; flex-flow:row nowrap; align-items:center; justify-content:space-between; border-radius:var(--RadiusL); background-color:var(--BackgroundSecondary)}
  .pagination .btn--icon {border-radius:var(--RadiusL)}
  .pagination {width:fit-content; min-width:22rem; margin:0 auto}

  /*Gallery*/
  .gallery-mobile {display:none}
  .desktop-only.gallery-desktop {display:block; width:100%; max-width:var(--WidthWideBlock); max-height:27.5rem; margin:0 auto; overflow:hidden; border-radius:var(--RadiusXXL)}

  section.gallery {margin-top:var(--OffsetS)}

  .gallery-desktop-empty,
  .gallery-desktop-single,
  .gallery-desktop-tile {position:relative; overflow:hidden; padding:0; border:0; background:var(--BackgroundSecondary); cursor:pointer}

  .gallery-desktop-single,
  .gallery-desktop-grid {border-radius:0}

  .gallery-desktop-single {display:block; width:100%; height:27.5rem}
  .gallery-desktop-empty {width:100%; height:27.5rem}

  .gallery-desktop-image {display:block; position:relative; width:100%; height:100%; overflow:hidden; background:var(--BackgroundSecondary)}

  .gallery-desktop-img {display:block; width:100%; height:100%; object-fit:cover}
  .gallery-desktop-img--blur {position:absolute; inset:0; transform:scale(1.06); filter:blur(1rem); opacity:1; transition:opacity .24s ease}
  .gallery-desktop-img--main {position:absolute; inset:0; transform:scale(1); opacity:0; transition:opacity .24s ease, transform .22s ease}

  .js-image.is-loaded .gallery-desktop-img--main {opacity:1}
  .js-image.is-loaded .gallery-desktop-img--blur {opacity:0}

  .gallery-desktop-grid {display:grid; gap:var(--GapS); width:100%; height:27.5rem}

  .gallery-desktop-grid--2 {grid-template-columns:1fr 1fr}
  .gallery-desktop-grid--2 .gallery-desktop-tile {aspect-ratio:auto}

  .gallery-desktop-grid--3 {grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr}
  .gallery-desktop-grid--3 .gallery-desktop-tile--main {grid-column:1; grid-row:1 / span 2}
  .gallery-desktop-grid--3 .gallery-desktop-tile:nth-child(2) {grid-column:2; grid-row:1}
  .gallery-desktop-grid--3 .gallery-desktop-tile:nth-child(3) {grid-column:2; grid-row:2}

  .gallery-desktop-grid--4 {grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr}
  .gallery-desktop-grid--4 .gallery-desktop-tile--main {grid-column:1; grid-row:1 / span 2}
  .gallery-desktop-grid--4 .gallery-desktop-tile:nth-child(2) {grid-column:2; grid-row:1}
  .gallery-desktop-grid--4 .gallery-desktop-tile:nth-child(3) {grid-column:3; grid-row:1}
  .gallery-desktop-grid--4 .gallery-desktop-tile:nth-child(4) {grid-column:2 / span 2; grid-row:2}

  .gallery-desktop-grid--5 {grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr}
  .gallery-desktop-grid--5 .gallery-desktop-tile--main {grid-column:1; grid-row:1 / span 2}
  .gallery-desktop-grid--5 .gallery-desktop-tile:nth-child(2) {grid-column:2; grid-row:1}
  .gallery-desktop-grid--5 .gallery-desktop-tile:nth-child(3) {grid-column:3; grid-row:1}
  .gallery-desktop-grid--5 .gallery-desktop-tile:nth-child(4) {grid-column:2; grid-row:2}
  .gallery-desktop-grid--5 .gallery-desktop-tile:nth-child(5) {grid-column:3; grid-row:2}

  .gallery-desktop-more {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:var(--Title); line-height:var(--TitleLine); font-weight:var(--SemiBold); color:var(--TextOnBackground); background:rgba(0,0,0,0.32)}

  .gallery-desktop-tile:hover .gallery-desktop-img--main,
  .gallery-desktop-single:hover .gallery-desktop-img--main {transform:scale(1.15)}

  /*Lightbox*/
  .lightbox-thumbs {justify-content:center; max-width:calc(100% - (var(--InsetM) * 2)); margin:0 auto}

  /*Map*/
  #map {height:calc(100dvh - 5.5rem); border-radius:0}
  .card-map {right:auto; left:var(--InsetXL); bottom:var(--InsetXXL); width:20rem; max-width:20rem; flex-direction:column; gap:var(--GapM); padding:var(--InsetS) var(--InsetS) calc(var(--InsetS) * 2)}
  .card-map .card-content {display:flex; flex-direction:column; gap:var(--GapXXS); padding:0 var(--InsetS)}
  .card-map--M {align-items:stretch}
  .card-map--M .img-box {flex:0 0 auto; width:100%; height:auto; min-width:0; min-height:0; aspect-ratio:16/9; border-radius:var(--RadiusL)}
  .card-map--M .card-details:last-of-type {margin-top:0}

  .card-map--S {align-items:stretch}
  .card-map--S .img-box {flex:0 0 auto; width:100%; height:auto; min-width:0; min-height:0; aspect-ratio:16/9}
  .card-map--S .card-details:last-of-type {margin-top:0}

  /*Cabinet*/
  .slider-shell--photos {position:relative; padding-left:var(--InsetBlock); padding-right:var(--InsetBlock)}
  .slider-shell--photos .slider--photos {gap:var(--GapM); padding:0; scroll-padding:0}
  .slider-shell--photos .slider--photos > .img-box,
  .slider-shell--photos .slider--photos > form {flex:0 0 calc((100% - (var(--GapM) * 2)) / 3); min-width:0; scroll-snap-align:start}

  .slider-shell--photos .slider-nav-btn {position:absolute; top:50%; z-index:2; transform:translateY(-50%)}
  .slider-shell--photos .slider-nav-btn[hidden] {display:none}
  .slider-shell--photos .slider-nav-btn--prev {left:calc(var(--InsetBlock) - 1.375rem)}
  .slider-shell--photos .slider-nav-btn--next {right:calc(var(--InsetBlock) - 1.375rem)}


  /*Blog*/
  .post-cover {aspect-ratio:21 / 9; border-radius:var(--RadiusXXL)}
  .post-cover img {border-radius:var(--RadiusXXL)}
  .content--article {display:flex; flex-direction:column; gap:var(--GapM); font-size:var(--Large); line-height:var(--HeadlineLine)}
  .content--article p,
  .content--article li {font-size:var(--Large); line-height:var(--HeadlineLine)}
  .content--article img {display:block; width:100%; height:auto; margin-bottom:var(--InsetS); border-radius:var(--RadiusL)}
  .content--article ul, .content--article ol {padding-left:1.25rem; margin:0 0 var(--InsetS)}
  .content--article li + li {margin-top:0.5rem}
  .content--article a {color:var(--TextLink); text-decoration:none}
  .content--article a:hover {color:var(--TextLinkHover)}
}