/* Первый экран: высоту задаёт текст, а не исходное квадратное фото декора.
   Подпись видна сразу даже на низком экране или при длинном тексте города. */
.page-home .hero{grid-template-columns:minmax(0,1fr) 46%}
.page-home .hero__txt{
  max-width:none;justify-self:stretch;
  padding-top:clamp(32px,5.5vh,64px);padding-bottom:clamp(32px,5.5vh,64px);
}
.page-home .hero__img{min-height:440px;overflow:hidden}
.page-home .hero__img img{
  position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover;
}
.page-home .hero__cap{
  top:24px;bottom:auto;left:24px;max-width:calc(100% - 48px);line-height:1.5;
}
.page-home .hero__stock{display:block;margin-top:2px;font-size:.875em;color:var(--muted)}
.page-home .hero__img:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}

@media (min-width:901px) and (max-width:1100px){
  .page-home .hero{grid-template-columns:minmax(0,1fr) 42%}
}
@media (min-width:901px) and (max-height:740px){
  .page-home .hero__txt{padding-top:32px;padding-bottom:32px}
  .page-home .hero h1{font-size:clamp(36px,4.2vw,52px)}
  .page-home .hero__top,.page-home .hero h1{margin-bottom:18px}
  .page-home .hero__btns{margin-top:24px}
  .page-home .hero__note{margin-top:20px}
}
@media (max-width:900px){
  .page-home .hero{grid-template-columns:1fr}
  .page-home .hero__img{min-height:0;aspect-ratio:2/1;max-height:30vh;max-height:30svh}
  .page-home .hero__txt{padding:16px var(--pad) 40px}
  .page-home .hero__img img{aspect-ratio:auto;max-height:none}
  .page-home .hero__cap{top:14px;left:var(--pad);max-width:calc(100% - 2 * var(--pad));padding:8px 12px;font-size:14px}
}